Android自定义底部弹窗
2017-04-17 23:04
316 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。
![](http://img.blog.csdn.net/20170417224011748?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVE1BQ0FEQUk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
在很多APP特别是ios系统的App中会经常看到从底部弹出而且也停留在底部位置的弹窗,这种交互设计感觉很好,所以我也想在我写的一个天气App中用上,废话少说,直接开干。
其实自定义Dialog很简单,无非就是给Dialog设置一个自定义的布局,样式以及动画等。
上述代码中都有详细的注释,就不一一解释了,另外,在上面的动画属性设置里,还需要两个自定义的动画文件
第一个是从下方弹出的动画,第二个是退出的动画
new 一个Dialog的实例myDialog,传入context和上面定义的样式;
加载自定义的布局,初始化布局的控件,为两个TextView设置点击事件;
将布局设置给Dialog的实例myDialog;
获取当前dialog所在的窗体,为myDialog设置位置属性,以及宽和高;
显示对话框;
利用上面的代码就会出现效果图所展示的效果,代码中大部分给了详细的注释,不过重点要提一下,也是当时最困惑我的地方,就是设置dialog 的宽度。
我在自定义的布局中,把父布局和子控件的layout_width都设置成match_parent时,运行后的效果总是wrap_content的效果,然后我又尝试了其他的设置组合,包括设置特定的dp值,但最后的效果要么是占满屏幕的宽度,要么是wrap_content的效果,感觉这个布局文件控制不了自定义dialog 的大小,不知道这是不是一个小bug,或者是本来就不应该用布局文件去控制,如果有人知道能告诉我的话,小弟感激不敬。
所以到后来我看了别人的代码之后,发现都是在自定义dialog时用window来控制的,所以就有了上述代码中设置dialog所在的窗体的width属性。
今天的就写到这吧,后续有时间还会就自定义弹窗写一些文章。
2017.4.18 23:40
806 实验室
效果图
在很多APP特别是ios系统的App中会经常看到从底部弹出而且也停留在底部位置的弹窗,这种交互设计感觉很好,所以我也想在我写的一个天气App中用上,废话少说,直接开干。
其实自定义Dialog很简单,无非就是给Dialog设置一个自定义的布局,样式以及动画等。
自定义Dialog布局
布局很简单就是两个供点击的子布局,我用了两个TextView,而父布局用了LinearLayout。<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:divider="@drawable/setting_divider" android:showDividers="middle" android:background="@drawable/area_dialog_bg" android:gravity="center"> <TextView android:id="@+id/from_album_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:layout_gravity="center" android:gravity="center" android:text="从相册选择" android:textSize="20sp" android:textColor="@color/colorPrimary"/> <TextView android:id="@+id/from_system_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:layout_gravity="center" android:gravity="center" android:text="系统图片" android:textSize="20sp" android:textColor="@color/colorPrimary"/> </LinearLayout>
自定义Dialog样式
样式就是用来设置Dialog的背景,形状,动画等属性<style name="BottomDialogStyle" parent="@android:style/Theme.Dialog"> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:windowContentOverlay">@null</item> <!-- 浮于Activity之上 --> <item name="android:windowIsFloating">true</item> <!-- 边框 --> <item name="android:windowFrame">@null</item> <!-- Dialog以外的区域模糊效果 --> <item name="android:backgroundDimEnabled">true</item> <!-- 无标题 --> <item name="android:windowNoTitle">true</item> <!-- 半透明 --> <item name="android:windowIsTranslucent">true</item> <!-- Dialog进入及退出动画 --> <item name="android:windowAnimationStyle">@style/BottomDialogAnimation</item></style> <!-- ActionSheet进出动画 --> <style name="BottomDialogAnimation" parent="@android:style/Animation.Dialog"> <item name="android:windowEnterAnimation">@anim/bottom_dialog_in</item> <item name="android:windowExitAnimation">@anim/bottom_dialog_exit</item></style>
上述代码中都有详细的注释,就不一一解释了,另外,在上面的动画属性设置里,还需要两个自定义的动画文件
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="200" android:fromYDelta="100%" android:toYDelta="0" />
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="200" android:fromYDelta="0" android:toYDelta="100%" />
第一个是从下方弹出的动画,第二个是退出的动画
自定义Dialog
完成了布局、样式之后,就可以开始自定义一个Dialog了,步骤其实也很简单new 一个Dialog的实例myDialog,传入context和上面定义的样式;
加载自定义的布局,初始化布局的控件,为两个TextView设置点击事件;
将布局设置给Dialog的实例myDialog;
获取当前dialog所在的窗体,为myDialog设置位置属性,以及宽和高;
显示对话框;
bgSetDialog = new Dialog(mContext, R.style.BottomDialogStyle); //填充对话框的布局 View view = LayoutInflater.from(mContext).inflate(R.layout.bg_set_dialog, null); //初始化控件 TextView fromAlbum = (TextView) view.findViewById(R.id.from_album_text); TextView fromSystem = (TextView) view.findViewById(R.id.from_system_text); fromAlbum.setOnClickListener(SettingActivity.this); fromSystem.setOnClickListener(this); //将布局设置给Dialog bgSetDialog.setContentView(view); //获取当前Activity所在的窗体 Window dialogWindow = bgSetDialog.getWindow(); //设置Dialog从窗体底部弹出 dialogWindow.setGravity( Gravity.BOTTOM); //获得窗体的属性 WindowManager.LayoutParams lp = dialogWindow.getAttributes(); lp.width = (int) (getScreenWidth()*0.95); lp.y = 20; //设置Dialog距离底部的距离 dialogWindow.setAttributes(lp); //将属性设置给窗体 bgSetDialog.show();//显示对话框
利用上面的代码就会出现效果图所展示的效果,代码中大部分给了详细的注释,不过重点要提一下,也是当时最困惑我的地方,就是设置dialog 的宽度。
我在自定义的布局中,把父布局和子控件的layout_width都设置成match_parent时,运行后的效果总是wrap_content的效果,然后我又尝试了其他的设置组合,包括设置特定的dp值,但最后的效果要么是占满屏幕的宽度,要么是wrap_content的效果,感觉这个布局文件控制不了自定义dialog 的大小,不知道这是不是一个小bug,或者是本来就不应该用布局文件去控制,如果有人知道能告诉我的话,小弟感激不敬。
所以到后来我看了别人的代码之后,发现都是在自定义dialog时用window来控制的,所以就有了上述代码中设置dialog所在的窗体的width属性。
今天的就写到这吧,后续有时间还会就自定义弹窗写一些文章。
2017.4.18 23:40
806 实验室
相关文章推荐
- Android模拟IOS风格的自定义Dialog底部弹窗案例
- [置顶] Android:PopWindow — 对Android的底部弹窗、顶部弹窗菜单及自定义界面的使用封装
- Android自定义底部弹窗(仿小米)
- Android 自定义底部弹窗
- 【Android】自定义标题栏,底部栏
- Android自定义底部带有动画的Dialog
- android实现弹窗和自定义弹窗
- android 自定义弹出框被系统底部虚拟键盘挡住、Pad上点击空白区域弹出框不dismiss BUG解决
- Android Gallery用法(自定义边框+底部小圆点)
- Android实现底部支付弹窗效果
- Android开发丶一个仿IOS的底部弹窗
- 【Android】带底部指示的自定义ViewPager控件
- android 使用TabLayout 自定义View布局作为底部菜单栏
- Android 上拉加载的可以自定义底部的解决方式(2)
- Android底部弹窗的正确打开方式
- Android基础控件——PopupWindow模仿ios底部弹窗
- Android自定义弹窗——右上角悬浮关闭
- Android 自定义弹窗
- Android使用BottomSheetBehavior 和 BottomSheetDialog实现底部弹窗
- Android笔记__PopupWindow底部弹出自定义菜单