Android开发如何实现带数字刻度及竖线标注的SeekBar

原生SeekBar没有提供内置的刻度+数字绘制能力，不需要额外嵌套布局，直接继承AppCompatSeekBar重写onDraw方法，在原有进度条、滑块绘制完成后自行计算位置绘制竖线和数字即可，你之前写的自定义thumb、自定义进度条配置可以完全保留。

实现步骤 #

1. 编写自定义SeekBar类 #

核心逻辑是先计算SeekBar进度轨道的实际可用宽度，按刻度均分位置，依次绘制竖线刻度和对应数字，注意提前给View留够绘制刻度的内边距，避免内容被裁切。
完整可直接用的代码如下：

public class MarkedSeekBar extends AppCompatSeekBar {
    // 绘制相关配置，可根据设计稿调整参数，也可抽成自定义属性从XML赋值
    private final Paint tickPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private final Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private final int tickLineHeight = dp2px(8); // 竖线刻度高度
    private final int textTickGap = dp2px(4); // 数字和竖线的间距
    private final int tickLineWidth = dp2px(1.5f);
    private final int textSize = sp2px(12);
    private final int contentColor = Color.parseColor("#333333");

    public MarkedSeekBar(Context context) {
        super(context);
        init();
    }

    public MarkedSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MarkedSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        // 初始化画笔
        tickPaint.setStrokeWidth(tickLineWidth);
        tickPaint.setColor(contentColor);
        tickPaint.setStyle(Paint.Style.STROKE);

        textPaint.setColor(contentColor);
        textPaint.setTextSize(textSize);
        textPaint.setTextAlign(Paint.Align.CENTER);

        // 给顶部预留足够空间绘制刻度和数字，避免内容被裁切
        int topPadding = dp2px(28);
        setPadding(getPaddingLeft(), topPadding, getPaddingRight(), getPaddingBottom());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 先绘制原生的进度轨道、滑块
        super.onDraw(canvas);

        // 获取进度轨道的边界信息，确定竖线的终点位置
        Rect trackBounds = getProgressDrawable().getBounds();
        int trackTop = trackBounds.top;
        int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
        int maxProgress = getMax();

        // 遍历所有刻度，依次绘制竖线和数字
        for (int i = 0; i <= maxProgress; i++) {
            // 计算当前刻度的水平坐标
            float xPos = getPaddingLeft() + (i * 1f / maxProgress) * availableWidth;
            // 绘制竖线：从文字底部延伸到进度轨道顶部
            float lineTopY = trackTop - tickLineHeight;
            canvas.drawLine(xPos, lineTopY, xPos, trackTop, tickPaint);
            // 绘制数字：在竖线上方居中对齐，校正文字基线避免偏移
            float textBottomY = lineTopY - textTickGap;
            Paint.FontMetrics fm = textPaint.getFontMetrics();
            float textBaseline = textBottomY - fm.descent;
            canvas.drawText(String.valueOf(i), xPos, textBaseline, textPaint);
        }
    }

    private int dp2px(float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, getResources().getDisplayMetrics());
    }

    private int sp2px(float spVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, getResources().getDisplayMetrics());
    }
}

2. XML布局中替换原生SeekBar #

直接把原来的SeekBar替换成你自定义的类，之前的自定义thumb、progressDrawable配置不需要改动：

<com.your.package.path.MarkedSeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="6"
    android:thumb="@drawable/custom_seekbar_thumb"
    android:progressDrawable="@drawable/custom_seekbar_progress"
    android:splitTrack="false"/>

可选扩展 #

• 选中态刻度高亮：在遍历绘制时判断当前刻度值和getProgress()的大小关系，给画笔切换对应颜色即可
• 刻度放在SeekBar下方：把预留padding改成paddingBottom，竖线和文字的y坐标从进度轨道的bottom位置往下计算即可
• 非数字/非连续刻度适配：给自定义View加一个字符串数组属性，遍历的时候取对应下标的文本绘制，不用拘泥于0到max的数字
• 拖动刻度吸附：添加OnSeekBarChangeListener在停止拖动时把进度校正到最近的刻度值即可

内容的提问来源于stack exchange，提问作者Sparsh Dutta