preface

Tiktok, arguably the most popular app for leisure time, has a comment list that slides from bottom to top and covers the top of the video. Clicking on the input box brings up a second pop-up over the list of comments.

I recorded a GIF to check it out:

Can you see any shortcomings in the effect of Douyin?

The deficiency of Douyin

The interface has two layers of popovers, a comment list and an input field. It can be seen that the popup window of the input box of Douyin appears instantaneously without animation; Disappear is also instant disappear, so give the user a sense of frustration, the interface switch is not silky smooth.

Here’s what I achieved with 50 lines of code, probably less than that:

This effect involves animation, gesture drag, nested scroll, shadow gradient, input method interaction and other skills, to handle the elegant smooth beautiful, Android skill requirements are not low.

We use the XPopup class library to do this, XPopup is a popover library, probably the most useful popover library on the Android platform.

The comment list pops up

We use XPopup’s Bottom popover to implement the comment list popover and set up the popover with some dummy data.

The entire code is as follows, and the layout points are not posted:

// Comments list popup
class CommentPopup(context: Context) : BottomPopupView(context) {
        override fun getImplLayoutId(a): Int {
            return R.layout.popup_comment
        }
        override fun onCreate(a) {
            super.onCreate()
            val list = mutableListOf<String>()
            (0.100.).forEach { list.add("Nice figure, where the beauty of the people ~~") }
            recyclerView.vertical()
                .bindData(list, R.layout.item_comment, bindFn = { holder, t, position ->
                    holder.getView<TextView>(R.id.content).text = t
                })

            btnComment.click {
                // Pop up the input popup}}override fun getMaxHeight(a): Int {
            return (XPopupUtils.getWindowHeight(context) * 7.f).toInt()
        }
    }
Copy the code

Display comment list popup:

XPopup.Builder(this)
    .hasShadowBg(false) // Do not have translucent shaded backgrounds
    .moveUpToKeyboard(false) // Do not move to the input method
    .asCustom(CommentPopup(this)).show()
Copy the code

You should get something like this:

Input box popup

The second layer of popover is the input box popover, depending on the effect also need to use the Bottom popover to achieve.

The full code is as follows:

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

Display input popup:

btnComment.click {
    // Enter a comment popup
    val editPopup = EditCommentPopup(context)
    XPopup.Builder(context)
        .setPopupCallback(object : SimpleCallback(){
            override fun onDismiss(a) {
                list.add(0, editPopup.getComment().toString()) recyclerView.adapter? .notifyDataSetChanged() } }) .asCustom(editPopup).show() }Copy the code

With the above lines you get something like this:

It’s over, there’s only so much code!! And popovers are naturally decoupled from the current interface, so you can use them on any interface.

At the end

Ok, this effect only shows a small part of XPopup’s functionality, but it has a lot more functionality. From now on, I can confidently say that XPopup can meet almost all popover needs and effects in your project. It is designed with pragmatism as the principle, and gives consideration to beauty, smoothness and naturalness.

Of course it has some undiscovered bugs, please try to use it to make it better. By the way, its address is here:

Github.com/li-xiaojun/…

If you like it, please recommend it to your friends and colleagues. Good things to share, not eat alone ah! Heh heh…