layui弹窗设置滚动_借助XPopup，用50行代码实现更好的抖音评论弹窗效果

前言

抖音几乎可以说是目前最火的闲暇时间的消遣软件，它的视频播放界面有一个评论列表界面，列表是从下至上滑动出现，并覆盖在视频的上层。点击输入框又会弹出第二层弹窗覆盖在评论列表上面。

我录了一段动图来看看：

你能不能看出抖音的效果有哪些不足呢？

抖音的不足

这个界面有两层弹窗，一层是评论列表，一层是输入框。可以看到抖音的输入框弹窗显示的时候是瞬间出现，没有动画；消失的时候也是瞬间消失，这样给用户一种顿挫感，界面的切换不够丝滑流畅。

下面看看我用50行代码实现的整体效果，可能还不到50行代码：

这个效果涉及到动画，手势拖拽，嵌套滚动，阴影渐变，输入法交互等技能，要想处理都优雅流畅美观，对Android的技能要求并不低的。

这里我们使用XPopup类库来实现，XPopup是一个弹窗库，可能是Android平台最好用的弹窗库。

评论列表弹窗

我们使用XPopup的Bottom弹窗来实现评论列表弹窗，并给弹窗设置一些虚拟数据。

全部的代码如下，布局的点就不贴了：

//评论列表弹窗class CommentPopup(context: Context) : BottomPopupView(context) { override fun getImplLayoutId(): Int { return R.layout.popup_comment } override fun onCreate() { super.onCreate() val list = mutableListOf() (0..100).forEach { list.add("身材不错啊，美女哪里的人啊~~") } recyclerView.vertical() .bindData(list, R.layout.item_comment, bindFn = { holder, t, position -> holder.getView(R.id.content).text = t }) btnComment.click { //弹出输入的弹窗 } } override fun getMaxHeight(): Int { return (XPopupUtils.getWindowHeight(context) * .7f).toInt() } }

显示评论列表弹窗：

XPopup.Builder(this) .hasShadowBg(false) //不要半透明阴影背景 .moveUpToKeyboard(false) //不移动到输入法上面 .asCustom(CommentPopup(this)).show()

此时你会得到这样的一个效果：

输入框弹窗

第二层的弹窗是输入框弹窗，根据效果也需要用Bottom弹窗来实现。

全部的代码如下：

class EditCommentPopup(context: Context) : BottomPopupView(context) { override fun getImplLayoutId(): Int { return R.layout.popup_comment_edit //布局 } override fun onCreate() { super.onCreate() btnSend.click {dismiss()} } fun getComment() = etContent.text }

显示输入框弹窗：

btnComment.click { //弹出输入评论的弹窗 val editPopup = EditCommentPopup(context) XPopup.Builder(context) .setPopupCallback(object : SimpleCallback(){ override fun onDismiss() { list.add(0, editPopup.getComment().toString()) recyclerView.adapter?.notifyDataSetChanged() } }) .asCustom(editPopup).show()}

通过上面几行代码你会得到这样的效果：

结束了，全部的代码仅仅这么多！！！而且弹窗天然和当前界面解耦分离，你可以把它用在任意界面。

结尾

Ok，这个效果只是展示了XPopup的一部分很小的功能而已，它还有很强的功能。从目前来看，我可以自信的说，XPopup可以满足你项目中几乎所有弹窗需求和效果，它在设计的时候就以实用为原则，并兼顾了美观，流畅和自然。

当然它还有一些未发现的Bug，请试着用用它，来让它变得更好。 对了，它的地址在这里：

github.com/li-xiaojun/…

如果用了之后觉得不错，请推荐给你的朋友和同事。好东西要分享，不能吃独食啊！嘿嘿。。。

黄金五年已过，那些30几岁的程序员都去哪了？

程序员985、211失业潮：“你的毕业证，就是一张废纸”