深入了解Android进度条——ProgressBar，SeekBar和RatingBar

Android常用的进度条有ProgressBar，SeekBar和RatingBar。ProgressBar继承于View类，直接子类有AbsSeekBar和ContentLoadingProgressBar，而SeekBar和RatingBar又是AbsSeekBar的子类，因此ProgressBar是RatingBar，SeekBar的父类。

一、ProgressBar

Android系统自带的ProgressBar有两种样式：水平(Horizontal)和圆，其中圆的又包括Large,Normal,Small等

下面我以 水平和Small圆为例，深入了解其实现的方式，按照系统的实现方式就可以很easy的实现自定义的进度条！！有木有点小小的鸡冻。。lets go!。

1.水平样式的ProgressBar

效果图

（1）ProgressBar的样式（style）设定其实有两种方式 ：

<ProgressBar
 style="?android:attr/progressBarStyleHorizontal"或者style="@android:style/Widget.ProgressBar.Horizontal"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/progressBar" 
 android:layout_gravity="center_horizontal" 
 android:max="100"
 android:progress="20" 
 android:indeterminate="false"/>

关于?android:attr/和@android:style的对应关系如下

• style=”?android:attr/progressBarStyleHorizontal”
• style=”?android:attr/progressBarStyleInverse”
• style=”?android:attr/progressBarStyleLarge”
• style=”?android:attr/progressBarStyleLargeInverse”
• style=”?android:attr/progressBarStyleSmall”
• style=”?android:attr/progressBarStyleSmallInverse”

• Widget.ProgressBar.Horizontal
• Widget.ProgressBar.Small
• Widget.ProgressBar.Large
• Widget.ProgressBar.Inverse
• Widget.ProgressBar.Small.Inverse
• Widget.ProgressBar.Large.Inverse

（2）style/Widget.ProgressBar.Horizontal,样式定义的源码，此文件的位置（android-sdk\platforms\android-XX\data\res\values\）

 

<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,此属性是用来定义ProgressBar显示的样式的（水平还是圆），下面我们来看看它所对应的文件progress_horizontal 此文件的位置（android-sdk\platforms\android-XX\data\res\drawable）

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

这里面有3个item，分别为：background、secondProgress、progress；background就是ProgressBar的背景色，progress就是ProgressBar的当前进度；secondProgresss就是ProgressBar的缓存进度（比如在看网络视频时候都会有一个缓存的进度条和一个播放的进度，在这里缓存的进度就可以是android:secondaryProgress，而播放进度就是android:progress，有了secondProgress，可以很方便定制ProgressBar。）

（3）此时，如果让你自定义一个水平的ProgressBar，这下有点思路了吧！就是模仿系统的progress_horizontal 文件，新建一个自己的my_progress_horizontal 文件，之后设置ProgressBar的android:progressDrawable属性，如下

<ProgressBar
 android:progressDrawable="@drawable/my_progress_horizontal" 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/progressBar" 
 android:layout_gravity="center_horizontal" 
 android:max="100"
 android:progress="20" 
 android:indeterminate="false"/>

2.圆形的ProgressBar

效果图

同上的道理 我们直接定位到style/Widget.ProgressBar.Small,样式定义的源码，此文件的位置（android-sdk\platforms\android-XX\data\res\values\）

<style name="Widget.ProgressBar.Small">
 <item name="indeterminateDrawable">@drawable/progress_small_white</item>
 <item name="minWidth">16dip</item>
 <item name="maxWidth">16dip</item>
 <item name="minHeight">16dip</item>
 <item name="maxHeight">16dip</item>
 </style>

此时我们发现，它是通过指定indeterminateDrawable的属性值来实现的，而progress_small_white 就是一张简单的图片而已，并没有设置progressDrawable的属性值，

如果要自定义一个圆形的ProgressBar ，只需要设置ProgressBar 的indeterminateDrawable属性值就可以，它的值可以是一张图片，可以指定动画，也可以自定义颜色（shape）

例如：自定义一个动画progress_circle_loading.xml

<?xml version="1.0" encoding="UTF-8"?>
<animation-list android:oneshot="false" 
<item android:duration="100" android:drawable="@drawable/loading_1" />    
<item android:duration="100" android:drawable="@drawable/loading_2" /> 
<item android:duration="100" android:drawable="@drawable/loading_3" />  
<item android:duration="100" android:drawable="@drawable/loading_4" />   
</animation-list>

<style name="Widget.ProgressBar.Small">
 <item name="indeterminateDrawable">@drawable/progress_circle_loading</item>
 <item name="minWidth">16dip</item>
 <item name="maxWidth">16dip</item>
 <item name="minHeight">16dip</item>
 <item name="maxHeight">16dip</item>
 </style>

 

二、总结：至此，如何自定义ProgressBar应该明白了吧，SeekBar和RatingBar也是如此，说白了，就是通过修改进度条的属性值来实现自定义的，只要我们记住这几个属性值就可以了

1、ProgressBar的常用属性

android:max 设置该进度条的最大值
android:progress 设置该进度条的已完成进度值
android:progressDrawable 设置该进度条的轨道对应的Drawable对象（主要用来自定义ProgressBar水平样式））
android:indeterminate 该属性设为true，设置进度条不精确显示进度
android:indeterminateDrawable 设置绘制不显示进度的进度条的Drawable对象（主要用来自定义ProgressBar圆形样式））

 

2、SeekBar（有一个滑块）

除了继承ProgressBar的常用属性外还有如下常用属性

android:thumb：指定一个Drawable对象，该对象将作为自定义滑块，改变拖动条的滑块外观。

OnSeekBarChangeListener监听器。（监听器决定了它的只要应用场景，让程序能响应拖动条滑块位置的改变，如调节音量的进度条）

 

3、RatingBar（评分控件，应用场景不言而喻）

除了继承ProgressBar的常用属性外还有如下常用属性

android:rating 设置该星级评分条默认的星级
android:numStars 设置该星级评分条总共有多少个星级
android:stepSize 设置每次最少需要改变多少个星级
android:isIndicator 设置该星级评分条是否允许用户改变(true为不允许修改)

OnRatingBarChangeListener监听器。（为了让程序能响应星级评分的改变）

 

三、项目实战

了解以上内容后，趁热打铁，来点实战！！！

效果如下

暂不支持git图片，我来简单描述一下

第一个进度条（带飞机的那个）：实现可以手动拖拽飞机，并显示响应的进度

第二个进度条（带机器的那个）：实现橘黄色的云朵围绕机器人转圈的效果

ps很简单的效果，本人口才有限，自己脑补一下

不要立即向下看！！自己要思考一下！！！想想实现的思路！！这点很重要！很重要！很重要！

 

。

。

。

。

 

我来简单描述一下思路：

第一个：很明显需要自定义一个SeekBar，样式是水平的

1.设置SeekBar的android:progressDrawable属性值=自定义的文件，用来修改水平展示的样式（参考上文ProgressBar的progressDrawable属性值）

2.设置SeekBar的android:thumb属性值 = 一张飞机的图片，用来实现自定义的滑块！

 

第二个

1.首先 进度条由两个控件组成，ProgressBar+ImageView（机器人），控件是叠加在一起的（放在一个相对布局里）

2.自定义ProgressBar，样式圆形：设置ProgressBar的android:indeterminateDrawable属性=一个转圈的动画

项目源码：点击打开链接