用过美团客户端的朋友都知道，美团的加载等待提示很有意思，是一种动画的形式展现给我们，下面我们就对这背后的原理进行了解，然后实现自己的等待动画效果。
首先我们准备两张图片：
这两张图片看起来一模一样啊？细心的朋友会发现唯一不同的就在脚部，ok，我们就利用这两张图片的轮换播放实现动画效果，下面看一下代码：
1.动画文件frame_meituan.xml:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" > <item android:drawable="@drawable/progress_loading_image_01" android:duration="150"/> <item android:drawable="@drawable/progress_loading_image_02" android:duration="150"/> </animation-list> |
150毫秒进行图片的切换，模拟动画效果。
2.简单自定义一个控件-meituanprogressdialog.java:
|
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
|
package com.finddreams.runningman; import android.app.progressdialog; import android.content.context; import android.graphics.drawable.animationdrawable; import android.os.bundle; import android.widget.imageview; import android.widget.textview; import com.example.runningman.r; /** * @description:自定义对话框 * @author http://blog.csdn.net/yayun0516 */public class meituanprogressdialog extends progressdialog { private animationdrawable manimation; private context mcontext; private imageview mimageview; private string mloadingtip; private textview mloadingtv; private int count = 0; private string oldloadingtip; private int mresid; /** * * @param context * 上下文对象 * @param content * 显示文字提示信息内容 * @param id * 动画id */ public meituanprogressdialog(context context, string content, int id) { super(context); this.mcontext = context; this.mloadingtip = content; this.mresid = id; setcanceledontouchoutside(true); } @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); initview(); initdata(); } private void initdata() { mimageview.setbackgroundresource(mresid); // 通过imageview对象拿到背景显示的animationdrawable manimation = (animationdrawable) mimageview.getbackground(); mimageview.post(new runnable() { @override public void run() { manimation.start(); } }); mloadingtv.settext(mloadingtip); } public void setcontent(string str) { mloadingtv.settext(str); } private void initview() { setcontentview(r.layout.progress_dialog);// 显示界面 mloadingtv = (textview) findviewbyid(r.id.loadingtv); mimageview = (imageview) findviewbyid(r.id.loadingiv); } } |
上面用到的提示布局文件的progress_dialog.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
|
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical" > <imageview android:id="@+id/loadingiv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@anim/frame_meituan"/> <textview android:id="@+id/loadingtv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignbottom="@+id/loadingiv" android:layout_centerhorizontal="true" android:textsize="20sp" android:text="正在加载中.." /> </relativelayout> |
最后在activity中调用：
|
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
|
package com.finddreams.runningman; import com.example.runningman.r; import android.app.activity; import android.os.bundle; import android.os.handler; import android.view.view; /** * @description: 奔跑小人的动画进度条对话框，可以用作加载数据界面 * @author http://blog.csdn.net/yayun0516 */public class meituanmanactivity extends activity { private meituanprogressdialog dialog; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.meituan_progressdialog); } /** * 显示美团进度对话框 * @param v */ public void showmeidialog(view v){ dialog =new meituanprogressdialog(this, "正在加载中",r.anim.frame_meituan); dialog.show(); handler handler =new handler(); handler.postdelayed(new runnable() { @override public void run() { dialog.dismiss(); } }, 3000);//3秒钟后调用dismiss方法隐藏； } } |
最后，让我们的程序跑起来：
ok，跑起来了，你想要加入你的项目，只需要准备两张图片替换下来即可模拟动画。
