Android自定义控件：进度条的四种实现方式

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

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

（源码下载）http://download.csdn.net/detail/chaoyu168/9616035

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

一、控件介绍：

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

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

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

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

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

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

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

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

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

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

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

【RotateAnimation详解——http://blog.csdn.net/u012403246/article/details/41415799】

三、Android上的实现方式：

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

1、效果图：

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

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

XML：

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>    
2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"    
3.     android:oneshot="false" >    
4.     <item android:duration="150" >    
5.         <clip     
6.             android:clipOrientation="horizontal"    
7.             android:drawable="@drawable/loading_01"    
8.             android:gravity="left"/>    
9.     </item>    
10.     <item android:duration="150" >    
11.         <clip     
12.             android:clipOrientation="horizontal"    
13.             android:drawable="@drawable/loading_02"    
14.             android:gravity="left"/>    
15.     </item>    
16.     <item android:duration="150" >    
17.         <clip     
18.             android:clipOrientation="horizontal"    
19.             android:drawable="@drawable/loading_03"    
20.             android:gravity="left"/>    
21.     </item>    
22.     <item android:duration="150" >    
23.         <clip     
24.             android:clipOrientation="horizontal"    
25.             android:drawable="@drawable/loading_04"    
26.             android:gravity="left"/>    
27.     </item>    
28.     <item android:duration="150" >    
29.         <clip     
30.             android:clipOrientation="horizontal"    
31.             android:drawable="@drawable/loading_05"    
32.             android:gravity="left"/>    
33.     </item>    
34.     <item android:duration="150" >    
35.         <clip     
36.             android:clipOrientation="horizontal"    
37.             android:drawable="@drawable/loading_06"    
38.             android:gravity="left"/>    
39.     </item>    
40.     <item android:duration="150" >    
41.         <clip     
42.             android:clipOrientation="horizontal"    
43.             android:drawable="@drawable/loading_07"    
44.             android:gravity="left"/>    
45.     </item>    
46.     <item android:duration="150" >    
47.         <clip     
48.             android:clipOrientation="horizontal"    
49.             android:drawable="@drawable/loading_08"    
50.             android:gravity="left"/>    
51.     </item>    
52.     <item android:duration="150" >    
53.         <clip     
54.             android:clipOrientation="horizontal"    
55.             android:drawable="@drawable/loading_09"    
56.             android:gravity="left"/>    
57.     </item>    
58.     <item android:duration="150" >    
59.         <clip     
60.             android:clipOrientation="horizontal"    
61.             android:drawable="@drawable/loading_10"    
62.             android:gravity="left"/>    
63.     </item>    
64.     <item android:duration="150" >    
65.         <clip     
66.             android:clipOrientation="horizontal"    
67.             android:drawable="@drawable/loading_11"    
68.             android:gravity="left"/>    
69.     </item>    
70.     <item android:duration="150" >    
71.         <clip     
72.             android:clipOrientation="horizontal"    
73.             android:drawable="@drawable/loading_12"    
74.             android:gravity="left"/>    
75.     </item>    
76.     
77. </animation-list>  

[html]  view plain  copy

 

1. <ProgressBar     
2.     android:layout_width="wrap_content"    
3.     android:layout_height="wrap_content"    
4.     android:indeterminateDrawable="@drawable/progressbar1"    
5.     />  

2 、效果图：

在上一篇有关自定义控件的博客里我们使用了一个RotateAnimation类来实现旋转效果 （http://blog.csdn.net/u012403246/article/details/41309161），其实，我们在这里也可以把一张图片，通过旋转，达到我们要的效果。本质上和上一种方法没多大区别。

我们只需要创建一个rotate的XML，对其属性进行一些简单的设置，然后加入我们要用的图片就可以了。

XML：

[html]  view plain