Android Custom Loading

偏执的太偏执、 2022-09-18 10:54 13阅读 0赞

Android开发中我们经常会用到各种各样的loading，于是自己总结了常用的loading并分享出来。首先来看下具体效果图：

完整源码参见：[stormzhang / CustomLoading][stormzhang _ CustomLoading]

![snap.png][]

下面主要说下代码的关键部分：

## 1. Frame Loading ##

第一个就是在app中常见的loading效果，主要是用帧动画实现的，所谓帧动画就是一组组图片顺序播放； 下面直接看下代码实现:

首先在drawable文件夹下建立一个xml文件，内容如下：

frame\_loading.xml

<table style="margin:0px; padding:0px; border:0px; font-family:inherit; font-style:inherit; font-variant:inherit; line-height:inherit; font-size:18px; vertical-align:baseline; border-collapse:collapse; border-spacing:0px"> 
 <tbody style="margin:0px; padding:0px; border:0px; font-family:inherit; font-style:inherit; font-variant:inherit; line-height:inherit; vertical-align:baseline"> 
 <tr style="margin:0px; padding:0px; border:0px; font-family:inherit; font-style:inherit; font-variant:inherit; line-height:inherit; vertical-align:baseline"> 
 <td style="margin:0px; padding:0px; border:0px; font-family:inherit; font-style:inherit; font-variant:inherit; line-height:inherit; font-size:18px; vertical-align:middle"> <pre style="">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
</pre> </td> 
 <td style="margin:0px; padding:0px; border:0px; font-family:inherit; font-style:inherit; font-variant:inherit; line-height:inherit; font-size:18px; vertical-align:middle; width:749px"> <pre style=""><code style="margin:0px; border:0px; font-style:inherit; font-variant:inherit; line-height:1.45em; vertical-align:baseline; overflow-y:hidden; display:block; overflow-x:auto; background-color:rgb(0,0,0); padding:0.8em!important; font-family:Menlo,Monaco,'Andale Mono','lucida console','Courier New',monospace!important">&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" &gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_01" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_02" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_03" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_04" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_05" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_06" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_07" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_08" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_09" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_10" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_11" android:gravity="left" /&gt; &lt;/item&gt; &lt;item android:duration="150"&gt; &lt;clip android:clipOrientation="horizontal" android:drawable="@drawable/loading_12" android:gravity="left" /&gt; &lt;/item&gt; &lt;/animation-list&gt; </code></pre> </td> 
 </tr> 
 </tbody> 
</table>

注意上面item下得clip标签，这个是必须的，不然不同的屏幕尺寸适配会有问题。然后在布局文件里这样调用：

## 2. Rotate Loading ##

第二种主要是用rotate动画来实现的，具体代码如下：

rotate\_loading.xml

然后调用方法和第一种一样。

## 3. Clip Loading ##

第三种loading的是自定义了一个组件，主要用到了ClipDrawable的setLevel()方法，代码如下：

<table style="margin:0px; padding:0px; border:0px; font-family:inherit; font-style:inherit; font-variant:inherit; line-height:inherit; font-size:18px; vertical-align:baseline; border-collapse:collapse; border-spacing:0px"> 
 <tbody style="margin:0px; padding:0px; border:0px; font-family:inherit; font-style:inherit; font-variant:inherit; line-height:inherit; vertical-align:baseline"> 
 <tr style="margin:0px; padding:0px; border:0px; font-family:inherit; font-style:inherit; font-variant:inherit; line-height:inherit; vertical-align:baseline"> 
 <td style="margin:0px; padding:0px; border:0px; font-family:inherit; font-style:inherit; font-variant:inherit; line-height:inherit; font-size:18px; vertical-align:middle"> <pre style="">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
</pre> </td> 
 <td style="margin:0px; padding:0px; border:0px; font-family:inherit; font-style:inherit; font-variant:inherit; line-height:inherit; font-size:18px; vertical-align:middle; width:749px"> <pre style=""><code style="margin:0px; border:0px; font-style:inherit; font-variant:inherit; line-height:1.45em; vertical-align:baseline; overflow-y:hidden; display:block; overflow-x:auto; background-color:rgb(0,0,0); padding:0.8em!important; font-family:Menlo,Monaco,'Andale Mono','lucida console','Courier New',monospace!important">public class CustomClipLoading extends FrameLayout { private static final int MAX_PROGRESS = 10000; private ClipDrawable mClipDrawable; private int mProgress = 0; private boolean running; private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { // 如果消息是本程序发送的 if (msg.what == 0x123) { mClipDrawable.setLevel(mProgress); } } }; public CustomClipLoading(Context context) { this(context, null, 0); } public CustomClipLoading(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CustomClipLoading(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(context); } private void init(Context context) { View view = LayoutInflater.from(context).inflate(layout.custom_loading, null); addView(view); ImageView imageView = (ImageView) findViewById(id.iv_progress); mClipDrawable = (ClipDrawable) imageView.getDrawable(); Thread s = new Thread(r); s.start(); } public void stop() { mProgress = 0; running = false; } Runnable r = new Runnable() { @Override public void run() { running = true; while (running) { handler.sendEmptyMessage(0x123); if (mProgress &gt; MAX_PROGRESS) { mProgress = 0; } mProgress += 100; try { Thread.sleep(18); } catch (InterruptedException e) { e.printStackTrace(); } } } }; } </code></pre> </td> 
 </tr> 
 </tbody> 
</table>

其中custom\_loading布局文件的内容如下：

custom\_loading.xml

然后clip\_loading的内容如下：

clip\_loading.xml

至此这个组件就定义好了，那么接下来就是在avtivity布局文件的使用了：

## 4. Progress Wheel ##

第四和第五种loading只要是用到了一个开源的项目[ProgressWheel][],使用方法也很简单，具体见项目说明。

[stormzhang _ CustomLoading]: https://github.com/stormzhang/CustomLoading
[snap.png]: /images/20220828/93705211cbce4b46a28e39d4ddbe5249.png
[ProgressWheel]: https://github.com/Todd-Davies/ProgressWheel