Android实现横向无限循环滚动的单行弹幕效果

data class Danmu(
    //头像
    var headerUrl: String? = null,
    //昵称
    var userName: String? = null,
    //信息
    var info: String? = null,
)

class DanmuItemView @JVMOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : LinearLayoutCompat(context, attrs, defStyleAttr) {

    private var danmuItemView: TextView? = null
    var danmu: Danmu? = null

    init {
        LayoutInflater.from(context).inflate(R.layout.danmu_item, this, true)
        danmuItemView = findViewById(R.id.tvDanmuItem)
    }

    fun setDanmuEntity(danmu: Danmu) {
        this.danmu = danmu
        danmuItemView?.text = "我是一个弹幕~~~~~哈哈哈哈哈哈" + danmu.userName
        measure(0, 0)
    }
}

class DanmuView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {

    private var mWidth = 0

    //为展示在屏幕上的弹幕数据
    private val mDanMuList = LinkedList<Danmu>()

    //屏幕中展示的弹幕数据
    private val mVisibleDanMuList = LinkedList<Danmu>()

    //判断是否在运行
    private val mIsRunning = AtomicBoolean(false)

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        mWidth = measuredWidth
    }

    
    fun enqueueDanMuList(danMuList: ArrayList<Danmu>) {
        danMuList.forEach {
            if (this.mDanMuList.contains(it).not()) {
                this.mDanMuList.add(it)
            }
        }
        if (mWidth == 0) {
            viewTreeObserver.addOnGlobalLayoutListener(object :
                ViewTreeObserver.OnGlobalLayoutListener {
                override fun onGlobalLayout() {
                    mWidth = measuredWidth
                    viewTreeObserver.removeOnGlobalLayoutListener(this)

                    if (mIsRunning.get().not()) {
                        mDanMuList.poll()?.apply {
                        //这里是用来处理布局的交替工作，前面分析有说明
                            mVisibleDanMuList.add(this)
                            createDanMuItemView(this)
                        }
                    }
                }
            })
        } else {
            if (mIsRunning.get().not()) {
                mDanMuList.poll()?.apply {
                //这里是用来处理布局的交替工作，前面分析有说明
                    mVisibleDanMuList.add(this)
                    createDanMuItemView(this)
                }
            }
        }
    }

    private fun startDanMuAnimate(danMuItemView: DanmuItemView) {
        var isInit = false
        danMuItemView.animate()
        //注意这边设置的便宜量是容器布局的宽度+弹幕item布局的宽度，这样就确保滚动值刚好是从屏幕右侧外到屏幕左侧外
            .translationXBy((-(mWidth + danMuItemView.measuredWidth)).toFloat())
            .setDuration(6000)
            .setInterpolator(LinearInterpolator())
            .setUpdateListener {

                val danMuTranslateX =
                    (mWidth + danMuItemView.measuredWidth) * (it.animatedValue as Float)
                    //这里是关键，用来确保每个item布局的间距一致，判断如果滚动进入屏幕的距离刚好是自身+20dp，也就是刚好空出来了20dp之后，紧接着下一个弹幕布局开始添加并动起来。
                if (danMuTranslateX >= danMuItemView.measuredWidth + Utils.convertDpToPixel(20F) && isInit.not()) {
                    isInit = true
                    mDanMuList.poll()?.apply {
                        mVisibleDanMuList.add(this)
                        createDanMuItemView(this)
                    }
                }
            }
            .setListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator?) {
                    if (mIsRunning.get().not()) {
                        mIsRunning.set(true)
                    }
                    //很重要，在动画结束，也就是布局从屏幕移除之后，切记从布局中移除掉，
                    //并且进行一波数据交替，方便实现无线循环
                    danMuItemView.danmu?.let {
                        mVisibleDanMuList.remove(it)
                        mDanMuList.add(it)
                    }
                    removeView(danMuItemView)
                }
            }).start()
    }

    private fun createDanMuItemView(danMu: Danmu) {
        val danMuItemView = DanmuItemView(context).apply {
            setDanmuEntity(danMu)
        }
        //这里将布局添加之后，默认便宜到屏幕右侧出屏幕，造成布局总是从右👉移动到👈左的效果。
        val param = LayoutParams(danMuItemView.measuredWidth, danMuItemView.measuredHeight)
        param.gravity = Gravity.CENTER_VERTICAL
        param.leftMargin = mWidth
        startDanMuAnimate(danMuItemView)
        addView(danMuItemView, param)
    }
}