Android自定义控件：进度条的四种实现方式（Progress Wheel的解析）（源码 + Demo）

本文链接：https://blog.youkuaiyun.com/u012403246/article/details/41477427

本文介绍了Android自定义控件Progress Wheel的四种实现方式，包括使用animation-list、RotateAnimation、ClipDrawable和自定义View。详细解析了每种方法的原理和代码实现，适合Android初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Progress Wheel为GitHub热门项目，作者是：Todd-Davies，项目地址：

https://github.com/Todd-Davies/ProgressWheel

前三种实现方式代码出自：

http://stormzhang.com/openandroid/2013/11/15/android-custom-loading/

（源码在最后）

最近一直在学习自定义控件，搜了许多大牛们Blog里分享的小教程，也上GitHub找了一些类似的控件进行学习。发现读起来都不太好懂，就想写这么一篇东西作为学习笔记吧。

一、控件介绍：

进度条在App中非常常见，例如下载进度、加载图片、打开文章、打开网页等等……都需要这么一个效果让用户知道我们的App正在读取，以构造良好的交互。如果没有这样一个效果的话，用户没法知道东西有没有下载好、图片加载了没有、文章打开了没……会让用户很不爽。基于这样的情景我们的UI设计师们创造了这样一个控件。

二、这篇文章会涉及的知识点：

跟我一样刚入门的Android菜鸟们，我推荐大家先了解一下这些知识点再往下看。这些知识点我也会推荐一些博客给大家看看，更推荐大家看文档里的解释，当然大牛们可以直接无视……

1、ClipDrawable类：能够对一个drawable类进行剪切操作（即只显示某一部分的区域，另一部分隐藏），显示多大的区域由level控制（level取值是0～10000）

【博客：http://blog.youkuaiyun.com/lonelyroamer/article/details/8244777】、没文档的可以在这看【http://www.apihome.cn/api/android/ClipDrawable.html】

2、自定义View：guolin大神的深入学习View四部曲

【Android LayoutInflater原理分析，带你一步步深入了解View——http://blog.youkuaiyun.com/guolin_blog/article/details/12921889】

【Android视图绘制流程完全解析，带你一步步深入了解View——http://blog.youkuaiyun.com/guolin_blog/article/details/16330267】

【Android视图状态及重绘流程分析，带你一步步深入了解View——http://blog.youkuaiyun.com/guolin_blog/article/details/17045157】

【Android自定义View的实现方法，带你一步步深入了解View——http://blog.youkuaiyun.com/guolin_blog/article/details/17357967】

3、没看过我写的：Android自定义控件——老版优酷三级菜单的话，或许需要看看这个：

【RotateAnimation详解——http://blog.youkuaiyun.com/u012403246/article/details/41415799】

三、Android上的实现方式：

（前三种方法比较简单，第四种方法是GitHub项目的解析，对前三种没兴趣可以直接跳到后边……）

1、效果图：

将进度条的变换过程分解为一帧一帧的图片，将这些一帧一帧的图片连起来构成一个动画。常用于：手机阅读网页、逛社区时，加载图片、文章等不需要清楚知道加载进度，但是需要知道是否进行加载的情景。

这种方法实现可以通过创建一个animation-list的XML文件，然后给系统API提供的ProgressBar的indeterminateDrawable属性就可以了。（这个属性应该是类似于设置一个动画吧……）

XML：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
    <item android:duration="150" >
        <clip 
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_01"
            android:gravity="left"/>
    </item>
    <item android:duration="150" >
        <clip 
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_02"
            android:gravity="left"/>
    </item>
    <item android:duration="150" >
        <clip 
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_03"
            android:gravity="left"/>
    </item>
    <item android:duration="150" >
        <clip 
            android:clipOri