Android多颜色SeekBar自定义：带黄色书签高亮效果实现求助

嘿，我来帮你搞定这个自定义SeekBar的需求！要实现主体绿色+书签位置高亮黄色，咱们可以分步骤来，其实核心是自定义SeekBar的绘制逻辑，下面是具体的实现方案：

首先咱们得把SeekBar的背景和进度条改成绿色，这一步通过自定义drawable文件就能实现：

1.1 创建进度条组合样式（layer-list） #

在res/drawable目录下新建seekbar_progress_style.xml，把背景和进度条组合起来：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- SeekBar的背景（淡绿色） -->
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#8800FF00" />
            <corners android:radius="8dp" /> <!-- 圆角让样式更美观 -->
        </shape>
    </item>
    <!-- SeekBar的进度条（深绿色） -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#00CC00" />
                <corners android:radius="8dp" />
            </shape>
        </clip>
    </item>
</layer-list>

1.2 布局中引用样式 #

在你的布局文件里，把这个样式赋值给SeekBar的progressDrawable属性，同时可以自定义滑块（thumb）：

<SeekBar
    android:id="@+id/customSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/seekbar_progress_style"
    android:thumb="@drawable/your_custom_thumb" />

（如果不需要自定义滑块，也可以用系统默认的，或者简单做个圆形drawable当滑块）

接下来要实现书签位置的黄色高亮，这就需要咱们自己写一个继承自SeekBar的类，重写绘制逻辑，额外绘制书签标记：

2.1 编写CustomSeekBar类 #

public class CustomSeekBar extends SeekBar {
    // 保存所有书签的进度位置（范围0到max）
    private List<Integer> bookmarkPositions = new ArrayList<>();
    // 绘制书签的画笔
    private Paint bookmarkPaint;
    // 书签标记的宽度，可根据需求调整
    private int bookmarkWidth = dp2px(8);
    // 书签高亮颜色（黄色）
    private int bookmarkColor = Color.YELLOW;

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

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

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

    // 初始化画笔和参数
    private void init() {
        bookmarkPaint = new Paint();
        bookmarkPaint.setColor(bookmarkColor);
        bookmarkPaint.setStyle(Paint.Style.FILL);
        bookmarkPaint.setAntiAlias(true); // 抗锯齿让绘制更平滑
    }

    // 添加书签的公共方法，外部调用这个方法添加书签
    public void addBookmark(int progress) {
        if (!bookmarkPositions.contains(progress)) {
            bookmarkPositions.add(progress);
            invalidate(); // 刷新视图，重新绘制书签
        }
    }

    // 移除书签的公共方法
    public void removeBookmark(int progress) {
        bookmarkPositions.remove(Integer.valueOf(progress));
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas); // 先绘制默认的绿色SeekBar

        // 遍历所有书签，绘制黄色高亮标记
        int seekBarHeight = getHeight();
        int maxProgress = getMax();
        // 计算SeekBar的实际可绘制宽度（去掉左右padding）
        int usableWidth = getWidth() - getPaddingLeft() - getPaddingRight();

        for (int progress : bookmarkPositions) {
            // 计算书签在SeekBar上的x坐标
            float bookmarkX = getPaddingLeft() + (float) progress / maxProgress * usableWidth;
            // 绘制黄色的竖条作为高亮（也可以改成圆角矩形或者圆点）
            canvas.drawRect(
                bookmarkX - bookmarkWidth/2,
                0,
                bookmarkX + bookmarkWidth/2,
                seekBarHeight,
                bookmarkPaint
            );
        }
    }

    // 工具方法：dp转px，适配不同屏幕
    private int dp2px(int dp) {
        return (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dp,
            getResources().getDisplayMetrics()
        );
    }
}

2.2 布局中使用自定义SeekBar #

把布局里的普通SeekBar换成咱们的CustomSeekBar：

<com.your.package.name.CustomSeekBar
    android:id="@+id/customSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/seekbar_progress_style"
    android:thumb="@drawable/your_custom_thumb" />

（记得把com.your.package.name换成你自己的包名）

在你的Activity或者Fragment里，就可以调用方法添加/移除书签了：

CustomSeekBar customSeekBar = findViewById(R.id.customSeekBar);
customSeekBar.setMax(100); // 这里的max对应视频的总时长比例，比如总时长100秒就设为100

// 添加书签，比如在进度20、50、70的位置（对应视频的20秒、50秒、70秒）
customSeekBar.addBookmark(20);
customSeekBar.addBookmark(50);
customSeekBar.addBookmark(70);

// 如果需要移除某个书签
// customSeekBar.removeBookmark(50);

• 要是想让书签更醒目，可以把黄色竖条改成带阴影的圆角矩形，只需要修改onDraw里的绘制代码，换成canvas.drawRoundRect即可。
• 如果书签是对应视频的具体时间，记得把时间转换成SeekBar的progress值：progress = (currentTime * maxProgress) / totalVideoDuration。
• 还可以添加点击SeekBar添加书签的逻辑，重写onTouchEvent方法，获取点击位置对应的progress，然后调用addBookmark。

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