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

柔情只为你懂 2022-09-18 10:54 261阅读 0赞

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

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

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

**\[html\]**  [view plain][] [copy][view plain]

1.  //在布局文件里的代码  
2.     **<****ProgressBar**  
3.          android:id="@+id/progressBar1"  
4.          style="?android:attr/progressBarStyleSmall"  
5.          android:layout\_width="wrap\_content"  
6.          android:layout\_height="wrap\_content" **/>**

**\[html\]**  [view plain][] [copy][view plain]

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

**\[html\]**  [view plain][] [copy][view plain]

1.  这是在att.xml文件里的内容  
2.     **<****declare-styleable****>**  
3.      **<****attr** name="progressBarStyleSmall" format="reference" **/>**  
4.     **</****declare-styleable****>**

**\[html\]**  [view plain][] [copy][view plain]

1.  这是在theme.xml中的内容  
2.     **<****style** name="Theme"**>**  
3.      **<****item** name="progressBarStyleSmall"**>**@android:style/Widget.ProgressBar.Small**</****item****>**  
4.     **<****style****>**

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

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

**\[html\]**  [view plain][] [copy][view plain]

1.  //进度条的style  
2.     //在styles.xml文件中的内容  
3.     **<****style** name="Widget.ProgressBar.Small"**>**  
4.          **<****item** name="android:indeterminateDrawable"**>**@android:drawable/progress\_small\_white**</****item****>**  
5.          **<****item** name="android:minWidth"**>**16dip**</****item****>**  
6.          **<****item** name="android:maxWidth"**>**16dip**</****item****>**  
7.          **<****item** name="android:minHeight"**>**16dip**</****item****>**  
8.          **<****item** name="android:maxHeight"**>**16dip**</****item****>**  
9.      **</****style****>**

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

**\[html\]**  [view plain][] [copy][view plain]

1.  //引用的drawble   
2.      //progress\_small\_white.xml  
3.      **<?****xml** version="1.0" encoding="utf-8"**?>**  
4.  //放到drawable文件夹下了  
5.  **<****animated-rotate** xmlns:android="http://schemas.android.com/apk/res/android"  
6.      android:drawable="@drawable/spinner\_white\_16"  
7.      android:pivotX="50%"  
8.      android:pivotY="50%"  
9.      android:framesCount="12"  
10.     android:frameDuration="100" **/>**  
11.  //然后就是这张图片了  
12. spinner\_white\_16，这种图片没在源码中找到

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

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

定义实现：

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****ProgressBar** android:id="@+id/loading\_process\_dialog\_progressBar"  
2.          android:layout\_width="wrap\_content" android:layout\_height="wrap\_content"  
3.          android:indeterminate="false" android:indeterminateDrawable="@anim/loading" **/>**

其实就是

**\[html\]**  [view plain][] [copy][view plain]

1.  android:indeterminateDrawable="@anim/loading"

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

实现的三种方式：

1.指向动画的实现方式

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

看代码：

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

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

**\[html\]**  [view plain][] [copy][view plain]

1.  **<?****xml** version="1.0" encoding="UTF-8"**?>**  
2.  **<****animation-list** android:oneshot="false"  
3.      xmlns:android="http://schemas.android.com/apk/res/android"**>**  
4.      **<****item** android:duration="150" android:drawable="@drawable/loading\_01" **/>**  
5.      **<****item** android:duration="150" android:drawable="@drawable/loading\_02" **/>**  
6.      **<****item** android:duration="150" android:drawable="@drawable/loading\_03" **/>**  
7.      **<****item** android:duration="150" android:drawable="@drawable/loading\_04" **/>**  
8.      **<****item** android:duration="150" android:drawable="@drawable/loading\_05" **/>**  
9.      **<****item** android:duration="150" android:drawable="@drawable/loading\_06" **/>**  
10.     **<****item** android:duration="150" android:drawable="@drawable/loading\_07" **/>**  
11. **</****animation-list****>**

每个item分别引用一张图片

引用就是这样

**\[html\]**  [view plain][] [copy][view plain]

1.  android:indeterminateDrawable="@anim/loading"

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

**\[html\]**  [view plain][] [copy][view plain]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.  **<****rotate** xmlns:android="http://schemas.android.com/apk/res/android"  
3.      android:fromDegrees="0"  
4.      android:pivotX="50%"  
5.      android:pivotY="50%"  
6.      android:toDegrees="360" **>**  
7.    
8.      **<****shape**  
9.          android:innerRadiusRatio="3"  
10.         android:shape="ring"  
11.         android:thicknessRatio="8"  
12.         android:useLevel="false" **>**  
13.         **<****gradient**  
14.             android:centerColor="\#FFDC35"  
15.             android:centerY="0.50"  
16.             android:endColor="\#CE0000"  
17.             android:startColor="\#FFFFFF"  
18.             android:type="sweep"  
19.             android:useLevel="false" **/>**  
20.     **</****shape****>**  
21.   
22. **</****rotate****>**

引用的时候就是使用drawble了

**\[html\]**  [view plain][] [copy][view plain]

1.  android:indeterminateDrawable="@drawable/style\_xml\_color"

当然这样也可以：

**\[html\]**  [view plain][] [copy][view plain]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.  **<****animated-rotate** xmlns:android="http://schemas.android.com/apk/res/android"  
3.      android:drawable="@drawable/spinner\_16"  
4.      android:pivotX="50%"  
5.      android:pivotY="50%"  
6.    **/>**

3.引用一个图片

drawable文件：

**\[html\]**  [view plain][] [copy][view plain]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.     
3.  **<****layer-list** xmlns:android="http://schemas.android.com/apk/res/android" **>**  
4.    
5.      **<****item****>**  
6.          **<****rotate**  
7.              android:drawable="@drawable/dialog\_progress\_round2\_res"  
8.              android:fromDegrees="0.0"  
9.              android:pivotX="50.0%"  
10.             android:pivotY="50.0%"  
11.             android:toDegrees="360.0" **/>**  
12.     **</****item****>**  
13.   
14. **</****layer-list****>**

引用一张图片

**\[html\]**  [view plain][] [copy][view plain]

1.  android:drawable="@drawable/dialog\_progress\_round2\_res"

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

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

[view plain]: http://blog.csdn.net/com360/article/details/7662565#