使用Kotlin开发自定义Custom SeekBar的实现思路咨询

实现方案选型 #

优先选择直接继承View完全自定义实现，相比继承原生SeekBar修改成本更低，灵活度更高，更容易实现分段刻度、选中气泡、自动吸附等定制效果。 #

核心实现步骤 #

• 第一步：定义自定义属性
  在res/values/attrs.xml中声明需要的定制属性，包括分段数量、轨道高度、已选中/未选中轨道颜色、滑块尺寸/颜色、气泡背景色、气泡文字样式等，在自定义View的构造函数中读取这些属性值。
• 第二步：测量控件尺寸
  重写onMeasure方法计算控件所需宽高，需要额外预留滑块、顶部气泡的绘制空间，避免拖动时内容被裁剪。
• 第三步：绘制基础轨道
  先绘制整段未选中的灰色背景轨道，再根据当前进度计算已选中区域的长度，绘制高亮的已选中轨道，最后在每个分段位置绘制刻度圆点，已选中区域的刻度可以设置为高亮色做区分。
• 第四步：绘制滑块
  根据当前进度计算滑块的X轴坐标，绘制自定义样式的滑块（可使用Drawable资源或者直接绘制圆角矩形），保证滑块居中对齐轨道。
• 第五步：绘制选中提示气泡
  在滑块上方绘制气泡背景（可使用.9图或者自行绘制带三角的圆角矩形），然后在气泡内绘制当前进度对应的文本内容，绘制时需要做边界兼容，避免滑块滑到两端时气泡超出控件可视范围。
• 第六步：处理触摸交互
  重写onTouchEvent方法，监听触摸事件：
  1. 按下/滑动时：根据触摸点的X坐标计算对应进度，实时更新进度值并重绘控件
  2. 抬起时：让进度自动吸附到最近的分段位置，同时触发进度变化回调给外部使用
• 第七步：可选优化
  添加滑动动画、触感反馈、禁用态样式等增强体验的效果。

核心代码示例 #

class CustomSegmentSeekBar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    // 自定义属性存储变量
    private var segmentCount = 3
    private val trackHeight = 8.dpToPx()
    private val selectedTrackColor = Color.parseColor("#2196F3")
    private val unselectedTrackColor = Color.parseColor("#E0E0E0")
    var currentProgress = 1
        set(value) {
            field = value.coerceIn(1, segmentCount)
            invalidate()
        }
    var onProgressChangeListener: ((Int) -> Unit)? = null

    private val trackPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val thumbPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val bubblePaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val textPaint = Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        // 计算高度：轨道高度 + 滑块高度 + 气泡高度 + 上下边距
        val expectHeight = (trackHeight + 30.dpToPx() + 40.dpToPx() + 16.dpToPx()).toInt()
        val width = MeasureSpec.getSize(widthMeasureSpec)
        val height = resolveSize(expectHeight, heightMeasureSpec)
        setMeasuredDimension(width, height)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        drawUnselectedTrack(canvas)
        drawSelectedTrack(canvas)
        drawSegmentTicks(canvas)
        drawThumb(canvas)
        drawProgressBubble(canvas)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        if (!isEnabled) return false
        when (event.action) {
            MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE -> {
                val newProgress = calculateProgressByX(event.x)
                if (newProgress != currentProgress) {
                    currentProgress = newProgress
                }
                return true
            }
            MotionEvent.ACTION_UP -> {
                currentProgress = getNearestSegment(event.x)
                onProgressChangeListener?.invoke(currentProgress)
                performClick()
                return true
            }
        }
        return super.onTouchEvent(event)
    }

    // 辅助方法：根据X坐标计算对应进度
    private fun calculateProgressByX(x: Float): Int {
        val usableWidth = width - paddingStart - paddingEnd
        val progressPercent = (x - paddingStart) / usableWidth
        return (progressPercent * segmentCount + 0.5f).toInt().coerceIn(1, segmentCount)
    }

    // 辅助方法：获取最近的分段位置
    private fun getNearestSegment(x: Float): Int {
        return calculateProgressByX(x)
    }

    // 以下为各个绘制方法的实现省略
    private fun drawUnselectedTrack(canvas: Canvas) {}
    private fun drawSelectedTrack(canvas: Canvas) {}
    private fun drawSegmentTicks(canvas: Canvas) {}
    private fun drawThumb(canvas: Canvas) {}
    private fun drawProgressBubble(canvas: Canvas) {}

    // 扩展方法：dp转px
    private fun Int.dpToPx() = this * resources.displayMetrics.density
}

内容的提问来源于stack exchange，提问作者Meet Bhatt