在网络加载数据的时候通常需要很多时间,这个时候程序里面经常需要写一个提示正在加载数据的弹窗,这篇文章用两种方式实现带动画效果的Dialog:帧动画实现和GIF动态图实现,它们都能达到动画的效果
第一种、帧动画实现
自定义一个Dialog,先看一下布局文件dialog_animation.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" android:paddingBottom="20dp" android:paddingLeft="80dp" android:paddingRight="80dp" android:paddingTop="20dp" > <ImageView android:id="@+id/dialog_animation_img" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/dialog_animation_txt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="正在加载数据。。。" android:textColor="@android:color/black" android:textSize="16sp" /></LinearLayout>ImageView用来显示动画,TextView用于提示用户我们正在加载数据
public static Dialog createAnimationDailog(final Context context) { final Dialog dialog = new Dialog(context, R.style.dialog); dialog.setContentView(R.layout.dialog_animation); ImageView animationView = (ImageView) dialog .findViewById(R.id.dialog_animation_img); animationView.setBackgroundResource(R.drawable.animation_dialog); AnimationDrawable animationDrawable = (AnimationDrawable) animationView .getBackground(); animationDrawable.start(); final TextView textView = (TextView) dialog .findViewById(R.id.dialog_animation_txt); Animation animation = AnimationUtils.loadAnimation(context, R.anim.animation_dialog_txt); // animation的循环播放模式不起作用,只能手动的在动画播放完之后再播放一次 animation.setAnimationListener(new AnimationListener() { @Override public void onAnimationEnd(Animation arg0) { Animation anim = AnimationUtils.loadAnimation(context, R.anim.animation_dialog_txt); textView.startAnimation(anim); anim.setAnimationListener(this); } @Override public void onAnimationRepeat(Animation arg0) { // TODO Auto-generated method stub } @Override public void onAnimationStart(Animation arg0) { // TODO Auto-generated method stub } }); // 绑定动画 textView.startAnimation(animation); return dialog; }ImageView中的帧动画文件,很简单的,就三张图片顺序播放。新建res/drawable/animation_dialog.xml
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" > <item android:drawable="@drawable/girl1" android:duration="100"/> <item android:drawable="@drawable/girl2" android:duration="100"/> <item android:drawable="@drawable/girl3" android:duration="100"/></animation-list>TextView使用的补间动画文件。新建res/anim/animation_dialog_txt.xml
<set xmlns:android="http://schemas.android.com/apk/res/android" android:fillBefore="true" android:fillEnabled="true" android:repeatMode="restart" > <translate android:duration="1000" android:fromXDelta="-20%" android:interpolator="@android:anim/accelerate_interpolator" android:toXDelta="0%" /> <translate android:duration="1000" android:fromXDelta="0%" android:interpolator="@android:anim/decelerate_interpolator" android:toXDelta="20%" /> <alpha android:duration="1000" android:fromAlpha="0.0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:toAlpha="1" /> <alpha android:duration="200" android:fromAlpha="1" android:interpolator="@android:anim/decelerate_interpolator" android:toAlpha="0.8" /></set>
效果图
截屏效果太差,实际动画是很流畅的,相信我。
第二种、GIF动态图实现这种是通过播放GIF动态图来达到动画效果。
首先这需要一个第三方的jar包,GifView.jar,将其下载之后导入项目
新建布局文件dialog_gif.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" android:paddingBottom="20dp" android:paddingLeft="80dp" android:paddingRight="80dp" android:paddingTop="20dp" > <com.ant.liao.GifView android:id="@+id/dialog_gifView" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/dialog_gif_txt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="正在加载数据。。。" android:textColor="@android:color/black" android:textSize="16sp" /></LinearLayout>
public static Dialog createGIFDialog(final Context context) { final Dialog dialog = new Dialog(context, R.style.dialog); dialog.setContentView(R.layout.dialog_gif); GifView gifView = (GifView) dialog.findViewById(R.id.dialog_gifView); gifView.setGifImage(R.drawable.ride); gifView.showAnimation(); final TextView textView = (TextView) dialog .findViewById(R.id.dialog_gif_txt); Animation animation = AnimationUtils.loadAnimation(context, R.anim.animation_dialog_txt); animation.setAnimationListener(new AnimationListener() { @Override public void onAnimationEnd(Animation arg0) { Animation anim = AnimationUtils.loadAnimation(context, R.anim.animation_dialog_txt); textView.startAnimation(anim); anim.setAnimationListener(this); } @Override public void onAnimationRepeat(Animation arg0) { // TODO Auto-generated method stub } @Override public void onAnimationStart(Animation arg0) { // TODO Auto-generated method stub } }); // 绑定动画 textView.startAnimation(animation); return dialog; }
效果图
源码下载