(进度条是 自定义图片)
(进度条是 自定义颜色)
一.修改背景为图片。
1.我自己制作了两张图片(如下图),并将它们放到工程的 /res/drawable 目录下。
(背景图片 prgs_bg.png)
(进度图片 prgs_progress.png)
2.同时在 /res/drawable 目录下新建一个 barbgimg.xml 文件,内容如下:
- <?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/prgs_bg" />
- <!-- 设置进度条颜色图像资源 -->
- <item
- android:id="@android:id/progress"
- android:drawable="@drawable/prgs_progress" />
- </layer-list>
3.在布局文件中定义 ProgressBar 时,添加 android:progressDrawable="@drawable/barbgimg" 属性。
二.修改背景为其它颜色。
1. 在 /res/drawable 目录下,添加 barcolor.xml 文件,内容如下:
- <?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:startColor="#000000"
- android:endColor="#000000" />
- </shape>
- </item>
- <!-- 设置进度条颜色(白色) -->
- <item android:id="@android:id/progress" >
- <clip>
- <shape>
- <corners android:radius="5dip" />
- <gradient android:startColor="#ffffff"
- android:endColor="#ffffff" />
- </shape>
- </clip>
- </item>
- </layer-list>
2.在布局文件中定义 ProgressBar 时,添加 android:progressDrawable="@drawable/barcolor" 属性。
详细注解:
gradient 主体渐变 startColor开始颜色,endColor结束颜色 ,angle开始渐变的角度(值只能为90的倍数,0时为左到右渐变,90时为下到上渐变,依次逆时针类推);
stroke 边框 width 边框宽度,color 边框颜色;
corners 圆角 radius 半径,0为直角;
- <shape>
- <!-- 实心 -->
- <solid android:color="#ff9d77"/>
- <!-- 渐变 -->
- <gradient
- android:startColor="#ff8c00"
- android:endColor="#FFFFFF"
- android:angle="270" />
- <!-- 描边 -->
- <stroke
- android:width="2dp"
- android:color="#dcdcdc" />
- <!-- 圆角 -->
- <corners
- android:radius="2dp" />
- <!-- 边框 -->
- <padding
- android:left="10dp"
- android:top="10dp"
- android:right="10dp"
- android:bottom="10dp" />
- </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的背景,分别定义了按钮的一般状态、获得焦点状态和按下时的状态,具体代码如下:
- main.xml:
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="TestShapeButton"
- android:background="@drawable/button_selector"
- />
- button_selector.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <selector
- xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:state_pressed="true" >
- <shape>
- <!-- 渐变 -->
- <gradient
- android:startColor="#ff8c00"
- android:endColor="#FFFFFF"
- android:type="radial"
- android:gradientRadius="50" />
- <!-- 描边 -->
- <stroke
- android:width="2dp"
- android:color="#dcdcdc"
- android:dashWidth="5dp"
- android:dashGap="3dp" />
- <!-- 圆角 -->
- <corners
- android:radius="2dp" />
- <padding
- android:left="10dp"
- android:top="10dp"
- android:right="10dp"
- android:bottom="10dp" />
- </shape>
- </item>
- <item android:state_focused="true" >
- <shape>
- <gradient
- android:startColor="#ffc2b7"
- android:endColor="#ffc2b7"
- android:angle="270" />
- <stroke
- android:width="2dp"
- android:color="#dcdcdc" />
- <corners
- android:radius="2dp" />
- <padding
- android:left="10dp"
- android:top="10dp"
- android:right="10dp"
- android:bottom="10dp" />
- </shape>
- </item>
- <item>
- <shape>
- <solid android:color="#ff9d77"/>
- <stroke
- android:width="2dp"
- android:color="#fad3cf" />
- <corners
- android:topRightRadius="5dp"
- android:bottomLeftRadius="5dp"
- android:topLeftRadius="0dp"
- android:bottomRightRadius="0dp"
- />
- <padding
- android:left="10dp"
- android:top="10dp"
- android:right="10dp"
- android:bottom="10dp" />
- </shape>
- </item>
- </selector>
圆形进度条
1.定义一个图片资源文件
- <?xml version="1.0" encoding="utf-8"?>
- <rotate xmlns:android="http://schemas.android.com/apk/res/android"
- android:fromDegrees="0"
- android:pivotX="50%"
- android:pivotY="50%"
- android:toDegrees="360" >
- <shape
- android:innerRadiusRatio="3"
- android:shape="ring"
- android:thicknessRatio="8"
- android:useLevel="false" >
- <gradient
- android:centerColor="#FFFFFF"
- android:centerY="0.50"
- android:endColor="#FFFF00"
- android:startColor="#000000"
- android:type="sweep"
- android:useLevel="false" />
- </shape>
- </rotate>
2.定义布局文件:
- <ProgressBar
- android:id="@+id/color_progressBar2"
- android:indeterminateDrawable="@drawable/color_progress2"
- android:layout_height="wrap_content"
- android:layout_width="wrap_content"/>
3.效果: