android seekbar显示刻度

SeekBar简介

SeekBar是Android中的一个可交互UI组件，允许用户通过拖动滑块在特定范围内选择数值。继承自ProgressBar，但增加了用户手动调节功能，常用于音量控制、亮度调节等场景。

核心属性

android:maxHeight   // 背景高度
android:progressDrawable  // 进度条背景
android:thumb  // 滑块
android:splitTrack //  hua块 是否切割 seekbar 背景，默认true，会看到thumb周围区域被切割
android:thumbOffset // 控制滑块初始位置
android:paddingStart // 控制滑块左右空白部分

SeekBar滑块显示文字

公司的UI出了一个效果图，在seekbar的滑块上显示进度文字，效果如图:
效果还是很不错的，可是实现起来难呀，咋办，别担心，慢慢干。
显示文字的需求可以通过自定义seekbar的thumb（滑块）的方式实现，也可以重写seekbar的ondraw方法实现，这里我选择第二种方式

package com.htfyun.systemui.widget;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.widget.SeekBar;

public class HtSeekBar extends SeekBar {
    private static final String TAG = "HtSeekBar";
    private Paint textPaint = new Paint();
    private Rect rect = new Rect();

    public HtSeekBar(android.content.Context context, android.util.AttributeSet attrs) {
        super(context, attrs);
        textPaint.setColor(Color.WHITE);
        textPaint.setTextSize(18);
        textPaint.setDither(false);
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int save = canvas.save();
        String text = String.valueOf(getProgress());
        textPaint.getTextBounds(text, 0, text.length(), rect);
        float p = 1f * getProgress() / (getMax() - getMin());
        float x = (getWidth() - getPaddingStart()) * p - rect.centerX() + getPaddingStart() * (1 - p);
        float y = 1f * getHeight() / 2 - rect.centerY();
        canvas.drawText(text, x, y, textPaint);
        canvas.restoreToCount(save);
    }
}

写一个xml实现progressDrawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="#FFF" />
            <stroke
                android:width="1dp"
                android:color="#4B5563" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dp" />
                <solid android:color="#4B5563" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="10dp" />
                <solid android:color="#4B5563" />
            </shape>
        </clip>
    </item>
</layer-list>

在layout布局文件中引用就是了

<com.htfyun.systemui.widget.HtSeekBar
    android:id="@+id/sbVolume"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/tvVolume"
    android:layout_alignBottom="@id/tvVolume"
    android:layout_marginRight="16dp"
    android:layout_toRightOf="@id/tvVolume"
    android:max="@integer/seekbarMax"
    android:maxHeight="16dp"
    android:progress="15"
    android:progressDrawable="@drawable/seekbar"
    android:splitTrack="false"
    android:thumb="@drawable/thumb" />

ok，完工。