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地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容