自定义进度条Progressbar

 

 

2种进度条 水平和圆形

水平定义为：

  <ProgressBar android:id="@+id/pb"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

圆形定义为：3种不同大小

<ProgressBar style="@android:style/Widget.ProgressBar.Inverse"/>
<ProgressBar style="@android:style/Widget.ProgressBar.Large.Inverse"/>
<ProgressBar style="@android:style/Widget.ProgressBar.Small.Inverse"/>

  <ProgressBar 
        style="@android:style/Widget.ProgressBar.Small.Inverse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

查看android关于进度条的源代码如下：

<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="#ff9d9e9d" 
                    android:centerColor="#ff5a5d5a" 
                    android:centerY="0.75" 
                    android:endColor="#ff747674" 
                    android:angle="270" 
            /> 
        </shape> 
    </item> 
     
    <item android:id="@android:id/secondaryProgress"> 
        <clip> 
            <shape> 
                <corners android:radius="5dip" /> 
                <gradient 
                        android:startColor="#80ffd300" 
                        android:centerColor="#80ffb600" 
                        android:centerY="0.75" 
                        android:endColor="#a0ffcb00" 
                        android:angle="270" 
                /> 
            </shape> 
        </clip> 
    </item> 
     
    <item android:id="@android:id/progress"> 
        <clip> 
            <shape> 
                <corners android:radius="5dip" /> 
                <gradient 
                        android:startColor="#ffffd300" 
                        android:centerColor="#ffffb600" 
                        android:centerY="0.75" 
                        android:endColor="#ffffcb00" 
                        android:angle="270" 
                /> 
            </shape> 
        </clip> 
    </item> 
     
</layer-list>

开始改造

一、通过动画实现
定义res/anim/loading.xml如下： 

<?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> 

在layout文件中引用如下： 

<ProgressBar 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:indeterminate="false" 
android:indeterminateDrawable="@anim/loading" />

二、通过自定义颜色实现
定义res/drawable/dialog_style_xml_color.xml如下：
Xml代码

<?xml version="1.0" encoding="utf-8"?> 
<rotate xmlns:android="http://schemas.android.com/apk/res/android" 
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" 
android:toDegrees="360"> 
<shape android:shape="ring" android:innerRadiusRatio="3" 
android:thicknessRatio="8" android:useLevel="false"> 
<gradient android:type="sweep" android:useLevel="false" 
android:startColor="#FFFFFF" android:centerColor="#FFDC35" 
android:centerY="0.50" android:endColor="#CE0000" /> 
</shape> 
</rotate> 

在layout文件中引用如下：
Xml代码

<ProgressBar 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:indeterminate="false" 
android:indeterminateDrawable="@drawable/dialog_style_xml_color" />

三、使用一张图片进行自定义
定义res/drawable/dialog_style_xml_icon.xml如下：
Xml代码

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

在layout文件中引用如下：
Xml代码

<ProgressBar 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:indeterminate="false" 
android:indeterminateDrawable="@drawable/dialog_style_xml_icon" /> 

或者使用<animated-rotate/>旋转一张图片：
Xml代码

<ProgressBar 
style="@android:style/Widget.ProgressBar" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:indeterminateDrawable="@drawable/custom_progress_draw" 
android:indeterminate="false" /> 

custom_progress_draw.xml: 
circular就是一张转动效果的静态图片。

<?xml version="1.0" encoding="utf-8"?> 
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android" 
android:drawable="@drawable/circular" 
android:pivotX="50%" 
android:pivotY="50%" /> 

自定义个性垂直进度条

准备图片：

progress_vertical.xml: 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:id="@android:id/progress"  > 
        <clip android:clipOrientation="vertical" 
            android:gravity = "bottom"
            android:drawable="@drawable/y2"
            >         
        </clip> 
    </item>     
</layer-list>

引用：

    <ProgressBar android:id="@+id/pb"
        style="?android:attr/progressBarStyleHorizontal"
        android:background="@drawable/y1"
        android:progressDrawable="@drawable/progress_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

案例：

http://pan.baidu.com/s/1i3snQdB

自定义弧形进度条

http://pan.baidu.com/s/1o6nZV3G

链接: http://pan.baidu.com/s/1kTmelWb