Android ProgressBar 详解 改变 ProgressBar 颜色

今天来说说 ProgressBar   这个东西,

之前一种是用的 项目里面 别人写好的直接用, 还没怎么细看这两个东西

ProgressBar 很简单就一进度条

默认情况下, 他是圆形的, 

但是它还有另一种 水平长条状的形态

同时还需要了解的有:

1. 水平形状的 ProgressBar 是有两个进度的 向我们看到 视频的精度条, 有一个是当前播放的,还有一个是下载的精度

2. ProgressBar 分为确定和不确定的两种, android:indeterminate 为true 表示不确定

3.系统的关于 ProgressBar的Style有:

• style="?android:attr/progressBarStyle" 
• style="?android:attr/progressBarStyleHorizontal" 
• style="?android:attr/progressBarStyleInverse" 
• style="?android:attr/progressBarStyleLarge" 
• style="?android:attr/progressBarStyleLargeInverse" 
• style="?android:attr/progressBarStyleSmall" 
• style="?android:attr/progressBarStyleSmallInverse" 
• style="?android:attr/progressBarStyleSmallTitle" 

设置ProgressBar的样式有两种方式:

1. 

[html]  view plain  copy

1. style="@style/StyleProgressBarMini"  

2. 

[html]  view plain  copy

1. style="?android:attr/progressBarStyleLargeInverse"  

上面两种方式都可以设置PogressBar 的属性

我们在自定ProgressBar的时候一般用的都是第一种

下面看看 Android默认的两种 ProgressBar的Style 

[java]  view plain  copy

1. <style name="Widget.ProgressBar">  
2.     <item name="indeterminateOnly">true</item>  
3.     <item name="indeterminateDrawable">@drawable/progress_medium_white</item>  
4.     <item name="indeterminateBehavior">repeat</item>  
5.     <item name="indeterminateDuration">3500</item>  
6.     <item name="minWidth">48dip</item>  
7.     <item name="maxWidth">48dip</item>  
8.     <item name="minHeight">48dip</item>  
9.     <item name="maxHeight">48dip</item>  
10.     <item name="mirrorForRtl">false</item>  
11. </style>  

上面是默认的 的Style 是圆形的而且是不确定

[java]  view plain  copy

1. <style name="Widget.ProgressBar.Horizontal">  
2.     <item name="indeterminateOnly">false</item>  
3.     <item name="progressDrawable">@drawable/progress_horizontal</item>  
4.     <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>  
5.     <item name="minHeight">20dip</item>  
6.     <item name="maxHeight">20dip</item>  
7.     <item name="mirrorForRtl">true</item>  
8. </style>  

这个是 水平的ProgressBar的 Style

progressDrawable 这个属性是 确定的进度条的属性

 indeterminateDrawable 这个事不确定的 进度条的熟悉 

我可以看看 系统默认的 @drawable/progress_horizontal

[html]  view plain  copy

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
2.   
3.     <item android:id="@android:id/background">  
4.         <shape>  
5.             <corners android:radius="5dip" />  
6.             <gradient  
7.                     android:startColor="#ff9d9e9d"  
8.                     android:centerColor="#ff5a5d5a"  
9.                     android:centerY="0.75"  
10.                     android:endColor="#ff747674"  
11.                     android:angle="270"  
12.             />  
13.         </shape>  
14.     </item>  
15.   
16.     <item android:id="@android:id/secondaryProgress">  
17.         <clip>  
18.             <shape>  
19.                 <corners android:radius="5dip" />  
20.                 <gradient  
21.                         android:startColor="#80ffd300"  
22.                         android:centerColor="#80ffb600"  
23.                         android:centerY="0.75"  
24.                         android:endColor="#a0ffcb00"  
25.                         android:angle="270"  
26.                 />  
27.             </shape>  
28.         </clip>  
29.     </item>  
30.   
31.     <item android:id="@android:id/progress">  
32.         <clip>  
33.             <shape>  
34.                 <corners android:radius="5dip" />  
35.                 <gradient  
36.                         android:startColor="#ffffd300"  
37.                         android:centerColor="#ffffb600"  
38.                         android:centerY="0.75"  
39.                         android:endColor="#ffffcb00"  
40.                         android:angle="270"  
41.                 />  
42.             </shape>  
43.         </clip>  
44.     </item>  
45.   
46. </layer-list>  

上面有3个 item background、secondProgress、progress，看名字就能知道其大概作用, 我可以把这份文件copy 一份 就可以自己随心的改动 样式了

下面一份是自己定义的  

[html]  view plain  copy

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
2.   
3.     <!-- background -->  
4.     <item  
5.         android:id="@android:id/background"  
6.         android:drawable="@drawable/progress_patch_green">  
7.     </item>  
8.     <!-- progress -->  
9.     <item android:id="@android:id/progress">  
10.         <clip>  
11.             <nine-patch android:src="@drawable/progress_patch_galy" />  
12.         </clip>  
13.     </item>  
14.     <!-- second progress -->  
15.   
16.     <item android:id="@android:id/secondaryProgress">  
17.         <clip>  
18.             <nine-patch android:src="@drawable/progresspatch_blue" />  
19.         </clip>  
20.     </item>  
21.   
22. </layer-list>  

需要注意的是 上面 .9 图的使用

关于 clip  nine-patch  这些标签, 现在自己页不是很熟悉, 以后会写一篇关于这个的文章

如果不用Drawable的画, 只是想单纯的使用颜色该如何处理呢?

尝试过这样: 

[java]  view plain  copy

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item  
3.         android:id="@android:id/background"  
4.         android:drawable="@color/white">  
5.     </item>  
6.     <item  
7.         android:id="@android:id/secondaryProgress"  
8.         android:drawable="@color/red">  
9.     </item>  
10.     <item  
11.         android:id="@android:id/progress"  
12.         android:drawable="@color/red">  
13.     </item>  
14. </layer-list>  

但是后面在设置 Progress的时候 不起作用, 看到的结果总是  

后面又尝试过 :

[java]  view plain  copy

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item  
3.         android:id="@android:id/background"  
4.         >  
5.         <shape>  
6.             <solid android:color="@color/white"></solid>  
7.         </shape>  
8.   
9.     </item>  
10.     <item  
11.         android:id="@android:id/secondaryProgress"  
12.         >  
13.         <shape>  
14.             <solid android:color="@color/red"></solid>  
15.         </shape>  
16.   
17.     </item>  
18.     <item  
19.         android:id="@android:id/progress"  
20.         >  
21.         <shape>  
22.             <solid android:color="@color/red"></solid>  
23.         </shape>  
24.   
25.     </item>  
26. </layer-list>  

还是不行 和上面一样的

后面又尝试了这样的:

[java]  view plain  copy

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item  
3.         android:id="@android:id/background"  
4.         >  
5.         <clip>  
6.             <shape>  
7.                 <solid android:color="@color/white"></solid>  
8.             </shape>  
9.   
10.         </clip>  
11.     </item>  
12.     <item  
13.         android:id="@android:id/secondaryProgress"  
14.         >  
15.         <clip>  
16.             <shape>  
17.                 <solid android:color="@color/red"></solid>  
18.             </shape>  
19.   
20.         </clip>  
21.     </item>  
22.     <item  
23.         android:id="@android:id/progress"  
24.         >  
25.         <clip>  
26.             <shape>  
27.                 <solid android:color="@color/red"></solid>  
28.             </shape>  
29.   
30.         </clip>  
31.     </item>  
32. </layer-list>  

这下好了能够正常显示了:

后面又尝试了这样的:

[java]  view plain  copy

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item android:id="@android:id/background">  
3.         <clip>  
4.             <shape>  
5.                 <gradient  
6.                     android:endColor="@color/white"  
7.                     android:startColor="@color/white"/>  
8.             </shape>  
9.         </clip>  
10.     </item>  
11.     <item android:id="@android:id/secondaryProgress">  
12.         <clip>  
13.             <shape>  
14.                 <gradient  
15.                     android:endColor="@color/colorPrimary"  
16.                     android:startColor="@color/colorPrimary"/>  
17.             </shape>  
18.         </clip>  
19.     </item>  
20.     <item android:id="@android:id/progress">  
21.         <clip>  
22.             <shape>  
23.                 <gradient  
24.                     android:endColor="@color/colorPrimary"  
25.                     android:startColor="@color/colorPrimary"/>  
26.             </shape>  
27.         </clip>  
28.     </item>  
29. </layer-list>  

也是ok 如图:

这是自己定义的ProgressBar的style 

[html]  view plain  copy

1. <style name="StyleProgressBarMini" parent="Widget.AppCompat.ProgressBar.Horizontal">  
2.   
3.     <item name="android:maxHeight">50dp</item>  
4.     <item name="android:minHeight">10dp</item>  
5.     <item name="android:indeterminateOnly">false</item>  
6.     <item name="android:indeterminateDrawable">  
7.         @android:drawable/progress_indeterminate_horizontal  
8.     </item>  
9.     <item name="android:progressDrawable">@drawable/shape_progressbar_mini</item>  
10.   
11. </style>  

具体使用如下:

[html]  view plain  copy

1. <ProgressBar  
2.     android:id="@+id/pb_progressbar"  
3.     style="@style/StyleProgressBarMini"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:layout_margin="30dp"  
7.     android:max="100"  
8.     android:progress="50"/>  

ok 下面说说 自定义圆形的

圆形的主要修改   android:indeterminateDrawable 属性

第一步，在drawable文件夹下新建：progressbar_circle_1.xml，如下：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:drawable="@drawable/loading" //自定义的菊花图片  
4.     android:fromDegrees="0"  
5.     android:pivotX="50%"  
6.     android:pivotY="50%"  
7.     android:toDegrees="360" >  
8.   
9. </rotate>  

第二步，在Style中定义mProgress_circle，如下：

[html]  view plain  copy

1. <style name="mProgress_circle">  
2.     <item name="android:indeterminateDrawable">@drawable/progressbar_circle_1</item>  
3.     <item name="android:minWidth">25dp</item>  
4.     <item name="android:minHeight">25dp</item>  
5.     <item name="android:maxWidth">60dp</item>  
6.     <item name="android:maxHeight">60dp</item>  
7. </style>  

支持大小自己随意定，别失真就好

第三步，组件中引用，如下

[html]  view plain  copy

1. <ProgressBar  
2.     android:id="@+id/progressBar2"  
3.     style="@style/mProgress_circle"  
4.     android:layout_gravity="center_vertical"  
5.     android:layout_width="match_parent"  
6.     android:indeterminateDuration="1200"  
7.     android:layout_height="wrap_content" />  

上面是通过一张图片填充 android:indeterminateDrawable，我们也可以定义一个 动画或者自定义 颜色（shape）来实现，跟图片的用法一样：

定义动画 progress_circle_loading,xml：

[html]  view plain  copy

1. <animation-list android:oneshot="false"  
2.   xmlns:android="http://schemas.android.com/apk/res/android">  
3.   <item android:duration="100" android:drawable="@drawable/loading_1" />  
4.   <item android:duration="100" android:drawable="@drawable/loading_2" />  
5.   <item android:duration="100" android:drawable="@drawable/loading_3" />  
6.   <item android:duration="100" android:drawable="@drawable/loading_4" />  
7.   <item android:duration="100" android:drawable="@drawable/loading_5" />  
8.   <item android:duration="100" android:drawable="@drawable/loading_6" />  
9. </animation-list>  

style的indeterminateDrawable引入：

[html]  view plain  copy

1. <item name="android:indeterminateDrawable">@drawable/progress_circle_loading</item>  

定义shape颜色 progress_circle_shape.xml

[html]  view plain  copy

1. <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
2.   android:fromDegrees="0"  
3.   android:pivotX="50%"  
4.   android:pivotY="50%"  
5.   android:toDegrees="360" >  
6.   <shape  
7.     android:innerRadiusRatio="3"  
8.     android:shape="ring"  
9.     android:thicknessRatio="8"  
10.     android:useLevel="false" >  
11.     <gradient  
12.       android:centerColor="#FFFFFF"  
13.       android:centerY="0.50"  
14.       android:endColor="#1E90FF"  
15.       android:startColor="#000000"  
16.       android:type="sweep"  
17.       android:useLevel="false" />  
18.   </shape>  
19. </rotate>  

style的indeterminateDrawable引入：

[html]  view plain  copy

1. <item name="android:indeterminateDrawable">@drawable/progress_circle_shape</item>  

关于seekBar 的自定义和ProgressBar的基本一致

ok  老实说, 上面的关于 gradient shape 这新的知识不是很熟悉, 以后要专门写一篇关于这个的

参考了以下文章

http://blog.csdn.net/mad1989/article/details/38042875