自定义圆形进度条的实现方式

如何自定义圆形进度条哪，也就是替换一下进度条的图片而已。

先分析一下，系统对进度条如何定义的：

咱们一般情况下载布局文件中这么书写：

[html] view
plaincopy

//在布局文件里的代码  

   <ProgressBar  

        android:id="@+id/progressBar1"  

        style="?android:attr/progressBarStyleSmall"  

        android:layout_width="wrap_content"  

        android:layout_height="wrap_content" />  

[html] view
plaincopy

style="?android:attr/progressBarStyleSmall" 这个引用的是样式  

[html] view
plaincopy

这是在att.xml文件里的内容  

   <declare-styleable>  

    <attr name="progressBarStyleSmall" format="reference" />  

   </declare-styleable>   

[html] view
plaincopy

这是在theme.xml中的内容  

   <style name="Theme">  

    <item name="progressBarStyleSmall">@android:style/Widget.ProgressBar.Small</item>  

   <style>  

从上面可以看出，进度条的样式放在了系统的主题样式里面的，做为系统样式的一部分。

再看看这个样式文件如何定义的：

[html] view
plaincopy

//进度条的style  

   //在styles.xml文件中的内容  

   <style name="Widget.ProgressBar.Small">  

        <item name="android:indeterminateDrawable">@android:drawable/progress_small_white</item>  

        <item name="android:minWidth">16dip</item>  

        <item name="android:maxWidth">16dip</item>  

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

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

    </style>  

看到这里就知道，引用的图片在这里：<item name="android:indeterminateDrawable">@android:drawable/progress_small_white</item>

[html] view
plaincopy

//引用的drawble   

    //progress_small_white.xml  

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

//放到drawable文件夹下了  

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"  

    android:drawable="@drawable/spinner_white_16"  

    android:pivotX="50%"  

    android:pivotY="50%"  

    android:framesCount="12"  

    android:frameDuration="100" />  

 //然后就是这张图片了  

spinner_white_16，这种图片没在源码中找到  

注意：spinner_white_16不一定就是一张纯的图片，有可能是动画。

从下面的实现方式就能知道spinner_white_16到底是不是图片：在这里明确一下，可以是图片，当然也可以使其他的，请看下面的实现

定义实现：

[html] view
plaincopy

<ProgressBar android:id="@+id/loading_process_dialog_progressBar"  

        android:layout_width="wrap_content" android:layout_height="wrap_content"  

        android:indeterminate="false" android:indeterminateDrawable="@anim/loading" />  

其实就是

[html] view
plaincopy

android:indeterminateDrawable="@anim/loading"  

把这个属性指向的资源改为你想要的就可以。

实现的三种方式：

1.指向动画的实现方式

熊猫阅读就是利用这种方式实现的：

看代码：

在res资源文件夹下的anim文件夹下创建一个动画文件：

内容如下：比如名字命名为loading.xml

[html] view
plaincopy

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

每个item分别引用一张图片

引用就是这样

[html] view
plaincopy

android:indeterminateDrawable="@anim/loading"  

2.指向用颜色定义的drawable资源：

[html] view
plaincopy

<?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="#FFDC35"  

            android:centerY="0.50"  

            android:endColor="#CE0000"  

            android:startColor="#FFFFFF"  

            android:type="sweep"  

            android:useLevel="false" />  

    </shape>  

  

</rotate>  

引用的时候就是使用drawble了 

[html] view
plaincopy

android:indeterminateDrawable="@drawable/style_xml_color"  

当然这样也可以：

[html] view
plaincopy

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

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"  

    android:drawable="@drawable/spinner_16"  

    android:pivotX="50%"  

    android:pivotY="50%"  

  />  

 

3.引用一个图片

drawable文件：

[html] view
plaincopy

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

            android:fromDegrees="0.0"  

            android:pivotX="50.0%"  

            android:pivotY="50.0%"  

            android:toDegrees="360.0" />  

    </item>  

  

</layer-list>  

引用一张图片

[html] view
plaincopy

android:drawable="@drawable/dialog_progress_round2_res"  

最后总结一下，其实引用的里面，都有旋转动画，如果只引用一张图片的话，他不会旋转的。有兴趣的朋友自己可以试一下。也可以看看源码如何实现的。有什么建议请留言。

使用drawable和第二种方式一样。