Android控件ProgressBar--自定义进度条及源码分析

这里用SeekBar做演示，SeekBar继承自ProgressBar,拥有其一切特性，并且其支持拖动以及DPAD左右键的进退。一起学习吧！

一、自定义SeekBar进度条样式

原生SeekBar效果如图

原生SeekBar样式

1. 自定义SeekBar进度条样式一

<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进度条样式二

<?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实现原理源码分析

由于时间问题，该部分后续更新