抖音幾乎能夠說是目前最火的閒暇時間的消遣軟件,它的視頻播放界面有一個評論列表界面,列表是從下至上滑動出現,並覆蓋在視頻的上層。點擊輸入框又會彈出第二層彈窗覆蓋在評論列表上面。git
我錄了一段動圖來看看:github
你能不能看出抖音的效果有哪些不足呢?markdown
這個界面有兩層彈窗,一層是評論列表,一層是輸入框。能夠看到抖音的輸入框彈窗顯示的時候是瞬間出現,沒有動畫;消失的時候也是瞬間消失,這樣給用戶一種頓挫感,界面的切換不夠絲滑流暢。ide
下面看看我用50行代碼實現的總體效果,可能還不到50行代碼:oop
這個效果涉及到動畫,手勢拖拽,嵌套滾動,陰影漸變,輸入法交互等技能,要想處理都優雅流暢美觀,對Android的技能要求並不低的。佈局
這裏咱們使用XPopup類庫來實現,XPopup是一個彈窗庫,多是Android平臺最好用的彈窗庫。動畫
咱們使用XPopup的Bottom彈窗來實現評論列表彈窗,並給彈窗設置一些虛擬數據。ui
所有的代碼以下,佈局的點就不貼了:this
//評論列表彈窗 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() } } 複製代碼
顯示評論列表彈窗:spa
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,請試着用用它,來讓它變得更好。 對了,它的地址在這裏:
若是用了以後以爲不錯,請推薦給你的朋友和同事。好東西要分享,不能吃獨食啊!嘿嘿。。。