自定义水平进度条Horizontal ProgressBar

系统的ProgressBar 样式

打开Styles.xml，可以看到系统的ProgressBar 样式定义如下：

    <style name="Widget.ProgressBar.Horizontal">
        <item name="indeterminateOnly">false</item>
        <item name="progressDrawable">@drawable/progress_horizontal</item>
        <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
        <item name="minHeight">20dip</item>
        <item name="maxHeight">20dip</item>
        <item name="mirrorForRtl">true</item>
    </style>

一眼就可以发现，主要样式定义在progressDrawable 属性中了：
progress_horizontal.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                    android:startColor="#ff9d9e9d"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:angle="270"
            />
        </shape>
    </item>
    
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
</layer-list>

可以看到，ProgressBar 实际上就是一个Layer list，每一个Layer 分别定义了ProgressBar 的进度条，第二进度条和背景。知道了这些，自定义进度条实际上就是将layer list中的属性替换成自己需要的属性就行了。

自定义水平进度条

首先在drawable 文件夹下新建xml 文件，根元素为<layer-list>，在每个item 项下可以定义自己的属性：

progressbar_horizontal

<?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>
            <solid android:color="#00000000" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <gradient
                    android:endColor="#cc0000"
                    android:startColor="#ccff00" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:endColor="#cc0000"
                    android:startColor="#ccff00" />
            </shape>
        </clip>
    </item>

</layer-list>

也可以通过drawable 属性引用相应的drawable 对象。

然后将ProgressBar 的progressdrawable 属性指向上面定义的layer-list 就可以了。可以在style中定义，然后在ProgressBar 的属性中引用自定义的style：

styles.xml

    <style name="my_progress_1" parent="android:style/Widget.Holo.ProgressBar.Horizontal">
        <strong><item name="android:progressDrawable">@drawable/progressbar_horizontal</item></strong>
        <item name="android:maxHeight">15dp</item>
        <item name="android:minHeight">10dp</item>
    </style>

            <ProgressBar
                android:id="@+id/la_progress"
                <strong>style="@style/my_progress_1"</strong>
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"
                android:max="50000" />

也可以直接使用progressDrawable属性：

            <ProgressBar
                android:id="@+id/la_progress"
                <strong>android:progressDrawable="@drawable/progressbar_horizontal"</strong>
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"
                android:max="50000" />