用XPopup框架，50行代码搞定抖音式炫酷评论弹窗

2024-01-19 19:40:44

引言

抖音作为当下风靡的短视频平台，其评论弹窗以炫酷的交互体验和流畅的动画效果著称。本文将以XPopup框架为基础，带领大家用不到50行代码实现类似抖音的评论弹窗，让你轻松打造高交互性的APP界面。

XPopup框架简介

XPopup是一个功能强大的Android弹窗框架，它提供了丰富的弹窗类型和高度的定制性，可以轻松创建各种炫酷的弹窗效果。

实现抖音式评论弹窗

要实现抖音式的评论弹窗，我们首先需要创建评论列表弹窗。

// 创建评论列表弹窗
val commentListPopup = XPopup.Builder(this)
    .asCustom(CommentListPopup(this))
    .show()

接下来，我们需要创建输入框弹窗并设置其依附于评论列表弹窗。

// 创建输入框弹窗
val inputPopup = XPopup.Builder(this)
    .asInputConfirm("评论", null)
    .moveUpToKeyboard(false) // 不跟随键盘移动
    .bindLayout(R.layout.layout_input_popup) // 设置自定义布局
    .show()

// 设置依附于评论列表弹窗
inputPopup.popupImpl.popupContentView.layoutParams = XPopupUtils.createLayoutParams(
    LayoutParams.MATCH_PARENT,
    LayoutParams.MATCH_PARENT,
    true
).apply {
    addRule(BELOW, commentListPopup.popupImpl.popupContentView.id)
}

在自定义布局中，我们还需要处理输入框的发送按钮事件。

// 发送按钮点击事件
binding.btnSend.setOnClickListener {
    // 获取输入框内容并处理发送逻辑
    val content = binding.etInput.text.toString()
    // ... 发送评论逻辑

    // 关闭输入框弹窗
    inputPopup.dismiss()
}

自定义弹窗效果

为了让弹窗更贴近抖音的效果，我们可以对XPopup框架提供的默认效果进行一些自定义。

// 设置评论列表弹窗动画
commentListPopup.popupImpl.animationDuration = 300 // 设置动画时长
commentListPopup.popupImpl.offsetX = 0f // 设置水平偏移量
commentListPopup.popupImpl.offsetY = 0f // 设置垂直偏移量

// 设置输入框弹窗动画
inputPopup.popupImpl.animationDuration = 200 // 设置动画时长
inputPopup.popupImpl.offsetY = 100f // 设置垂直偏移量

代码示例

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<View>(R.id.btnShowPopup).setOnClickListener {
            // 创建评论列表弹窗
            val commentListPopup = XPopup.Builder(this)
                .asCustom(CommentListPopup(this))
                .show()

            // 创建输入框弹窗并设置其依附于评论列表弹窗
            val inputPopup = XPopup.Builder(this)
                .asInputConfirm("评论", null)
                .moveUpToKeyboard(false) // 不跟随键盘移动
                .bindLayout(R.layout.layout_input_popup) // 设置自定义布局
                .show()

            // 设置依附于评论列表弹窗
            inputPopup.popupImpl.popupContentView.layoutParams = XPopupUtils.createLayoutParams(
                LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT,
                true
            ).apply {
                addRule(BELOW, commentListPopup.popupImpl.popupContentView.id)
            }

            // 自定义弹窗效果
            commentListPopup.popupImpl.animationDuration = 300 // 设置动画时长
            commentListPopup.popupImpl.offsetX = 0f // 设置水平偏移量
            commentListPopup.popupImpl.offsetY = 0f // 设置垂直偏移量

            inputPopup.popupImpl.animationDuration = 200 // 设置动画时长
            inputPopup.popupImpl.offsetY = 100f // 设置垂直偏移量

            // 发送按钮点击事件
            binding.btnSend.setOnClickListener {
                // 获取输入框内容并处理发送逻辑
                val content = binding.etInput.text.toString()
                // ... 发送评论逻辑

                // 关闭输入框弹窗
                inputPopup.dismiss()
            }
        }
    }
}