时间戳

首页 > 解决方案 > 带有自定义拇指和间隔文本 Android 的 Seekbar

android - 带有自定义拇指和间隔文本 Android 的 Seekbar

问题描述

我想实现这样的形象。请帮忙

在此处输入图像描述

标签： androidseekbar

解决方案

我试图做一些类似于你想要的东西：

在此处输入图像描述

SeekBar1 - 首先添加如下的XML ：

  <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_margin="10dp"
        android:max="100"
        android:maxHeight="4.0dp"
        android:progress="60"/>

2 - 创建 2 个Drawable文件progress_bg.xml和custom_thumb.xml：

进度_bg.xml：

<?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 android:shape="rectangle">
            <corners android:radius="5dp"/>
            <solid android:color="#e0e0e0"/>
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <scale
            android:scaleWidth="100%" >
            <shape android:shape="rectangle">
                <corners android:radius="5dp"/>
                <solid android:color="#e0e0e0"/>
            </shape>
        </scale>
    </item>

    <item android:id="@android:id/progress">
        <scale
            android:scaleWidth="100%" >
            <shape android:shape="rectangle">
                <corners android:radius="5dp"/>
                <solid android:color="#2574ff"/>
            </shape>
        </scale>
    </item>
</layer-list>

custom_thumb.xml ：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1.5dp"
        android:color="#2574ff" />
    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />
    <solid android:color="#fff" />
    <size android:width="25dp" android:height="25dp"/>
</shape>

3 - 现在是 Java 代码，我们需要在每次更改其值时动态progressDrawable更改以及更改拇指：SeekBarSeekBar

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        SeekBar seekBar = findViewById(R.id.seekBar);
        seekBar.setThumb(getCurrentThumb(seekBar.getProgress()));
        seekBar.setProgressDrawable(ResourceUtils.getDrawable(R.drawable.progress_bg));
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                seekBar.setThumb(getCurrentThumb(seekBar.getProgress()));
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }

我试图将 thumb 转换Drawable为Bitmap，所以我可以在上面写一个文本，这就是我所做的：

public Drawable getCurrentThumb(int currentProgress) {
        Bitmap writableBitmap = ImageUtils.drawable2Bitmap(ResourceUtils.getDrawable(R.drawable.custom_thumb));
        writableBitmap = addText(writableBitmap, currentProgress);
        return ImageUtils.bitmap2Drawable(writableBitmap);
    }

将文本添加到Bitmap：

public Bitmap addText(Bitmap src, int currentProgress) {
    Bitmap.Config bitmapConfig = src.getConfig();
    if (bitmapConfig == null) bitmapConfig = Bitmap.Config.ARGB_8888;
    Bitmap bitmap = src.copy(bitmapConfig, true);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.BLACK);
    paint.setStyle(Paint.Style.FILL);
    paint.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.BOLD));
    paint.setTextAlign(Paint.Align.CENTER);
    paint.setTextSize(35);
    Rect rectangle = new Rect();
    paint.getTextBounds(
            String.valueOf(currentProgress),
            0, // start
            String.valueOf(currentProgress).length(),
            rectangle
    );
    canvas.drawText(
            String.valueOf(currentProgress),
            canvas.getWidth() / 2.0f,
            canvas.getHeight() / 2.0f + Math.abs(rectangle.height()) / 2.0f, // y
            paint // Paint
    );
    return bitmap;
}

使用的库：

implementation 'com.blankj:utilcodex:1.29.0'

推荐阅读