Android模拟美团客户端进度提示框
程序员文章站
2023-11-25 09:49:22
用过美团客户端的朋友都知道,美团的加载等待提示很有意思,是一种动画的形式展现给我们,下面我们就对这背后的原理进行了解,然后实现自己的等待动画效果。
首先我们准备两张图片:...
用过美团客户端的朋友都知道,美团的加载等待提示很有意思,是一种动画的形式展现给我们,下面我们就对这背后的原理进行了解,然后实现自己的等待动画效果。
首先我们准备两张图片:
这两张图片看起来一模一样啊?细心的朋友会发现唯一不同的就在脚部,ok,我们就利用这两张图片的轮换播放实现动画效果,下面看一下代码:
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毫秒进行图片的切换,模拟动画效果。
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 * 显示文字提示信息内容 * @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中调用:
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,跑起来了,你想要加入你的项目,只需要准备两张图片替换下来即可模拟动画。