【ProgressBar】Android 自定义ProgressBar集锦

一：圆形进度条

（1）通过animation-list控制多占图片轮流显示（res/anim文件下下）：

<?xml version="1.0" encoding="UTF-8"?>
<animation-list android:oneshot="false"
xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:duration="150" android:drawable="@drawable/loading_01" />
  <item android:duration="150" android:drawable="@drawable/loading_02" />
  <item android:duration="150" android:drawable="@drawable/loading_03" />
  <item android:duration="150" android:drawable="@drawable/loading_04" />
  <item android:duration="150" android:drawable="@drawable/loading_05" />
  <item android:duration="150" android:drawable="@drawable/loading_06" />
  <item android:duration="150" android:drawable="@drawable/loading_07" />
</animation-list> 

在布局文件中定义一个ImageView,在代码中如下使用：

			emptyIv.setImageResource(R.anim.loading);
			AnimationDrawable animationDrawable = (AnimationDrawable) emptyIv.getDrawable();
			animationDrawable.start();

（2）通过rotate自定义颜色旋转显示（res/drawable）：

<?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="#1E90FF"
            android:startColor="#000000"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

下列属性只在android:shape=”ring”时使用：

android:innerRadiux
尺寸值，它用尺寸值或尺寸资源指定圆环内圆的半径（指中间的圆孔的半径）。

android:innerRadiusRatio
浮点值，它用圆环宽度（即外圆的直径）的占比来表示内圆的半径。例如，如果android:innerRadiusRatio=”5”，那么内圆半径就等于圆环宽度除以5。这个值会被android:innerRadius的值覆盖。默认是9。

android:thickness
尺寸值，它用一个尺寸值或尺寸资源来定义圆环的厚度（即外圆与内圆之间的宽度）。

android:thicknessRatio
浮点值。它用圆环宽度的占比来表示圆环的厚度。例如，如果android:thicknessRatio=”2”，那么厚度就等于圆环的宽度除以2。这个值会被android:innerRadius覆盖。默认值是3。也就是说这个值设置的越大圆环就越细了。

注意：一般在布局中设定了ProgressBar的宽高，所以这里定义形状时使用占比属性innerRaiusRatio和thicknessRatio来定义圆环内圆半径和圆环厚度！

android:useLevel
布尔值，如果这个形状要用于LevelListDrawable对象，那么就设置为true。通常应该设置为false或者让形状不可见。

（3）通过rotate旋转一张图片显示(res/drawable)：

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/spinner_black_16"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="360" />

第二、三种方式在布局文件中的使用方法都一样，如下（）：

<ProgressBar 
            android:id="@+id/loading_circle_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@android:style/Widget.ProgressBar"
            android:indeterminateDrawable="@drawable/loading_circle_progress"
            android:layout_centerInParent="true"
            android:indeterminateDuration="1000"/>

属性说明：style——样式设置（包括大小，水平进度条、圆形进度条）

     indeterminateDrawable——自定义图形展示

     indeterminateDuration——旋转速度

其他说明： 可以根据需要通过设置style来设置其大小！ 一般只有使用默认的ProgrressBar的时候采用。对于上述三种自定义的方式，建议修改直接修改图片大小，或者shape；

二：水平进度条

注意ID值：

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

    <item android:id="@android:id/background">
         <shape >
                <corners android:radius="5dip" />
                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#F5F5F5"
                    android:startColor="#BEBEBE" />
            </shape>
    </item>

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

        <clip >
            <shape >
                <corners android:radius="0dip" />
                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                   android:endColor="#165CBC"
                    android:startColor="#85B0E9" />
            </shape>
        </clip>
    </item>

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

        <clip >
		  	<shape >
	            <corners android:radius="5dip" />
	            <gradient
	                android:angle="270"
	                android:centerY="0.75"
	               android:endColor="#165CBC"
	                android:startColor="#85B0E9" />
	        </shape>
          
        </clip>
    </item>
</layer-list>

布局ProgressBar中的使用：

<ProgressBar 
            android:id="@+id/download_progressbar"
            android:layout_width="match_parent"
            android:layout_height="4dp"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:progressDrawable="@drawable/pk_horizontal_progressbar"
            android:max="100"
            android:progress="50"/>

注意：

官方文档对<clip/>标签的解释如下：

The default level is 0, which is fully clipped so the image is not visible. When the level is 10,000, the image is not clipped and completely visible.

如上所示，level缺省值为0，image不可见，所以，如果在<item android:id="@android:id/background">中使用<clip/>标签定义drawable，背景将会不可;

在<item android:id="@android:id/secondaryProgress">中使用<clip/>标签，通过设置progressbar的progress值可以对drawable中的image适量裁切，

达到progressbar显示进度条进度的效果。下面通过两个案例进行说明：

<1>

图片资源：ic_progressbar_normal.png和ic_progressbar_progress.png

res/drawable资源文件：

<?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/ic_star_normal"></item>
	<item android:id="@android:id/secondaryProgress" android:drawable="@drawable/ic_star_selected"></item>
</layer-list>

res/layout布局文件：( 需要根据图片大小合理控制宽高数值)

<ProgressBar 
        android:id="@+id/progressbar"
        android:layout_width="100dp"
        android:layout_height="32dp"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:progressDrawable="@drawable/custom_bar"
        android:max="100"
        android:progress="50"/>

效果图如下：

完美显示！

注意，最后一张图片显示不全！

注意，secondaryProgress中使用的图片下方有拉伸颜色线条！

可以在代码中设置ProgressBar的宽度，依据屏幕宽度和使用的图片资源的宽度(px像素值)控制ProgressBar的宽度，使其完整显示每一个图片资源！比如如下布局：

        <LinearLayout
            android:id="@+id/combination_bottom_progress_ll"
            android:layout_width="match_parent"
            android:layout_height="32dp"
            android:layout_above="@id/combination_button_rl"
            android:layout_marginBottom="16dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingLeft="8dp"
            android:paddingRight="8dp" >

            <ProgressBar
                android:id="@+id/combination_bottom_pbar"
                style="@android:style/Widget.ProgressBar.Horizontal"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="4"
                android:max="100"
                android:progress="72"
                android:progressDrawable="@drawable/custom_person_progressbar" />

            <TextView
                android:id="@+id/combination_bottom_progress_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:singleLine="true"
                android:text="@string/example_percent"
                android:textColor="@color/yellow_dark"
                android:textSize="18sp" />
        </LinearLayout>

图片资源使用的是宽度为48像素的图片，代码控制如下：

LayoutParams lParams = new LayoutParams(screenWidth/6*5-screenWidth/6*5%48, LayoutParams.MATCH_PARENT);
mBottomPbar.setLayoutParams(lParams);

即可完整显示每一个progressbar的图片！

注意：

因为图片存在适配问题，所以如果不想再代码中依据屏幕密度进行设置ProgressBar的宽度，最好将图片放置在drawable-xxhdpi文件夹下，然后在布局中设置ProgressBar的宽度，如图片为48px，需要显示5个的话，可以在布局中设置宽度为240px，这样不会存在因为图片的拉伸导致在布局中即使设置了240px也会显示不全的问题！

<2>

图片资源：ic_progressbar_normal.png

       ic_progressbar_progress.png

res/drawable资源文件：(background中可以不指定drawable，因为不可见！)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background" >
        <clip android:drawable="@drawable/ic_pk_loading_bg_al"/>
    </item>
	<item android:id="@android:id/progress" >
	    <clip android:drawable="@drawable/ic_pk_loading_progress_all"/>
    </item>
</layer-list>

res/layout布局文件：(宽高数值可以任意指定，图片都会完整显示，但是指定background为 ic_progressbar_progress.png)

<ProgressBar 
        android:id="@+id/progressbar"
        android:layout_width="150dp"
        android:layout_height="50dp"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:progressDrawable="@drawable/opus_custom_progressbar"
        android:max="100"
        android:progress="50"
        android:background="@drawable/ic_progressbar_progress"/>

效果图如下：

三：自定义View

参考地址：http://blog.csdn.net/xiaanming/article/details/10298163

附件：常用进度条图片

http://download.csdn.net/download/wenbitianxiafeng/7632697