改变Android ProgressBar样式颜色

来源:http://blog.csdn.net/dancelonely/article/details/11591221
先上两个效果图:

(进度条是 自定义图片

(进度条是 自定义颜色

一.修改背景为图片。

1.我自己制作了两张图片(如下图),并将它们放到工程的 /res/drawable 目录下。

(背景图片 prgs_bg.png)

(进度图片 prgs_progress.png)

2.同时在 /res/drawable 目录下新建一个 barbgimg.xml 文件,内容如下:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <!--  设置背景色图像资源  -->
  4. <item
  5.     android:id="@android:id/background"
  6.     android:drawable="@drawable/prgs_bg" />
  7. <!--  设置进度条颜色图像资源  -->
  8. <item
  9.     android:id="@android:id/progress"
  10.     android:drawable="@drawable/prgs_progress" />
  11. </layer-list>

3.在布局文件中定义 ProgressBar 时,添加 android:progressDrawable="@drawable/barbgimg" 属性。

 

二.修改背景为其它颜色。

1. 在 /res/drawable 目录下,添加 barcolor.xml 文件,内容如下:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3. <!--  设置背景色(黑色)  -->
  4. <item  android:id="@android:id/background" >
  5. <shape>
  6.     <corners android:radius="5dip" />
  7.         <gradient android:startColor="#000000"
  8.               android:endColor="#000000" />
  9. </shape>
  10. </item>
  11. <!--  设置进度条颜色(白色)  -->
  12. <item  android:id="@android:id/progress" >
  13. <clip>
  14.     <shape>
  15.         <corners android:radius="5dip" />
  16.     <gradient  android:startColor="#ffffff"
  17.            android:endColor="#ffffff" />
  18.     </shape>
  19. </clip>
  20. </item>
  21. </layer-list>

2.在布局文件中定义 ProgressBar 时,添加 android:progressDrawable="@drawable/barcolor" 属性。

详细注解:
gradient 主体渐变 startColor开始颜色,endColor结束颜色 ,angle开始渐变的角度(值只能为90的倍数,0时为左到右渐变,90时为下到上渐变,依次逆时针类推);

stroke 边框 width 边框宽度,color 边框颜色;

corners 圆角 radius 半径,0为直角;

  1. <shape>
  2.    <!-- 实心 -->
  3.    <solid android:color="#ff9d77"/>
  4.    <!-- 渐变 -->
  5.    <gradient
  6.        android:startColor="#ff8c00"
  7.        android:endColor="#FFFFFF"
  8.        android:angle="270" />
  9.    <!-- 描边 -->
  10.    <stroke
  11.        android:width="2dp"
  12.        android:color="#dcdcdc" />
  13.    <!-- 圆角 -->
  14.    <corners
  15.        android:radius="2dp" />
  16.    <!-- 边框 -->
  17.    <padding
  18.        android:left="10dp"
  19.        android:top="10dp"
  20.        android:right="10dp"
  21.        android:bottom="10dp" />
  22. </shape>

solid:实心,就是填充的意思
android:color指定填充的颜色
gradient:渐变
android:startColor和android:endColor分别为起始和结束颜色,ndroid:angle是渐变角度,必须为45的整数倍。
另外渐变默认的模式为android:type="linear",即线性渐变,可以指定渐变为径向渐变,android:type="radial",径向渐变需要指定半径android:gradientRadius="50"。

stroke:描边
android:width="2dp" 描边的宽度,android:color 描边的颜色。
我们还可以把描边弄成虚线的形式,设置方式为:
android:dashWidth="5dp"
android:dashGap="3dp"
其中android:dashWidth表示'-'这样一个横线的宽度,android:dashGap表示之间隔开的距离。

corners:圆角
android:radius为角的弧度,值越大角越圆。
我们还可以把四个角设定成不同的角度,方法为:
<corners
android:topRightRadius="20dp"    右上角
android:bottomLeftRadius="20dp"    右下角
android:topLeftRadius="1dp"    左上角
android:bottomRightRadius="0dp"    左下角
/>
这里有个地方需要注意,bottomLeftRadius是右下角,而不是左下角,这个有点郁闷,不过不影响使用,记得别搞错了就行。

padding:间隔
这个就不用多说了,XML布局文件中经常用到。

大体的就是这样,以下是一个使用的具体示例:用在Selector中作为Button的背景,分别定义了按钮的一般状态、获得焦点状态和按下时的状态,具体代码如下:

  1. main.xml:
  2. <Button
  3.     android:layout_width="wrap_content"
  4.     android:layout_height="wrap_content"
  5.     android:text="TestShapeButton"
  6.     android:background="@drawable/button_selector"
  7.     />
  8. button_selector.xml:
  9. <?xml version="1.0" encoding="utf-8"?>
  10. <selector
  11.     xmlns:android="http://schemas.android.com/apk/res/android">
  12.     <item android:state_pressed="true" >
  13.         <shape>
  14.             <!-- 渐变 -->
  15.             <gradient
  16.                 android:startColor="#ff8c00"
  17.                 android:endColor="#FFFFFF"
  18.                 android:type="radial"
  19.                 android:gradientRadius="50" />
  20.             <!-- 描边 -->
  21.             <stroke
  22.                 android:width="2dp"
  23.                 android:color="#dcdcdc"
  24.                 android:dashWidth="5dp"
  25.                 android:dashGap="3dp" />
  26.             <!-- 圆角 -->
  27.             <corners
  28.                 android:radius="2dp" />
  29.             <padding
  30.                 android:left="10dp"
  31.                 android:top="10dp"
  32.                 android:right="10dp"
  33.                 android:bottom="10dp" />
  34.         </shape>
  35.     </item>
  36.     <item android:state_focused="true" >
  37.         <shape>
  38.             <gradient
  39.                 android:startColor="#ffc2b7"
  40.                 android:endColor="#ffc2b7"
  41.                 android:angle="270" />
  42.             <stroke
  43.                 android:width="2dp"
  44.                 android:color="#dcdcdc" />
  45.             <corners
  46.                 android:radius="2dp" />
  47.             <padding
  48.                 android:left="10dp"
  49.                 android:top="10dp"
  50.                 android:right="10dp"
  51.                 android:bottom="10dp" />
  52.         </shape>
  53.     </item>
  54.     <item>
  55.         <shape>
  56.             <solid android:color="#ff9d77"/>
  57.             <stroke
  58.                 android:width="2dp"
  59.                 android:color="#fad3cf" />
  60.             <corners
  61.                 android:topRightRadius="5dp"
  62.                 android:bottomLeftRadius="5dp"
  63.                 android:topLeftRadius="0dp"
  64.                 android:bottomRightRadius="0dp"
  65.             />
  66.             <padding
  67.                 android:left="10dp"
  68.                 android:top="10dp"
  69.                 android:right="10dp"
  70.                 android:bottom="10dp" />
  71.         </shape>
  72.     </item>
  73. </selector>

圆形进度条

1.定义一个图片资源文件

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

2.定义布局文件:

  1. <ProgressBar
  2.         android:id="@+id/color_progressBar2"
  3.     android:indeterminateDrawable="@drawable/color_progress2"
  4.     android:layout_height="wrap_content"
  5.     android:layout_width="wrap_content"/>

3.效果:

 

发表评论