自定义进度条，progressBar 背景为.9图片

转自：http://www.maxiaoguo.com/shipin/348.html

解决了我的一个大问题，就是progressBar不能用.9的图片。谢谢。

原文：

今天学习给ProgressBar换个样式，先看效果图：(
q/ |( h$ h- }' d- Q& c



原理：在XML文件中分别定义进度条背景、第一进度颜色、第二进度颜色，然后在ProgressBar的android:progressDrawable属性应用即可。$
X2 S8 d1 i" }2 @ C1 {

先在drawable下建立progressbar_style.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="5.0dip" />

<gradient android:startColor="#656666" android:endColor="#dbdedf" android:angle="270.0" android:centerY="0.75" android:centerColor="#bbbbbc" />

</shape>

</item>

<item android:id="@android:id/secondaryProgress">

<clip>

<shape>

<corners android:radius="8.0dip" />

<gradient android:startColor="#e71a5e" android:endColor="#6c213a" android:angle="90.0" android:centerY="0.75" android:centerColor="#ac6079" />

</shape>

</clip>

</item>-

<item android:id="@android:id/progress">

<clip>

<shape>

<corners android:radius="8.0dip" />

<gradient android:startColor="#464647" android:endColor="#2d9ae7" android:angle="270.0" />

</shape>

</clip>

</item>

</layer-list>

复制代码
分别定义背景，第一进度颜色，第二进度颜色

gradient是渐变，前面已经说过,corners定义的是圆角9
F% ]: m2 k. W2 ]7 T1 N8 g+ u

布局中：

<ProgressBar android:id="@+id/progressBar1" android:layout_width="fill_parent" android:layout_height="wrap_content"'

style="?android:attr/progressBarStyleHorizontal" android:progressDrawable="@drawable/progressbar_style"

android:progress="50" android:max="100" android:secondaryProgress="70"

></ProgressBar>

复制代码

首先，了解 android 进度条的接口:

1.一个进度条背景 background (奶白色)

2.一个进度条的一级进度显示 progress (绿色)

3.一个进度条的二级进度显示 second progress (红色) (这种情况较少使用) l

效果如下图：




本文将以上三种重要的参数都实现自定义UI。

==============================================================

开始罗，像做菜一样，我们的原料有以下：

* 9.png 共3张，分别是::

进度条背景 my_progress_bg.9.png;

一级进度条 my_first_progress.9.png;-

二级进度条 my_second_progress.9.png
[align=left]* /drawable/my_progress.xml 配置文件[/align]

<!--?xml version="1.0" encoding="utf-8"?-->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/background">

<nine-patch android:src="@drawable/my_progress_bg">

</nine-patch>

</item>

<item android:id="@android:id/secondaryProgress">

<clip>

<nine-patch android:src="@drawable/my_second_progress">

</nine-patch>

</clip>

</item>

<item android:id="@android:id/progress">

<clip>

<nine-patch android:src="@drawable/my_first_progress">

</nine-patch>

</clip>

</item>

</layer-list>

复制代码

* /values/styles.xml

<!--?xml version="1.0" encoding="utf-8"?-->

<resources>

<!-- learn custom progressbar style -->

<style name="MyProgressBarStyleHorizontal">

<item name="android:indeterminateOnly">false</item>

<item name="android:progressDrawable">@drawable/my_progress</item>

<item name="android:minHeight">25dip</item>

<item name="android:maxHeight">25dip</item>

<item name="android:focusable">false</item>

</style>

</resources>

复制代码

B

好了，到此，我们的原料就都备齐了，下面在一个布局文件中测试一下：

<!--?xml version="1.0" encoding="utf-8"?-->

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">

<progressbar android:max="100" android:id="@+id/MyProgressBar" android:progress="20" style="@style/MyProgressBarStyleHorizontal" android:layout_width="200dip" android:layout_height="23dip" android:secondaryprogress="80" android:layout_gravity="center">

</progressbar></linearlayout>

复制代码
看起来很丑的原因：

1.没有圆角

2.没有透明度(