Android自定义ProgressBar的样式

ProgressBar简介

ProgressBar是Android开发中比较常用的一个UI控件，主要是用来显示任务执行的进度的，以及向用户表明任务正在执行中。
Android系统提供的ProgressBar的的样式主要分为两种：水平的进度条，环形进度条。
水平的进度条可以显示任务执行的进度(百分比),而环形进度条不能显示任务执行的进度，环形进度条只是用来向用户表明任务正在执行中。

自定义ProgressBar的样式

1.自定义水平进度条的样式

自定义水平进度条的样式是在系统提供的样式的基础上，通过自定义Drawable资源文件作为progressDrawable的属性值的方式，来实现水平进度条的自定义样式的。
如下：
在res/drawable目录下新建一个drawable资源文件，progress.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="@color/progress_bg" />
    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@color/secondary_progress"
            android:scaleWidth="100%" />
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@color/progress"
            android:scaleWidth="100%" />
    </item>
</layer-list>

在布局文件中使用:

<ProgressBar
       android:id="@+id/progressBar"
       style="@android:style/Widget.ProgressBar.Horizontal"
       android:layout_width="match_parent"
       android:layout_height="10dp"
       android:progressDrawable="@drawable/progress" />

第一个item定义的是进度条的背景，第二个item定义的是secondaryProgress的颜色,第三个item定义的是进度progress的颜色

注意：

定义progressDrawable的时候，必须要按照这个顺序(如果没有secondaryProgress可以去掉)来定义，并且secondaryProgress和progress定义drawable时都必须用< scale/>子项，否则进度条会一直显示满的状态。
在第代码中设置了进度:

progressBar=(ProgressBar) findViewById(R.id.progressBar);
progressBar.setProgress(40);
progressBar.setSecondaryProgress(60);

显示效果如下：

2.自定义环形进度条的样式
2.1通过自定义Drawable资源文件作为indeterminateDrawable的属性值，来实现自定义环形进度条的样式。
在res/drawable目录下新建一个Drawable资源文件 progress1.xml

<?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="20"
        android:useLevel="false">
        <gradient
            android:centerColor="#FFDC35"
            android:centerY="0.50"
            android:endColor="#CE0000"
            android:startColor="#FFFFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

在布局文件中使用:

 <ProgressBar
        style="@android:style/Widget.ProgressBar.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:indeterminateDrawable="@drawable/progress1" />

显示效果如下：

也可以使用一张图片来自定义环形进度条的样式:
在res/drawable目录下新建一个Drawable资源文件 progress2.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:drawable="@drawable/progress_icon"
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="360"></rotate>
    </item>
</layer-list>

在布局文件中使用:

<ProgressBar
        style="@android:style/Widget.ProgressBar.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:indeterminateDrawable="@drawable/progress2" />

显示效果如下：

缺陷：

但是有一个缺点就是，这两种定义环形进度条的方式，都不能控制进度条旋转的速度。

3.使用动画实现环形进度条的效果
环形进度条无非就是一个加载动画，完全可以用一个动画来实现加载动画效果。
在res目录中新建一个anim目录，在anim目录中定义一个补间动画load_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <rotate
        android:duration="1500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:toDegrees="359"></rotate>
</set>

这里定义这个旋转动画要注意三点，

一个是android:interpolator=”@android:anim/linear_interpolator”
一个是android:toDegrees=”359” 不是360
一个是android:repeatCount=”-1”
这三点共同实现了无限旋转，没有停顿。

在布局文件定义一个ImageView,用来显示动画。

<ImageView
        android:id="@+id/progressBar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:src="@drawable/progress_icon"></ImageView>

在程序中启动动画：

progressBar = (ImageView) findViewById(R.id.progressBar);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.load_anim);
progressBar.startAnimation(animation);

这样也同样实现了一个加载动画的效果。
显示效果如下：