效果图
底部弹窗.gif
在很多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 实验室
