简介：本文深入剖析 Android 自定义 View 中的文字跑马灯效果实现原理，从系统原生实现到自定义扩展方案，提供代码示例与性能优化建议。

重学 Android 自定义 View 系列(十一)：文字跑马灯剖析

一、文字跑马灯的典型应用场景

文字跑马灯（Marquee）是移动端常见的交互效果，广泛应用于新闻标题展示、股票代码滚动、广告横幅等场景。其核心价值在于：

空间高效利用：在有限宽度内展示超长文本
动态信息提示：通过运动吸引用户注意力
多语言适配：解决不同语言文本长度差异问题

系统原生 TextView 的 ellipsize="marquee" 属性虽能实现基础效果，但存在动画生硬、控制能力弱等缺陷。自定义实现可突破这些限制，实现更灵活的控制。

二、系统原生实现原理分析

1. TextView 的 Marquee 属性

<TextView
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:marqueeRepeatLimit="marquee_forever"
    android:singleLine="true"
    android:text="这是一段需要跑马灯效果的长文本" />

关键属性说明：

singleLine="true"：强制单行显示（API 16+ 推荐使用 maxLines="1"）
marqueeRepeatLimit：控制滚动次数（marquee_forever 表示无限循环）
焦点控制：必须获取焦点才能触发动画

2. 内部工作机制

系统通过 Marquee 类实现动画，核心流程：

测量文本宽度与视图宽度差值
计算滚动距离（scrollX）
通过 Choreographer 注册帧回调
每帧更新 scrollX 实现平滑移动

局限性分析：

无法自定义滚动速度
难以控制动画启停时机
多视图同步困难
不支持垂直滚动

三、自定义跑马灯实现方案

方案一：基于 View 的自定义实现

class MarqueeTextView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatTextView(context, attrs, defStyleAttr) {
    private var scrollX = 0f
    private val scrollSpeed = 2f // 像素/帧
    private var isRunning = false
    private var textWidth = 0f
    private var viewWidth = 0f
    init {
        isSingleLine = true
        ellipsize = null
    }
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        textWidth = paint.measureText(text.toString())
        viewWidth = measuredWidth.toFloat()
    }
    override fun onDraw(canvas: Canvas) {
        if (textWidth > viewWidth && isRunning) {
            scrollX -= scrollSpeed
            if (abs(scrollX) > textWidth) {
                scrollX = viewWidth
            }
            canvas.save()
            canvas.translate(scrollX, 0f)
            super.onDraw(canvas)
            canvas.restore()
            invalidate()
        } else {
            super.onDraw(canvas)
        }
    }
    fun startMarquee() {
        isRunning = true
        invalidate()
    }
    fun stopMarquee() {
        isRunning = false
    }
}

实现要点：

重写 onMeasure 获取文本和视图宽度
在 onDraw 中实现手动滚动逻辑
通过 invalidate() 触发持续重绘
提供外部控制接口

方案二：属性动画增强版

class AnimatedMarqueeView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatTextView(context, attrs, defStyleAttr) {
    private var animator: ValueAnimator? = null
    private var scrollX = 0f
    init {
        isSingleLine = true
        ellipsize = null
    }
    fun startMarquee(duration: Long = 5000) {
        stopMarquee()
        val textWidth = paint.measureText(text.toString())
        val viewWidth = width.toFloat()
        if (textWidth > viewWidth) {
            val distance = textWidth + viewWidth
            animator = ValueAnimator.ofFloat(0f, -distance).apply {
                addUpdateListener { animation ->
                    scrollX = animation.animatedValue as Float
                    invalidate()
                }
                duration = duration
                repeatCount = ValueAnimator.INFINITE
                interpolator = LinearInterpolator()
                start()
            }
        }
    }
    fun stopMarquee() {
        animator?.cancel()
        animator = null
    }
    override fun onDraw(canvas: Canvas) {
        if (scrollX != 0f) {
            canvas.save()
            canvas.translate(scrollX, 0f)
            super.onDraw(canvas)
            canvas.restore()
        } else {
            super.onDraw(canvas)
        }
    }
}

优势对比：
| 特性 | 基础实现方案 | 属性动画方案 |
|——————————|——————————|——————————|
| 性能开销 | 较高（持续invalidate） | 较低（动画系统优化） |
| 灵活性 | 中等 | 高（可配置插值器） |
| 复杂动画支持 | 困难 | 容易 |

四、性能优化策略

1. 测量阶段优化

// 缓存测量结果避免重复计算
private val textWidthCache = mutableMapOf<String, Float>()
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    val text = text.toString()
    textWidth = textWidthCache.getOrPut(text) { 
        paint.measureText(text) 
    }
    viewWidth = measuredWidth.toFloat()
}

2. 绘制优化技巧

使用 Canvas.clipRect() 限制绘制区域
复杂布局时考虑 offscreenBuffer
避免在 onDraw 中创建对象

3. 动画控制建议

// 根据视图可见性控制动画
override fun onWindowVisibilityChanged(visibility: Int) {
    super.onWindowVisibilityChanged(visibility)
    when (visibility) {
        View.VISIBLE -> startMarquee()
        else -> stopMarquee()
    }
}
// 结合ViewTreeObserver检测布局变化
override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    viewTreeObserver.addOnGlobalLayoutListener {
        // 布局变化后重新计算
    }
}

五、高级功能扩展

1. 多方向滚动支持

enum class MarqueeDirection {
    LEFT, RIGHT, UP, DOWN
}
class DirectionalMarqueeView : AppCompatTextView {
    var direction: MarqueeDirection = MarqueeDirection.LEFT
        set(value) {
            field = value
            resetAnimation()
        }
    // 实现对应方向的滚动逻辑...
}

2. 暂停与继续功能

fun pauseMarquee() {
    if (animator?.isRunning == true) {
        animator?.pause()
    }
}
fun resumeMarquee() {
    animator?.resume()
}

3. 动态速度调整

var scrollSpeed = 2f
    set(value) {
        field = value
        // 重新计算动画参数
    }
// 在动画更新监听器中使用
animator?.addUpdateListener {
    val progress = it.animatedFraction
    val currentSpeed = scrollSpeed * (1 + 0.5 * sin(progress * PI))
    // 根据进度动态调整速度
}

六、最佳实践建议

资源管理：
- 在 onDetachedFromWindow() 中释放动画资源
- 使用弱引用避免内存泄漏

兼容性处理：

// 检测硬件加速状态
fun isHardwareAccelerated(): Boolean {
    return context.resources?.configuration?.windowConfiguration?.windowConfiguration?.isHardwareAccelerated() ?: false
}

测试要点：
- 不同DPI设备的显示效果
- 文本长度变化时的动画稳定性
- 快速滚动场景下的性能表现
替代方案考虑：
- 短文本：使用 ... 省略号
- 复杂动画：考虑 Lottie 动画库
- 列表场景：使用 RecyclerView + 自定义ItemDecoration

七、常见问题解决方案

1. 动画卡顿问题

原因分析：

主线程绘制负担过重
频繁的 invalidate() 调用
复杂的文本布局计算

解决方案：

// 使用postDelayed替代连续invalidate
private fun smoothScroll() {
    postDelayed({
        scrollX -= scrollSpeed
        if (shouldContinueScrolling()) {
            invalidate()
            smoothScroll()
        }
    }, 16) // 接近60fps的间隔
}

2. 多语言适配问题

处理策略：

// 根据语言方向调整初始位置
fun adjustForLocale() {
    val isRtl = layoutDirection == VIEW_LAYOUT_DIRECTION_RTL
    scrollX = if (isRtl) viewWidth else 0f
}

3. 与其他动画冲突

协调方案：

// 使用动画监听器协调
animator?.addListener(object : AnimatorListenerAdapter() {
    override fun onStart(animation: Animator) {
        // 暂停其他动画
    }
    override fun onEnd(animation: Animator) {
        // 恢复其他动画
    }
})

八、总结与展望

自定义文字跑马灯的实现涉及测量、绘制、动画三大核心环节。通过系统原生方案的剖析，我们理解了其基本原理和局限性。自定义实现方案提供了更大的灵活性，但需要开发者自行处理性能优化和边缘情况。

未来发展方向：

结合 RenderScript 实现GPU加速
集成 MotionLayout 实现复杂动画序列
开发响应式跑马灯，根据阅读速度动态调整

建议开发者根据实际需求选择实现方案：简单场景可使用系统属性，复杂交互需求推荐自定义实现。无论哪种方案，都应注重性能测试和兼容性验证，确保在不同设备和Android版本上的稳定表现。

重学 Android 自定义 View 系列(十一)：文字跑马灯实现与优化全解析