Android的ProgressBar自定义入门

Android ProgressBar

本文主要围绕android.widget.ProgressBar，对样式自定义的部分细节进行描述。

XML属性

首先，来了解一下ProgressBar到底在xml配置中到底有何属性，大家可以看看Android官网对ProgressBar的介绍

http://developer.android.com/reference/android/widget/ProgressBar.html。

看完后呢，下面将有一个表格将对部分重要的XML属性进行重新解读。

属性名	取值	描述
style		样式。通过简单的设置样式，我们可以更改ProgressBar的表现形式。 style = @android:style/Widget.ProgressBar                         菊花旋转 style = @android:style/Widget.ProgressBar.Horizontal      水平进度条模式
android:animationResolution		无任何作用
android:indeterminate	true| false	启用indeterminate（中文：不定的，不明确）模式。设置为true。将导致启用进度条的动画。
android:indeterminateBehavior	"repeat"|"cycle"	indeterminate模式下，当进度条达到最大值时的动画处理行为： "repeat"  = Animation.RESTART，动画将从头开始执行。 "cycle"     = Animation.REVERSE，动画将反向从头开始执行。
android:indeterminateDrawable		indeterminate模式下使用的Drawable对象。该对象如果是动画对象（继承自Animatable）， 将会在onDraw方法中被启动动画。
android:indeterminateDuration		indeterminate模式动画间隔。
android:indeterminateOnly		强制indeterminate模式
android:maxHeight|android:minHeight		官方错误的解释说是ProgressBar的最大高度。经过测试，该属性用于控制“progressDrawable”对象的高度。
android:maxWidth|android:minWidth		官方错误的解释说是ProgressBar的最大宽度。经过测试，该属性用于控制“progressDrawable”对象的宽度。
android:progressDrawable		进度模式时使用的Drawable

从表格中不难看出，ProgressBar似乎存在两个工作模式“indeterminate”与"process"。

"indeterminate"中文意思为"不明确"；意在进度无法确定时，使用动画的方式来表示进度，就像一个菊花一样，你能看到它正在努力旋转却无法知道它的进度。

"process"中文意思为“进度“；就是跟”indeterminate“的表现是相反的，我们可以看到实际的进度。

如何自定义样式？

默认样式（菊花）

用过ProgressBar的人都知道，默认的ProgressBar是一个非常努力勤奋的”小菊花“。当你面对这个”小菊花“，修改“indeterminate”属性时，你会发现勤奋的小菊花并没有一点改变。这其实是因为ProgressBar在系统中有默认样式（style=@android:style/Widget.ProgressBar）的原因。（这里可能会有朋友不理解默认样式的意思。

那么这位朋友可能需要了解一下Android的主题（Theme）相关的一些知识，这些可能需要花点时间）。

通过查看Android SDK的目录下的默认资源文件（android-sdk-windows\platforms\android-16\data\res\values\styles.xml），查看Widget.ProgressBar样式的定义。

<style name="Widget.ProgressBar">
    <item name="android:indeterminateOnly">true</item>
    <item name="android:indeterminateDrawable">@android:drawable/progress_medium_white</item>    <!-- 菊花图片 -->
    <item name="android:indeterminateBehavior">repeat</item>
    <item name="android:indeterminateDuration">3500</item>
    <item name="android:minWidth">48dip</item>
    <item name="android:maxWidth">48dip</item>
    <item name="android:minHeight">48dip</item>
    <item name="android:maxHeight">48dip</item>
</style>

如Xml文件描述，默认的ProgressBar的android:indeterminateOnly为true，也就是强制“indeterminate”模式的。Android几乎所有view与widget都会有默认样式，这些默认样式在你没有重新定义“style”属性时，会将这些默认样式应用到你的UI控件。假设你的ProgressBar定义如下：

<ProgressBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

实际的解释运行中，假设默认的ProgressBar样式为以上的Widget.ProgressBar，那么你的ProgressBar定义将如下：

<ProgressBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:indeterminateBehavior="repeat"
        android:indeterminateDrawable="@android:drawable/progress_medium_white"
        android:indeterminateDuration="3500"
        android:indeterminateOnly="true"
        android:maxHeight="48dip"
        android:maxWidth="48dip"
        android:minHeight="48dip"
        android:minWidth="48dip" 
	......
	..........当然这里还有很多view内置的默认属性定义。
/>

水平进度样式

设置style

要想ProgressBar显示水平进度很简单，只需要进行style的重新指定。

<ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

其中Widget.ProgressBar.Horizontal该套水平样式，是Android内置的。

同样的，我们可以在Android SDK的目录下，找到它的具体定义如下。

<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>

自定义progressDrawable

水平ProgressBar在界面上有三个部分组成，分别是”background“，”progress“和"secondaryProgress"。通过查看默认样式的progressDrawable，即@android:drawable/progress_horizontal；我们可以比较清晰看到这三个部分的定义，并从中了解一些ProgressBar的实现原理。

首先，progressDrawable必须是一个layer-list，对应到代码类是一个LayerDrawable。Layer是图层意思，图层是一层一层往上叠加的。这样ProgressBar的"secondaryProgress"才能显示在”背景之上“，以此类推~~。

其次，"secondaryProgress"与”progress“在这里都是clip（注意：这并不是说一定要是clip，ProgressBar已经代码中做了非clip到clip的转换），对应到代码类是ClipDrawable。ClipDrawable通过setLevel的level级别，来控制图形的显示区域。很多的进度加载显示效果都是用ClipDrawable实现的，这里不进行详细描述，有兴趣的大家可以去百度一下。

重点：通过模仿以下的ProgressBar定义，我们自定义出自己的drawable对象，重新指定progressBar的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">
        <shape>
            <corners android:radius="5dip" />

            <gradient
                android:angle="270"
                android:centerColor="#ff5a5d5a"
                android:centerY="0.75"
                android:endColor="#ff747674"
                android:startColor="#ff9d9e9d" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <gradient
                    android:angle="270"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:startColor="#80ffd300" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:angle="270"
                    android:centerColor="#ffffb600"
                    android:centerY="0.75"
                    android:endColor="#ffffcb00"
                    android:startColor="#ffffd300" />
            </shape>
        </clip>
    </item>

</layer-list>

progressDrawable高宽度与实现方式

如何设置高宽度

通过阅读源码，可以发现progressDrawable的高宽度是由padding，maxHeight，maxWidth决定的。本人在实际开发中经常使用maxHeight属性，来调整progressDrawable的高度。

最佳实现方式

progressDrawable的三个部分可以是不同类型的Drawable。本人推荐用<shape>（即ShapeDrawable）来定义这三个部分，这个比较简单。