BottomSheetDialog仿抖音评论区的UI效果

大家好！我国著名数学家华罗庚曾说：聪明在于勤奋，天才出于积累。

一、问题背景

        当下抖音成为了人们平常生活消遣娱乐必不可少的视频软件，它评论区的UI具有良好的用户交互性，其动画效果非常人性化，滑动出现的UI效果让人着迷。最近也在开发一款类似的App，需要完成类似抖音评论区一样的滑动效果。在下查阅了大量的资料，发现PopupWindow虽然也能完成开发需求，但是其代码量远远不如BottomSheetDialog来得这样简洁、优雅。这一篇文章就向大家分享使用BottomSheetDialog制作底部滑动弹窗的步骤。

二、成果展示

        使用BottomSheetDialog完成小案例，它的显示效果如下动图所示：

 因为Genymotion无法展示鼠标的轨迹，所以现在把操作记录如下：点击Show BottomSheetDialog手机屏幕的底部就弹出BottomSheetDialog，点击阴影处，BottomSheetDialog以动画的形式向下折叠消失，第二次点击Show BottomSheetDialog，手指缓慢向下滑动BottomSheetDialog直至其完全消失。

三、使用BottomSheetDialog的步骤

        首先，创建BottomSheetDialog的布局，待会儿用来显示其布局于屏幕之上。其布局文件名为dialog_bottom_sheet，具体XML代码如下所示：