自定义PopupWindow，带显示隐藏动画、全屏背景以及触摸屏幕空白区域消失的功能

来源：互联网发布：id软件下载中文版编辑：程序博客网时间：2024/04/19 08:54

先来大致介绍写PopupWindow的常规默认状态的几点不好的地方：

1.显示隐藏的时候都是瞬间的，没有任何过度动画。

2.无法通过点击屏幕的空白区域使其关闭。

3.无法在弹窗显示的时候，在其背后加上黑色遮罩。

用过AlertDialog的同学会发现，其实上面三个特性AlertDialog都是自带的效果或通过自带api可以轻松实现，那么我们为什么非要使用PopupWindow呢？那是因为AlertDialog的显示位置非常难调整，并且应为AlertDialog的默认背景是一个sprite9的图片（黑色遮罩），导致他的宽度无法满屏。所以我们需要使用PopupWindow来解决上述问题。

PopupWindow有两种基本的显示方式：

1.显示在某个view的正左下方

    /**     * <p>Display the content view in a popup window anchored to the bottom-left     * corner of the anchor view. If there is not enough room on screen to show     * the popup in its entirety, this method tries to find a parent scroll     * view to scroll. If no parent scroll view can be scrolled, the bottom-left     * corner of the popup is pinned at the top left corner of the anchor view.</p>     *     * @param anchor the view on which to pin the popup window     *     * @see #dismiss()     */    public void showAsDropDown(View anchor) {        showAsDropDown(anchor, 0, 0);    }

2.显示在父view的指定位置（底部，顶部等）

    /**     * <p>     * Display the content view in a popup window at the specified location. If the popup window     * cannot fit on screen, it will be clipped. See {@link android.view.WindowManager.LayoutParams}     * for more information on how gravity and the x and y parameters are related. Specifying     * a gravity of {@link android.view.Gravity#NO_GRAVITY} is similar to specifying     * <code>Gravity.LEFT | Gravity.TOP</code>.     * </p>     *      * @param parent a parent view to get the {@link android.view.View#getWindowToken()} token from     * @param gravity the gravity which controls the placement of the popup window     * @param x the popup's x location offset     * @param y the popup's y location offset     */    public void showAtLocation(View parent, int gravity, int x, int y) {        showAtLocation(parent.getWindowToken(), gravity, x, y);    }

基本概念就介绍到这，下面来看看如何具体的实现一个能满足我们需要的PopupWindow，先展示一个最终效果图:

正式开始写代码阶段

初始化PopupWindow:

    View view = LayoutInflater.from(this).inflate(R.layout.dialog_share_to, null);    //这是大小，宽度满屏，高度自适应    mSharePopupWindow = new PopupWindow(view,            LinearLayout.LayoutParams.MATCH_PARENT,            LinearLayout.LayoutParams.WRAP_CONTENT);    //设置获取焦点    mSharePopupWindow.setFocusable(true);    //设置可触摸    mSharePopupWindow.setTouchable(true);    //设置外部可以点击    mSharePopupWindow.setOutsideTouchable(true);    //设置空背景，必须加上，可以让外部点击事件被触发    mSharePopupWindow.setBackgroundDrawable(new BitmapDrawable());    //设置显示隐藏的动画    mSharePopupWindow.setAnimationStyle(R.style.popup_window_anim);    //消失的时候，恢复背景遮罩的透明度    mSharePopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {        @Override        public void onDismiss() {            modifyActivityAlpha(1);        }    });      //取消点击事件<span style="white-space:pre"></span>    view.findViewById(R.id.rl_cancel).setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {            mSharePopupWindow.dismiss();        }    });

显示PopupWindow:

    private void showShareToPopupWindow() {

        //<span style="font-family: Arial, Helvetica, sans-serif;">rl_main是我们指定的父view</span>        mSharePopupWindow.showAtLocation(findViewById(R.id.rl_main), Gravity.BOTTOM, 0, 0);        modifyActivityAlpha(0.5f);    }

修改系统背景透明度的方法:

    private void modifyActivityAlpha(float alpha) {        WindowManager.LayoutParams params = getWindow().getAttributes();        params.alpha = alpha;        getWindow().setAttributes(params);    }

styles.xml里面定义的动画样式

    <style name="popup_window_anim">        <item name="android:windowEnterAnimation">@anim/fade_in</item>        <item name="android:windowExitAnimation">@anim/fade_out</item>    </style>

fade_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <alpha        android:duration="100"        android:fromAlpha="0.0"        android:interpolator="@android:anim/decelerate_interpolator"        android:toAlpha="1.0" /></set>

fade_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <alpha        android:interpolator="@android:anim/accelerate_interpolator"        android:fromAlpha="1.0"        android:toAlpha="0.0"        android:duration="100" /></set>

最后贴下popupWindow的布局:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="#ffffff"    android:gravity="center_horizontal"    android:orientation="vertical">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="14dp"        android:text="分享到"        android:textColor="#333333"        android:textSize="15sp" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="115dp"        android:gravity="center"        android:orientation="horizontal"        android:paddingBottom="16dp"        android:paddingLeft="10dp"        android:paddingRight="10dp"        android:paddingTop="16dp">        <RelativeLayout            android:id="@+id/rl_share_transfer"            style="@style/dialog_share_to_rl">            <ImageView                android:id="@+id/iv_share_transfer"                style="@style/dialog_share_to_iv"                android:layout_above="@+id/view_center_1"                android:background="@drawable/share_transfer" />            <View                android:id="@+id/view_center_1"                android:layout_width="0dp"                android:layout_height="0dp"                android:layout_centerInParent="true" />            <TextView                style="@style/dialog_share_to_tv"                android:layout_below="@+id/view_center_1"                android:text="用户中转站" />        </RelativeLayout>        <RelativeLayout            android:id="@+id/rl_share_private"            style="@style/dialog_share_to_rl">            <ImageView                style="@style/dialog_share_to_iv"                android:layout_above="@+id/view_center_2"                android:background="@drawable/share_private" />            <View                android:id="@+id/view_center_2"                android:layout_width="0dp"                android:layout_height="0dp"                android:layout_centerInParent="true" />            <TextView                style="@style/dialog_share_to_tv"                android:layout_below="@+id/view_center_2"                android:text="秘钥分享" />        </RelativeLayout>        <RelativeLayout            android:id="@+id/rl_share_public"            style="@style/dialog_share_to_rl">            <ImageView                style="@style/dialog_share_to_iv"                android:layout_above="@+id/view_center_3"                android:background="@drawable/share_public" />            <View                android:id="@+id/view_center_3"                android:layout_width="0dp"                android:layout_height="0dp"                android:layout_centerInParent="true" />            <TextView                style="@style/dialog_share_to_tv"                android:layout_below="@+id/view_center_3"                android:text="公钥分享" />        </RelativeLayout>    </LinearLayout>    <View        android:layout_width="match_parent"        android:layout_height="10dp"        android:background="#f3f3f3"></View>    <RelativeLayout        android:id="@+id/rl_cancel"        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="@drawable/xml_btn_nothing2grey_sel"        android:clickable="true">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:text="取消"            android:textColor="#2692ee"            android:textSize="15sp" />    </RelativeLayout></LinearLayout>

0 0