Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow

这是一张QQ空间说说详情的截图。

分析:

1、点击右上角三个点的图标,在界面底部弹出一个区域,这个区域有一些按钮提供给我们操作
2、当该区域出现的时候,详情界面便灰了,也说成透明度变化了
3、当任意选了一个按钮或者点击了该区域以外的部分,该区域消失,灰色界面变回亮白色,并执行点击的按钮对应的操作

显然,这个功能我们需要用PopupWindow实现更好~

--------------------------------------------------------------------------------------

下面通过一个Demo来实现这个需求~~

效果图:

Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow

首先还是布局文件:

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>
popupwindow

相关文章: