image.png

xml布局文件

 <ProgressBar
                    android:id="@+id/progress02"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/pk1"
                    android:layout_marginLeft="2dp"
                    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                    android:progress="48"
                    android:progressDrawable="@drawable/progress_vertical_style"
                    android:max="100"
                    />

注释
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
样式使用水平进度条
android:progressDrawable="@drawable/progress_vertical_style"
背景引用drawble内文件progress_vertical_style的样式

1：正向绘制 drawble 内progress_vertical_style

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <color android:color="#ddd"/>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <gradient
                    android:startColor="#ddd"
                    android:endColor="#ddd"/>
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip
            android:clipOrientation="horizontal"
            android:gravity="left">
            <shape>
                <corners android:radius="5dp"/>
                <gradient
                    android:startColor="#00d0ff"
                    android:endColor="#6296ef"/>
            </shape>
        </clip>
    </item>
</layer-list>

注释
<color android:color="#ddd"/>
进度条的背景色
android:clipOrientation="horizontal"
裁剪方向为水平方向
android:gravity="left"
从左边开始裁剪
android:startColor="#00d0ff"
进度条的前景色颜色
android:endColor="#6296ef"
进度条结束后的颜色

2：反向绘制

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <color android:color="#ddd"/>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <gradient
                    android:startColor="#ddd"
                    android:endColor="#ddd"/>
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip
            android:clipOrientation="horizontal"
            android:gravity="right">
            <shape>
                <corners android:radius="5dp"/>
                <gradient
                    android:startColor="#f00"
                    android:endColor="#f00"/>
            </shape>
        </clip>
    </item>
</layer-list>