在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了。