Android帶動畫效果的彈窗

標籤：

在網路載入資料的時候通常需要很多時間，這個時候程式裡面經常需要寫一個提示正在載入資料的彈窗，這篇文章用兩種方式實現帶動畫效果的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() {@Overridepublic void onAnimationEnd(Animation arg0) {Animation anim = AnimationUtils.loadAnimation(context,R.anim.animation_dialog_txt);textView.startAnimation(anim);anim.setAnimationListener(this);}@Overridepublic void onAnimationRepeat(Animation arg0) {// TODO Auto-generated method stub}@Overridepublic 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() {@Overridepublic void onAnimationEnd(Animation arg0) {Animation anim = AnimationUtils.loadAnimation(context,R.anim.animation_dialog_txt);textView.startAnimation(anim);anim.setAnimationListener(this);}@Overridepublic void onAnimationRepeat(Animation arg0) {// TODO Auto-generated method stub}@Overridepublic void onAnimationStart(Animation arg0) {// TODO Auto-generated method stub}});// 綁定動畫textView.startAnimation(animation);return dialog;}

源碼下載

Android帶動畫效果的彈窗