借助XPopup,用50行代码实现更好的抖音评论弹窗效果!

6,648 阅读3分钟

前言

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

我录了一段动图来看看:

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

抖音的不足

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

下面看看我用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<String>()
            (0..100).forEach { list.add("身材不错啊,美女哪里的人啊~~") }
            recyclerView.vertical()
                .bindData(list, R.layout.item_comment, bindFn = { holder, t, position ->
                    holder.getView<TextView>(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/…

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