您的位置:首页 > 运维架构

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

2016-10-11 13:10 1116 查看
先来大致介绍写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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐