Android自定义底部弹窗

效果图

底部弹窗.gif

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

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

自定义Dialog布局

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

自定义Dialog样式

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

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

第一个是从下方弹出的动画，第二个是退出的动画

自定义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 实验室