前三种实现方式代码出自:
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:
- <?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:clipOrientation="horizontal"
- android:drawable="@drawable/loading_04"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_05"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_06"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_07"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_08"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_09"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_10"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_11"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_12"
- android:gravity="left"/>
- </item>
- </animation-list>
- <ProgressBar
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:indeterminateDrawable="@drawable/progressbar1"
- />
2 、效果图:
在上一篇有关自定义控件的博客里我们使用了一个RotateAnimation类来实现旋转效果 (http://blog.csdn.net/u012403246/article/details/41309161),其实,我们在这里也可以把一张图片,通过旋转,达到我们要的效果。本质上和上一种方法没多大区别。
我们只需要创建一个rotate的XML,对其属性进行一些简单的设置,然后加入我们要用的图片就可以了。
XML: