这是一张QQ空间说说详情的截图。
分析:
1、点击右上角三个点的图标,在界面底部弹出一个区域,这个区域有一些按钮提供给我们操作 2、当该区域出现的时候,详情界面便灰了,也说成透明度变化了 3、当任意选了一个按钮或者点击了该区域以外的部分,该区域消失,灰色界面变回亮白色,并执行点击的按钮对应的操作
显然,这个功能我们需要用PopupWindow实现更好~
--------------------------------------------------------------------------------------
下面通过一个Demo来实现这个需求~~
效果图:
首先还是布局文件:
1、主界面:
我们只需要在界面的右上角放一个按钮来弹出PopupWindow ,注意 父容器需要有一个id,因为我们需要它来给PopupWindow设置弹出的位置
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:id="@+id/mainlayout" > <ImageButton android:id="@+id/btn_more" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/btn_more" android:background="#0000" android:layout_alignParentRight="true" android:layout_margin="5dp" /> </RelativeLayout>
2、PopupWindow界面
<?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_gravity="center_vertical|center" android:background="@drawable/shape_rectangle_white" android:orientation="vertical" > <TextView android:id="@+id/shareto" android:layout_width="match_parent" android:layout_height="35dp" android:gravity="center" android:layout_gravity="center_horizontal" android:text="分享到" android:textSize="15sp" /> <LinearLayout android:id="@+id/fp_linear_share" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginBottom="5dp"> <LinearLayout android:id="@+id/fp_linear_sharetoWeixin" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center_horizontal" > <ImageView android:layout_width="55dp" android:layout_height="55dp" android:background="@mipmap/ic_launcher" android:layout_gravity="bottom|center_horizontal"/> <TextView android:layout_marginTop="4dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信联系人" android:gravity="center" /> </LinearLayout> <LinearLayout android:id="@+id/fp_linear_sharetoquan" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center_horizontal" > <ImageView android:layout_width="55dp" android:layout_height="55dp" android:background="@mipmap/ic_launcher" android:layout_gravity="bottom|center_horizontal"/> <TextView android:layout_marginTop="4dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信朋友圈" android:gravity="center" /> </LinearLayout> <LinearLayout android:id="@+id/fp_linear_sharetoQzone" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center_horizontal" > <ImageView android:layout_width="55dp" android:layout_height="55dp" android:background="@mipmap/ic_launcher" android:layout_gravity="bottom|center_horizontal"/> <TextView android:layout_marginTop="4dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="QQ空间" android:gravity="center" /> </LinearLayout> <LinearLayout android:id="@+id/fp_linear_sharetoQQ" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center_horizontal" > <ImageView android:layout_width="55dp" android:layout_height="55dp" android:background="@mipmap/ic_launcher" android:layout_gravity="bottom|center_horizontal"/> <TextView android:layout_marginTop="4dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="QQ好友" android:gravity="center" /> </LinearLayout> </LinearLayout> <View android:layout_marginTop="20dp" android:layout_width="match_parent" android:layout_height="1dp" android:background="#e8e8e8" /> <LinearLayout android:id="@+id/fp_other" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="25dp" android:layout_marginBottom="5dp"> <LinearLayout android:id="@+id/fp_report" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center_horizontal" > <ImageView android:layout_width="55dp" android:layout_height="55dp" android:background="@mipmap/ic_launcher" android:layout_gravity="bottom|center_horizontal"/> <TextView android:layout_marginTop="4dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="举报" android:gravity="center" /> </LinearLayout> <LinearLayout android:id="@+id/fp_hide_all" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center_horizontal" > <ImageView android:layout_width="55dp" android:layout_height="55dp" android:background="@mipmap/ic_launcher" android:layout_gravity="bottom|center_horizontal"/> <TextView android:layout_marginTop="4dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="屏蔽此人" android:gravity="center" /> </LinearLayout> <LinearLayout android:id="@+id/fp_hide_pic" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center_horizontal" > <ImageView android:layout_width="55dp" android:layout_height="55dp" android:background="@mipmap/ic_launcher" android:layout_gravity="bottom|center_horizontal"/> <TextView android:layout_marginTop="4dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="屏蔽此照片" android:gravity="center" /> </LinearLayout> <LinearLayout android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center_horizontal" > <ImageView android:layout_width="55dp" android:layout_height="55dp" android:layout_gravity="bottom|center_horizontal"/> <TextView android:layout_marginTop="4dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" /> </LinearLayout> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#e8e8e8" /> <TextView android:id="@+id/fp_cancel" android:layout_width="fill_parent" android:layout_height="50dp" android:gravity="center" android:text="取消" android:textSize="17sp" /> </LinearLayout> </RelativeLayout>