Android实战简易教程<五十六>（模拟美团客户端进度提示框）

用过美团客户端的朋友都知道，美团的加载等待提示很有意思，是一种动画的形式展现给我们，下面我们就对这背后的原理进行了解，然后实现自己的等待动画效果。

首先我们准备两张图片：

这两张图片看起来一模一样啊？细心的朋友会发现唯一不同的就在脚部，OK，我们就利用这两张图片的轮换播放实现动画效果，下面看一下代码：

1.动画文件frame_meituan.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.   
5.     <item  
6.         android:drawable="@drawable/progress_loading_image_01"  
7.         android:duration="150"/>  
8.     <item  
9.         android:drawable="@drawable/progress_loading_image_02"  
10.         android:duration="150"/>  
11.   
12. </animation-list>  

150毫秒进行图片的切换，模拟动画效果。

2.简单自定义一个控件-MeituanProgressDialog.java:

[java]  view plain copy

1. package com.finddreams.runningman;  
2.   
3. import android.app.ProgressDialog;  
4. import android.content.Context;  
5. import android.graphics.drawable.AnimationDrawable;  
6. import android.os.Bundle;  
7. import android.widget.ImageView;  
8. import android.widget.TextView;  
9.   
10. import com.example.runningman.R;  
11.   
12. /** 
13.  * @Description:自定义对话框 
14.  * @author http://blog.csdn.net/yayun0516 
15.  */  
16. public class MeituanProgressDialog extends ProgressDialog {  
17.   
18.     private AnimationDrawable mAnimation;  
19.     private Context mContext;  
20.     private ImageView mImageView;  
21.     private String mLoadingTip;  
22.     private TextView mLoadingTv;  
23.     private int count = 0;  
24.     private String oldLoadingTip;  
25.     private int mResid;  
26.   
27.     /** 
28.      *  
29.      * @param context 
30.      *            上下文对象 
31.      * @param content 
32.      *            显示文字提示信息内容 
33.      * @param id 
34.      *            动画id 
35.      */  
36.     public MeituanProgressDialog(Context context, String content, int id) {  
37.         super(context);  
38.         this.mContext = context;  
39.         this.mLoadingTip = content;  
40.         this.mResid = id;  
41.         setCanceledOnTouchOutside(true);  
42.     }  
43.   
44.     @Override  
45.     protected void onCreate(Bundle savedInstanceState) {  
46.         super.onCreate(savedInstanceState);  
47.         initView();  
48.         initData();  
49.     }  
50.   
51.     private void initData() {  
52.   
53.         mImageView.setBackgroundResource(mResid);  
54.         // 通过ImageView对象拿到背景显示的AnimationDrawable  
55.         mAnimation = (AnimationDrawable) mImageView.getBackground();  
56.   
57.         mImageView.post(new Runnable() {  
58.             @Override  
59.             public void run() {  
60.                 mAnimation.start();  
61.   
62.             }  
63.         });  
64.         mLoadingTv.setText(mLoadingTip);  
65.   
66.     }  
67.   
68.     public void setContent(String str) {  
69.         mLoadingTv.setText(str);  
70.     }  
71.   
72.     private void initView() {  
73.         setContentView(R.layout.progress_dialog);// 显示界面  
74.         mLoadingTv = (TextView) findViewById(R.id.loadingTv);  
75.         mImageView = (ImageView) findViewById(R.id.loadingIv);  
76.     }  
77.   
78. }  

上面用到的提示布局文件的progress_dialog.xml:

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="wrap_content"  
5.    android:layout_gravity="center"  
6.     android:orientation="vertical" >  
7.   
8.     <ImageView  
9.         android:id="@+id/loadingIv"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:background="@anim/frame_meituan"/>  
13.   
14.     <TextView  
15.         android:id="@+id/loadingTv"  
16.         android:layout_width="wrap_content"  
17.         android:layout_height="wrap_content"  
18.         android:layout_alignBottom="@+id/loadingIv"  
19.           
20.         android:layout_centerHorizontal="true"  
21.         android:textSize="20sp"  
22.         android:text="正在加载中.." />  
23.   
24. </RelativeLayout>  

最后在Activity中调用：

[java]  view plain copy

1. package com.finddreams.runningman;  
2.   
3. import com.example.runningman.R;  
4.   
5. import android.app.Activity;  
6. import android.os.Bundle;  
7. import android.os.Handler;  
8. import android.view.View;  
9. /** 
10.  * @Description: 奔跑小人的动画进度条对话框，可以用作加载数据界面 
11.  * @author http://blog.csdn.net/yayun0516 
12.  */   
13. public class MeiTuanManActivity extends Activity {  
14.     private MeituanProgressDialog dialog;  
15.     @Override  
16.     protected void onCreate(Bundle savedInstanceState) {  
17.         super.onCreate(savedInstanceState);  
18.         setContentView(R.layout.meituan_progressdialog);  
19.     }  
20.     /** 
21.      * 显示美团进度对话框 
22.      * @param v 
23.      */  
24.     public void showmeidialog(View v){  
25.         dialog =new MeituanProgressDialog(this, "正在加载中",R.anim.frame_meituan);  
26.         dialog.show();  
27.         Handler handler =new Handler();  
28.         handler.postDelayed(new Runnable() {  
29.               
30.             @Override  
31.             public void run() {  
32.                   
33.                 dialog.dismiss();  
34.             }  
35.         }, 3000);//3秒钟后调用dismiss方法隐藏；  
36.           
37.     }  
38.       
39. }  

最后，让我们的程序跑起来：

ok，跑起来了，你想要加入你的项目，只需要准备两张图片替换下来即可模拟动画。

源码免费下载