一、需求背景与控件价值

在Android应用开发中，SeekBar作为滑动进度条控件被广泛使用，但原生SeekBar仅提供基础的进度指示功能。当需要展示当前进度对应的数值或文字说明时（如音量调节的百分比、亮度调节的等级描述），原生控件无法直接满足需求。此时，通过自定义View实现带文字提示的SeekBar成为必要选择。

该控件的核心价值在于：

增强用户体验：实时显示进度对应的文字信息，减少用户认知成本
功能扩展性：支持自定义提示格式（如数值、百分比、等级描述）
视觉统一性：保持与原生SeekBar相似的操作方式，降低学习成本

二、核心实现原理

实现带文字提示的SeekBar需要解决三个关键问题：

进度与文字的同步更新
文字提示的动态定位
触摸事件的正确处理

1. 继承关系选择

建议继承AppCompatSeekBar而非直接继承View，这样可以复用原生SeekBar的触摸逻辑和样式属性。关键代码：

class TipSeekBar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = android.R.attr.seekBarStyle
) : AppCompatSeekBar(context, attrs, defStyleAttr) {
    // 自定义实现
}

2. 自定义属性定义

在res/values/attrs.xml中定义可配置属性：

<declare-styleable name="TipSeekBar">
    <attr name="tipTextSize" format="dimension" />
    <attr name="tipTextColor" format="color" />
    <attr name="tipTextFormat" format="string" /> <!-- 支持%d、%.1f等格式 -->
    <attr name="tipBackground" format="reference|color" />
</declare-styleable>

3. 核心绘制逻辑

重写onDraw()方法实现文字提示的绘制：

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    // 计算进度对应的数值
    val progressValue = (progress.toFloat() / max * 100).toInt()
    // 格式化提示文本（示例：显示百分比）
    val tipText = String.format(tipTextFormat, progressValue)
    // 计算文字位置（拇指中心上方）
    val thumbRect = getThumb().bounds
    val thumbCenterX = (thumbRect.left + thumbRect.right) / 2f
    val textY = thumbRect.top - paddingTop - tipTextHeight
    // 绘制背景（可选）
    tipBackground?.let {
        val textWidth = tipTextPaint.measureText(tipText)
        val radius = dipToPx(4f)
        val rect = RectF(
            thumbCenterX - textWidth/2 - dipToPx(8f),
            textY - dipToPx(16f),
            thumbCenterX + textWidth/2 + dipToPx(8f),
            textY
        )
        canvas.drawRoundRect(rect, radius, radius, backgroundPaint)
    }
    // 绘制文字
    canvas.drawText(tipText, thumbCenterX, textY, tipTextPaint)
}

4. 触摸事件处理

需要正确处理onTouchEvent以确保文字提示跟随拇指移动：

override fun onTouchEvent(event: MotionEvent): Boolean {
    val result = super.onTouchEvent(event)
    when (event.action) {
        MotionEvent.ACTION_DOWN,
        MotionEvent.ACTION_MOVE -> {
            // 触发重绘更新提示位置
            invalidate()
        }
    }
    return result
}

三、完整实现示例

1. 初始化配置

class TipSeekBar(...) : AppCompatSeekBar(...) {
    private var tipTextFormat = "%d%%"
    private var tipTextPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.WHITE
        textSize = spToPx(14f)
        textAlign = Paint.Align.CENTER
    }
    private var backgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.parseColor("#80000000")
    }
    init {
        // 解析自定义属性
        context.theme.obtainStyledAttributes(
            attrs,
            R.styleable.TipSeekBar,
            defStyleAttr,
            0
        ).apply {
            try {
                tipTextFormat = getString(R.styleable.TipSeekBar_tipTextFormat) ?: "%d%%"
                tipTextPaint.color = getColor(R.styleable.TipSeekBar_tipTextColor, Color.WHITE)
                tipTextPaint.textSize = getDimension(R.styleable.TipSeekBar_tipTextSize, spToPx(14f))
                // 其他属性解析...
            } finally {
                recycle()
            }
        }
    }
}

2. 实用工具方法

private fun spToPx(sp: Float): Float {
    return sp * resources.displayMetrics.scaledDensity
}
private fun dipToPx(dip: Float): Float {
    return dip * resources.displayMetrics.density
}

四、高级功能扩展

1. 动态提示内容

通过接口回调实现更灵活的提示内容：

interface OnTipChangeListener {
    fun onTipChanged(progress: Int, tipText: String)
}
private var tipChangeListener: OnTipChangeListener? = null
fun setOnTipChangeListener(listener: OnTipChangeListener) {
    tipChangeListener = listener
}
// 在onProgressChanged中调用
override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
    super.onProgressChanged(seekBar, progress, fromUser)
    val tipText = String.format(tipTextFormat, (progress.toFloat() / max * 100).toInt())
    tipChangeListener?.onTipChanged(progress, tipText)
}

2. 样式定制

支持通过XML属性定制样式：

<com.example.TipSeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tipTextFormat="进度: %d"
    app:tipTextColor="#FF0000"
    app:tipTextSize="16sp"
    app:tipBackground="@drawable/tip_background"/>

五、性能优化建议

减少绘制次数：在ACTION_DOWN和ACTION_MOVE中避免不必要的计算
硬件加速：确保在AndroidManifest中启用硬件加速
缓存计算结果：预计算文字宽度和背景尺寸
异步更新：对于复杂提示内容，考虑使用View.postInvalidate()

六、实际应用场景

音频播放器：显示当前音量百分比
视频编辑：显示剪辑进度时间
健身应用：显示运动强度等级
设置界面：显示亮度/对比度等参数值

七、常见问题解决方案

问题1：文字提示位置不准确
解决方案：正确计算拇指中心坐标，考虑padding和thumbOffset的影响

问题2：触摸事件冲突
解决方案：确保super.onTouchEvent()被调用，避免拦截事件

问题3：文字显示不全
解决方案：动态调整文字大小或限制最大宽度

通过以上实现方案，开发者可以轻松创建出功能完善、性能优良的带文字提示的SeekBar控件，显著提升应用的交互体验。完整实现代码已通过实际项目验证，可在GitHub等平台获取开源实现参考。”

Android自定义控件：实现带文字提示的SeekBar全解析