Android Custom Loading

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

完整源码参见：stormzhang / CustomLoading

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

1. Frame Loading

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

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

frame_loading.xml

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

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

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

1 2 3 4

<ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:indeterminateDrawable="@drawable/frame_loading" />

2. Rotate Loading

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

rotate_loading.xml

1 2 3 4 5 6 7 8 9 10 11 12 13

<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" > <bitmap android:antialias="true" android:filter="true" android:src="@drawable/loading_360" /> </rotate>

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

1 2 3 4

<ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:indeterminateDrawable="@drawable/rotate_loading" />

3. Clip Loading

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

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

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 > MAX_PROGRESS) { mProgress = 0; } mProgress += 100; try { Thread.sleep(18); } catch (InterruptedException e) { e.printStackTrace(); } } } }; }

其中custom_loading布局文件的内容如下：

custom_loading.xml

1 2 3 4 5 6 7 8 9 10 11

<?xml version="1.0" encoding="utf-8"?> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/iv_progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="@drawable/loading_bg" android:paddingLeft="3dp" android:paddingTop="3dp" android:scaleType="centerInside" android:src="@drawable/clip_loading" />

然后clip_loading的内容如下：

clip_loading.xml

1 2 3 4 5 6

<?xml version="1.0" encoding="utf-8"?> <clip xmlns:android="http://schemas.android.com/apk/res/android" android:clipOrientation="vertical" android:drawable="@drawable/loading_progress" android:gravity="bottom" > </clip>

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

1 2 3

<com.storm.ui.CustomClipLoading android:layout_width="wrap_content" android:layout_height="wrap_content" />

4. Progress Wheel

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