Android 使用DialogFragment一步一步实现仿IOS底部弹窗(Demo含源码)

国际惯例 先看效果：

底部弹窗Demo运行效果

效果图

不想听我叨逼叨的同学可直接下载Demo:git地址

DialogFragment碎碎念:

DialogFragment是一种特殊的Fragment，它和Fragment有着基本一致的生命周期，既然是基于Fragment自然就遗传了Fragment一些特性，例如当手机状态发生变化时(大小屏幕，横竖屏切换，按下back键)，系统会自动接管它的状态，根据不同的场景展示不同的效果，Google也推荐使用DialogFragment代替Dialog。本功能就使用DialogFragment实现，分享实现过程，希望给大家一个侧面的参考。。

和Fragment一样，我们需要一个类去继承DialogFragment类，然后重写onCreateView方法去填充对话框布局

填充布局

“fragment_dialog” 布局如下：

布局一

布局二

摆放效果

可以看到我们最外层使用LinearLayout整体包裹，对话框内容区域使用LinearLayout对内容区域整体包裹，为方便演示，内容区域使用了两个TextView，当然你也可以使用RecyclerView/ListView控件等等。。最后的取消按钮和内容区域(LinearLayout)下边界有一个marginTop值。

在Activity的onCreate方法中初始化对话框，运行项目，显示出的效果是这样子的：

运行效果展示

可以看到，对话框有一层背景颜色，我们想让这个对话框的背景是透明，而且要居底部出现。而且还有一点就是对话框宽度比起实际效果还是要小很多，对话框的左右离屏幕左右两边的缝隙太大，尽管我们已经在布局当中将宽度设置成了"match_parent",但根据实际运行效果来看好像并没有起什么作用。ok，这块先不多说，带着疑问，我们先把窗体样式整改一下。

初始化窗体样式

如图，首先我们拿到获取外层window通过window获取最外层DecorView，给DecorView的背景设置为"TRANSPARENT"透明，这块没什么好说的。那么回到刚刚那个疑问，为什么我们在自定义布局当中设置的match_parent实际运行看起来并没有什么效果呢？了解view的绘制流程的同学想必都知道view外层其实是window来管理,如果window的宽度没有设置成最大，那view设置再宽都不可能有效果。一番设置之后，此时运行的效果：

初始化弹窗样式之后的运行效果图

这里要打个岔:

我们虽然把view和window的宽度设置到了最大，但实际效果看来依然还是没有完全“填充父窗体”，究竟是怎么回事呢？我们回顾一下Android的布局层次，我们的页面(view)一般都是依附在窗体(window)之上的，DecorView是窗口最顶层的视图，是所有应用窗体的根view(在Android FrameWorks中，与窗口视图处理相关的类，主要是Window及其实现类PhoneWindow，DecorView其实是PhoneWindow中的一个内部类，本质上也是一个View)。这块我们就不详细展开讲了，但是我们细想一下，自定义view，window我们都设置了最大宽度，那是不是DecorView也有宽度或者是内边距啥的我们没有设置，才导致窗体宽度没有完全占满？ok，为了验证猜想，我们试着在Google官方的文档中找一下解释:

谷歌文档

果然，刚才我们讲到，DecorView本质上也是一个View，既然是View那就肯定有background，我们看下文档的解释，文档中提到:"如果删除背景，不会影响到视图的填充"，这句话可以理解成:DecorView背景是有填充的或者说是我们可以给它设置填充，还说可以使用setPadding来设置填充，那好我们就设置一下：

设置填充

参数就不解释了，迫不及待运行一下：

填充效果

as expected~，当然也可以给window设置成背景透明，这样我们就不用去设置DecorView的内边距了，一样可以占满屏幕，但鄙以为DecorView作为窗体的根View，使用起来要更加灵活~ 。当然，我们的需求效果不需要占满宽度。。

布局摆放好了，我们要实现窗体弹入屏幕(显示)和弹出屏幕(隐藏/销毁)的效果，那就很简单了，平滑动画完全可以搞定：

窗体弹入屏幕

窗体弹出屏幕

这些参数就不多说了吧，弹出屏幕的动画执行完之后，更改过滤标记，销毁弹窗(嫌代码冗余的同学可以把动画逻辑抽取一下)。至此，大致功能已经基本完成，但是还不够，我们还需要对一些影响“用户体验”的一些小细节进行优化。

细节处理:

DialogFragment有一个方法叫:setCancelable()，我们看官方对它的解释：

文档

可以看到，默认为“可取消”，那么问题来了，如果弹窗取消直接走框架效果，那我们的“弹窗弹出屏幕的”的平滑动画就不会执行，这样程序效果就显得不优雅...  所以我们要对这些细节做一些处理。弹窗显示后，如果想触发弹窗消失无非是两种事件，一种是手指触摸弹窗外区域，一种是直接点击了back/悬浮手势键。

手指触摸弹窗外区域，弹窗消失：

手势过滤

拦截手势之后，让弹窗消失操作执行我们自己的方法

点击back键(悬浮手势按钮)，弹窗消失：

拦截回退操作

两种事件拦截处理完之后，弹窗消失就能走我们自己的平滑退出动画效果了。

我们的弹窗的内容区域可能要和Activity进行通信交互，这时可以写一个通信接口，通过接口回调的方式进行交互:

DialogFragment中定义接口

在需要和Activity交互的地方直接执行回调:

在需要和Activity页面交互的地方直接执行回调方法

Activity中实现接口里的回调方法

最后的最后，一个小细节，在Activity退出/销毁时要检查一下DialogFragment是否退出:

确保对话框关闭,避免内存泄漏

总体实现步骤基本就是这样，不是太难，但小细节还是蛮多的，实现方式绝不局限于一种， Popupwindow，Dialog，AlterDialog都能实现该效果，尤其是Android6.0的新控件：BottomSheetDialog 快速又方便，虽不提倡重复造轮子但还是想把实现过程分享出来让大家一起探讨交流一下，不足之处恳请大神指导斧正。

跪献Demo地址：Demo地址