当前位置：首页 > news >正文

android seekbar显示刻度

news 2025/9/5 7:49:36

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);}@Overrideprotected 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" /><strokeandroid: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.HtSeekBarandroid: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" />