效果图

底部弹窗.gif

在很多APP特别是ios系统的App中会经常看到从底部弹出而且也停留在底部位置的弹窗，这种交互设计感觉很好，所以我也想在我写的一个天气App中用上，废话少说，直接开干。

其实自定义Dialog很简单，无非就是给Dialog设置一个自定义的布局，样式以及动画等。

自定义Dialog布局

布局很简单就是两个供点击的子布局，我用了两个TextView，而父布局用了LinearLayout。

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">

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"/>

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"/>

自定义Dialog样式

样式就是用来设置Dialog的背景，形状，动画等属性

@android:color/transparent

@null

true

@null

true

true

true

@style/BottomDialogAnimation

@anim/bottom_dialog_in

@anim/bottom_dialog_exit

上述代码中都有详细的注释，就不一一解释了，另外，在上面的动画属性设置里，还需要两个自定义的动画文件

android:duration="200"

android:fromYDelta="100%"

android:toYDelta="0" />

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 实验室