【笔记】ProgressBar系统实现圆角渐变色进度条

纯色进度条

最大进度100，当前进度30，二级进度60

        <ProgressBar
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:max="100"
            android:progress="30"
            android:progressDrawable="@drawable/pb_rectangle"
            android:secondaryProgress="60" />

pb_rectangle.xml如下

注：background->secondaryProgress->progress需要按层级设置，否则会出现覆盖现象

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--按显示层级，background->secondaryProgress->progress-->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#999999" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle">
                <solid android:color="#FFFF00" />
            </shape>
        </scale>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle">
                <solid android:color="#02FBEF" />
            </shape>
        </scale>
    </item>
</layer-list>

圆角进度条

        <ProgressBar
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:max="100"
            android:progress="30"
            android:progressDrawable="@drawable/pb_corner_single"
            android:secondaryProgress="60" />

pb_corner_single.xml，同样设置background，secondaryProgress，progress的drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/pb_corner_single_bg" />

    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@drawable/pb_corner_single_secondary"
            android:scaleWidth="100%" />
    </item>

    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/pb_corner_single_progress"
            android:scaleWidth="100%" />
    </item>

</layer-list>

pb_corner_single_bg.xml如下，其他两个相同只是换下颜色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--圆角-->
    <corners android:radius="14dp" />
    <!--颜色-->
    <solid android:color="#999" />

</shape>

圆角渐变进度条

只需要将进度条颜色换成渐变色即可

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="14dp" />
    <gradient
        android:angle="0"
        android:endColor="#00ff00"
        android:startColor="#00ffff"
        android:type="linear" />

</shape>

注：圆角进度条在进度较小的时候会出现进度的变形

解决方法：

在一定进度范围都显示一个固定进度，例如1%~5%都显示5%；

最小进度不设置成0%，设置最小进度为不会变形的进度；

Demo源码