Android下如何自定义ProgressBar的外观

在Android应用中经常会用的到一些进度条，这些进度条的样子千差万别，但是大多都是由ProgressBar来的。但是Android系统自带的进度条样式却不太好看，今天要做的就是自定义一个好看的ProgressBar。

我们先来看看Android自带的进度条的样子：

我们今天的目标，自定义 的进度条的样子：

不难发现差距还是挺大的，好了，废话不多说，进入正题：

我们首先还是从源码入手，我们可以打开ADT目录下的sdk\platforms\android-16\data\res\values文件夹，由于很多Android下组件的样式(Style)都是定义在这个文件夹下的styles.xml文件中的，系统默认的ProgressBar也不例外，所以我们可以打开这里的styles.xml文件，并且找到ProgressBar的定义的地方：

由于今天需要一个横向的进度条，所以我们找到ProgressBar.Horizontal：

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

在这里面，实际上我们需要重点关注一下progress_horizontal这个文件，我们可以在找到这个sdk\platforms\android-16\data\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="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>

打开一看，我们可以发现其中定义了三个item，分别是： background、 secondaryProgress和 progress，这里的 background就是进度条所使用的背景，对应于我们上面那副自定义进度条的图就是灰色的部分，填充在进度条的底部；而 progress则是进度条的样子，对应于我们上面图示的绿色的进度条的部分； secondaryProgress在我们的图示里面没有，这个组件的作用是类似于在网上看在线视频的时候，缓冲进度显示的那个灰色的进度条，跟观看进度是两个不同的进度，在这里我们没有加。

进一步观察每一个item的定义方式，Android系统是直接指定了每一个item的颜色这种方法来定义样子的，在我们这里可以使用不同的背景图片来定义会更加漂亮一些。

至此，源码部分基本搞定，下面我们需要做的就是三步：

1、在我们自己的工程目录的res/values/styles.xml文件中添加一个style条目，名字自定，比如我们这里叫my_pb_style，但是需要指定一个父类也就是在上面我们打开的Android系统中的ProgressBar的样式，同时我们需要重写父类中设置progress_horizontal的地方，将这个xml文件改为我们自己工程中自定义的xml文件，比如说叫my_progressbar.xml

    <style name="my_pb_style" parent="@android:style/Widget.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progressbarcolor</item>
    </style>

2、在我们工程目录下的res目录下，新建一个drawable的文件夹，在其中建立一个my_progressbar.xml的文件，将上面打开的progress_horizontal.xml文件中的secondaryProgress的item去掉，只保留background和progress即可，然后每个item的shape部分也去掉，改为我们自己准备好的图片，如下，其中security_progress_bg和security_progress分别为我们事先准备好的放在drawble目录下的图片，比如我们这里的图片如下：

           

<?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/security_progress_bg"/>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/security_progress"/>

</layer-list>

3、在我们需要ProgressBar的布局文件中定义出ProgressBar，并将上面我们定义好的Style样式添加进去即可：

<ProgressBar
                android:id="@+id/progressBar1"
                style="@style/my_pb_style"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp" />

至此，我们就可以在文件中来使用这个自定义外观的ProgressBar了。