这里用SeekBar做演示,SeekBar继承自ProgressBar,拥有其一切特性,并且其支持拖动以及DPAD左右键的进退。一起学习吧!
一、自定义SeekBar进度条样式
原生SeekBar效果如图
1. 自定义SeekBar进度条样式一
效果:颜色随着进度从
#00ff00
到#0000ff
渐变布局文件
<SeekBar
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="6dp"
android:progressDrawable="@drawable/progress_horizontal"
android:thumb="@drawable/seekbar_thumb" />
progressDrawable用来定义与进度有关的图片。
res/drawable/progress_horizontal.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--作为整体背景图片-->
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dp" />
<solid android:color="#d1d0d0" />
</shape>
</item>
<!--@android:id/secondaryProgress 第二进度和progress是类似的,有需要可以定义-->
<!--进度状态的背景-->
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dp" />
<gradient
android:endColor="#0000ff"
android:startColor="#00ff00" />
</shape>
</clip>
</item>
</layer-list>
thumb的和普通定义一个图片一样,这里就不贴代码了。
progressDrawable工作原理
- ProgressBar通过progressDrawable属性拿到背景图,如果该图片是普通图片,则进度和没有进度看起来是一样的。如果采用LayerDrawable作为背景图,就可控制各个item的显示部分,从而模拟进度,当进度为0时
@android:id/background
该item可以完全看到 -
@android:id/progress
的item图片会随着进度的变化而显示区域发生变化,例如进度为1%,该item图也只会显示1%,主要原理是<clip>
标签,该标签对应ClipDrawable,其可以通过level值控制图片的显示部分,ProgressBar内部会随着进度变化设置ClipDrawable的level,从而实现进度效果。
2. 自定义SeekBar进度条样式二
效果:进度部分渐变保持不变,随着进度拉长
解决思路就是不断的更换进度部分图片,不过简单是进度部分可以是同一张图片,只需要动态改变长度即可。
res/drawable/progress_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="6dp"
android:gravity="center_vertical">
<shape>
<corners android:radius="5dp" />
<solid android:color="#d1d0d0" />
</shape>
</item>
<item
android:width="0px"
android:height="6dp"
android:gravity="center_vertical">
<shape>
<corners android:radius="5dp" />
<gradient
android:endColor="#0000ff"
android:startColor="#00ff00" />
</shape>
</item>
</layer-list>
不需要加id部分,将其作为一张普通图片作为进度条背景。
实现思路:LayerDrawable默认最后的item显示在最上层,那么我们可以将第一个item作为进度条的整体颜色,第二个item作为进度部分颜色。第二个item宽度为0,也象征着进度为0,当进度条进度发生变化时,我们根据进度相对于整个进度条的比例计算出进度部分的宽度,从而调整第二个item的宽度实现上图效果。
布局文件保持不变,Java代码更改如下
seekBar = findViewById(R.id.seekbar);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
progressTV.setText(progress + "%");
refreshProgressBackground(seekBar, progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
private void refreshProgressBackground(SeekBar seekBar, int progress) {
// 1. 得到LayerDrawable
LayerDrawable layerDrawable = (LayerDrawable) getResources().getDrawable(R.drawable.seekbar_drawable);
// seekBar显示宽度
int avaliableWidth = seekBar.getWidth() - seekBar.getPaddingLeft() - seekBar.getPaddingRight();
// 进度部分宽度
int progressWidth = (int) (avaliableWidth * progress / (float) seekBar.getMax());
// 第二个item,下标为1
layerDrawable.setLayerWidth(1, progressWidth);
// 2. 重新设置ProgressDrawable
seekBar.setProgressDrawable(layerDrawable);
}
注释1出之所以不直接通过seekBar获取LayerDrawable,是因为在注释2出的setProgressDrawable方法内会判断Drawable和SeekBar以前所得到的progressDrawable是否相同,相同则不做任何操作,故每次需创建新的对象。
二、SeekBar及ProgressBar实现原理源码分析
由于时间问题,该部分后续更新