问题描述
我想实现这样的图像。请帮忙
解决方法
我试图做出与您想要的东西类似的东西：
1-首先添加SeekBar的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 ：
progress_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更改其值时，我们都需要动态更改SeekBar以及更改SeekBar的拇指：
@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) {
}
});
}
我试图将拇指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),// 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'