现在的位置: 首页 > 综合 > 正文

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

2013年08月18日 ⁄ 综合 ⁄ 共 3778字 ⁄ 字号 评论关闭

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

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

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

//在布局文件里的代码
   <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

这是在att.xml文件里的内容
   <declare-styleable>
	<attr name="progressBarStyleSmall" format="reference" />
   </declare-styleable> 
这是在theme.xml中的内容
   <style name="Theme">
	<item name="progressBarStyleSmall">@android:style/Widget.ProgressBar.Small</item>
   <style>

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

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

//进度条的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>

//引用的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到底是不是图片:在这里明确一下,可以是图片,当然也可以使其他的,请看下面的实现

定义实现:

<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" />

其实就是

android:indeterminateDrawable="@anim/loading"

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

实现的三种方式:

1.指向动画的实现方式

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

看代码:

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

每个item分别引用一张图片

引用就是这样

android:indeterminateDrawable="@anim/loading"

2.指向用颜色定义的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="#FFDC35"
            android:centerY="0.50"
            android:endColor="#CE0000"
            android:startColor="#FFFFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

引用的时候就是使用drawble了 

android:indeterminateDrawable="@drawable/style_xml_color"

当然这样也可以:

<?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文件:

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

引用一张图片

android:drawable="@drawable/dialog_progress_round2_res"

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

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

需要源码的同学,加入这个群:200956440,群共享里有源码。

抱歉!评论已关闭.