Android模擬美團(tuán)客戶端進(jìn)度提示框

2020-04-11 11:26:38

字體：大中小

供稿：網(wǎng)友

用過美團(tuán)客戶端的朋友都知道，美團(tuán)的加載等待提示很有意思，是一種動畫的形式展現(xiàn)給我們，下面我們就對這背后的原理進(jìn)行了解，然后實現(xiàn)自己的等待動畫效果。
首先我們準(zhǔn)備兩張圖片：

這兩張圖片看起來一模一樣啊？細(xì)心的朋友會發(fā)現(xiàn)唯一不同的就在腳部，OK，我們就利用這兩張圖片的輪換播放實現(xiàn)動畫效果，下面看一下代碼：
1.動畫文件frame_meituan.xml:

<?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毫秒進(jìn)行圖片的切換，模擬動畫效果。
2.簡單自定義一個控件-MeituanProgressDialog.java:

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  * 顯示文字提示信息內(nèi)容  * @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:

<?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中調(diào)用：

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: 奔跑小人的動畫進(jìn)度條對話框，可以用作加載數(shù)據(jù)界面  * @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);  }  /**  * 顯示美團(tuán)進(jìn)度對話框  * @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秒鐘后調(diào)用dismiss方法隱藏；   }  }

最后，讓我們的程序跑起來：