藉助XPopup，用50行程式碼實現更好的抖音評論彈窗效果！

dance發表於2019-06-13
行程

前言

抖音幾乎可以說是目前最火的閒暇時間的消遣軟體，它的視訊播放介面有一個評論列表介面，列表是從下至上滑動出現，並覆蓋在視訊的上層。點選輸入框又會彈出第二層彈窗覆蓋在評論列表上面。

我錄了一段動圖來看看：

藉助XPopup，用50行程式碼實現更好的抖音評論彈窗效果！

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

抖音的不足

這個介面有兩層彈窗，一層是評論列表，一層是輸入框。可以看到抖音的輸入框彈窗顯示的時候是瞬間出現，沒有動畫；消失的時候也是瞬間消失，這樣給使用者一種頓挫感，介面的切換不夠絲滑流暢。

下面看看我用50行程式碼實現的整體效果，可能還不到50行程式碼：

藉助XPopup，用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()
複製程式碼

此時你會得到這樣的一個效果：

藉助XPopup，用50行程式碼實現更好的抖音評論彈窗效果！

輸入框彈窗

第二層的彈窗是輸入框彈窗，根據效果也需要用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()
}
複製程式碼

通過上面幾行程式碼你會得到這樣的效果：

藉助XPopup，用50行程式碼實現更好的抖音評論彈窗效果！

結束了，全部的程式碼僅僅這麼多！！！而且彈窗天然和當前介面解耦分離，你可以把它用在任意介面。

結尾

Ok，這個效果只是展示了XPopup的一部分很小的功能而已，它還有很強的功能。從目前來看，我可以自信的說，XPopup可以滿足你專案中幾乎所有彈窗需求和效果，它在設計的時候就以實用為原則，併兼顧了美觀，流暢和自然。

當然它還有一些未發現的Bug，請試著用用它，來讓它變得更好。 對了，它的地址在這裡：

github.com/li-xiaojun/…

如果用了之後覺得不錯，請推薦給你的朋友和同事。好東西要分享，不能吃獨食啊！嘿嘿。。。

相關文章