自定义PopupWindow,带显示隐藏动画、全屏背景以及触摸屏幕空白区域消失的功能
2016-10-11 13:10
1116 查看
先来大致介绍写PopupWindow的常规默认状态的几点不好的地方:
1.显示隐藏的时候都是瞬间的,没有任何过度动画。
2.无法通过点击屏幕的空白区域使其关闭。
3.无法在弹窗显示的时候,在其背后加上黑色遮罩。
用过AlertDialog的同学会发现,其实上面三个特性AlertDialog都是自带的效果或通过自带api可以轻松实现,那么我们为什么非要使用PopupWindow呢?那是因为AlertDialog的显示位置非常难调整,并且应为AlertDialog的默认背景是一个sprite9的图片(黑色遮罩),导致他的宽度无法满屏。所以我们需要使用PopupWindow来解决上述问题。
PopupWindow有两种基本的显示方式:
1.显示在某个view的正左下方
2.显示在父view的指定位置(底部,顶部等)
基本概念就介绍到这,下面来看看如何具体的实现一个能满足我们需要的PopupWindow,先展示一个最终效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/17/b860a7c1a080e727d3f0233e6b79c9b9)
正式开始写代码阶段
初始化PopupWindow:
显示PopupWindow:
修改系统背景透明度的方法:
styles.xml里面定义的动画样式
fade_in.xml
fade_out.xml
最后贴下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>
相关文章推荐
- 使用属性动画以及自定义view实现图片的显示与隐藏
- 关于安卓alertdialog你能用到的都在这里了(进出动画,显示位置,背景,设置内容,是否可以点击其他地方消失,屏幕不变暗)
- 使用属性动画以及自定义view实现图片的显示与隐藏
- PopupWindow全屏显示以及适配不同手机屏幕之 应用实例 更换头像,拍照,相册选取附带动画效果
- 自定义Dialog设置全屏显示和背景透明
- Android popupwindow 失去焦点或者点击空白区域时消失的解决方法
- canvas基础动画-循环从屏幕下方出现-上方消失(可切换速度,字号,单色,彩色,显示用户输入内容)
- 字符串按指定字节数截取、隐藏与显示输入软键盘、收起状态栏以及判断服务是否运行功能代码段
- 单击屏幕上空白区域的时候输入法键盘消失
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——修改
- popupwindow 显示和消失的动画
- visjs关系图-双击折叠展开子节点(隐藏显示子节点)以及位置自定义
- Android百度地图开发—定位显示以及自定义缩放功能(三)
- PopupWindow 动画显示与消失(逐惭缩放、逐惭透明)
- 切换控制器后,如何 隐藏/显示自定义tabBar,并添加隐藏/显示tabBar动画
- android 设置 全屏显示 以及 设置屏幕横屏显示
- 如何实现用户触摸屏幕就隐藏弹出的键盘功能
- 以lable实现的checkBox如何切换背景和显示隐藏关联区域
- 自定义 Dialog 显示隐藏动画
- Android 动画效果弹出PopupWindow,同时屏幕背景变暗