利用Android的ViewFlipper和AnimationUtils實現圖片帶有動畫的輪播切換，其中當點選「上一張」圖片時，切換到上一張圖片；當點選「下一張」圖片時，切換到下一張圖片。其效果圖如下：
1
設定佈局檔案，其內容如下：activity_image_flipper_shade.xml<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"? ? xmlns:tools="http://schemas.android.com/tools"? ? android:layout_width="match_parent"? ? android:layout_height="match_parent"? ? android:background="@drawable/background"? ? android:paddingBottom="@dimen/activity_optopns_vertical_margin"? ? android:paddingLeft="@dimen/activity_options_horizontal_margin"? ? android:paddingRight="@dimen/activity_options_horizontal_margin"? ? android:paddingTop="@dimen/activity_optopns_vertical_margin"? ? tools:context=".ImageFlipperActivity" >? ? <RelativeLayout? ? ? ? android:id="@id/rl_image_flipper_shade_title"? ? ? ? android:layout_width="match_parent"? ? ? ? android:layout_height="wrap_content"? ? ? ? android:orientation="horizontal" >? ? ? ? <Button? ? ? ? ? ? android:id="@+id/btn_image_flipper_shade_back"? ? ? ? ? ? android:layout_width="wrap_content"? ? ? ? ? ? android:layout_height="wrap_content"? ? ? ? ? ? android:layout_alignParentLeft="true"? ? ? ? ? ? android:layout_marginBottom="10dp"? ? ? ? ? ? android:background="@drawable/custom_button"? ? ? ? ? ? android:text="@string/back"? ? ? ? ? ? android:textColor="@color/textColor"? ? ? ? ? ? android:textSize="16sp"? ? ? ? ? ? android:visibility="visible" />? ? ? ? <TextView? ? ? ? ? ? android:id="@id/tv_image_flipper_shade_title"? ? ? ? ? ? android:layout_width="wrap_content"? ? ? ? ? ? android:layout_height="wrap_content"? ? ? ? ? ? android:layout_centerInParent="true"? ? ? ? ? ? android:text="@string/image_flipper_shade"? ? ? ? ? ? android:textColor="@color/textColor"? ? ? ? ? ? android:textSize="30sp"? ? ? ? ? ? android:textStyle="bold" />? ? </RelativeLayout>? ? <LinearLayout? ? ? ? android:id="@id/ll_image_flipper_shade_content"? ? ? ? android:layout_width="match_parent"? ? ? ? android:layout_height="match_parent"? ? ? ? android:layout_below="@id/rl_image_flipper_shade_title"? ? ? ? android:layout_marginBottom="20dp"? ? ? ? android:layout_marginTop="20dp"? ? ? ? android:gravity="center"? ? ? ? android:orientation="vertical" >? ? ? ? <ViewFlipper? ? ? ? ? ? android:id="@id/vf_image_flipper_shade"? ? ? ? ? ? android:layout_width="match_parent"? ? ? ? ? ? android:layout_height="match_parent" />? ? </LinearLayout></RelativeLayout>gLeft="@dimen/activity_options_horizontal_margin"? ? android:paddingRight="@dimen/activity_options_horizontal_margin"? ? android:paddingTop="@dimen/activity_optopns_vertical_margin"? ? tools:context=".ImageFlipperActivity" >? ? <RelativeLayout? ? ? ? android:id="@id/rl_image_flipper_shade_title"? ? ? ? android:layout_width="match_parent"? ? ? ? android:layout_height="wrap_content"? ? ? ? android:orientation="horizontal" >? ? ? ? <Button? ? ? ? ? ? android:id="@+id/btn_image_flipper_shade_back"? ? ? ? ? ? android:layout_width="wrap_content"? ? ? ? ? ? android:layout_height="wrap_content"? ? ? ? ? ? android:layout_alignParentLeft="true"? ? ? ? ? ? android:layout_marginBottom="10dp"? ? ? ? ? ? android:background="@drawable/custom_button"? ? ? ? ? ? android:text="@string/back"? ? ? ? ? ? android:textColor="@color/textColor"? ? ? ? ? ? android:textSize="16sp"? ? ? ? ? ? android:visibility="visible" />? ? ? ? <TextView? ? ? ? ? ? android:id="@id/tv_image_flipper_shade_title"? ? ? ? ? ? android:layout_width="wrap_content"? ? ? ? ? ? android:layout_height="wrap_content"? ? ? ? ? ? android:layout_centerInParent="true"? ? ? ? ? ? android:text="@string/image_flipper_shade"? ? ? ? ? ? android:textColor="@color/textColor"? ? ? ? ? ? android:textSize="30sp"? ? ? ? ? ? android:textStyle="bold" />? ? </RelativeLayout>? ? <LinearLayout? ? ? ? android:id="@id/ll_image_flipper_shade_content"? ? ? ? android:layout_width="match_parent"? ? ? ? android:layout_height="match_parent"? ? ? ? android:layout_below="@id/rl_image_flipper_shade_title"? ? ? ? android:layout_marginBottom="20dp"? ? ? ? android:layout_marginTop="20dp"? ? ? ? android:gravity="center"? ? ? ? android:orientation="vertical" >? ? ? ? <ViewFlipper? ? ? ? ? ? android:id="@id/vf_image_flipper_shade"? ? ? ? ? ? android:layout_width="match_parent"? ? ? ? ? ? android:layout_height="match_parent" />? ? </LinearLayout></RelativeLayout>2
動畫效果設定檔案，其內容如下：
A.push_left_in.xml（從左邊進入螢幕）
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- translate：畫面轉換位置移動動畫效果 -->
<translate
android:duration="500"
android:fromXDelta="100%p"
android:toXDelta="0" />
<!-- alpha：漸變透明度動畫效果 -->
<alpha
android:duration="500"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
<!-- scale：漸變尺寸伸縮動畫效果 -->
<!-- rotate：畫面轉換位置移動動畫效果 -->
</set>
B.push_left_out.xml（從左邊退出螢幕）
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="500"
android:fromXDelta="0"
android:toXDelta="-100%p" />
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>
C.push_right_in.xml（從右邊進入螢幕）
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="500"
android:fromXDelta="-100%p"
android:toXDelta="0" />
<alpha
android:duration="500"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>
D.push_right_out.xml（從右邊退出螢幕）
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="500"
android:fromXDelta="0"
android:toXDelta="100%p" />
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>
3
實現圖片輪播切換的類為ImageFlipperShadeActivity.java，其內容為：/**?*??*/package com.i114gbox.aglieguy;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.PixelFormat;import android.os.Bundle;import android.os.Handler;import android.view.Gravity;import android.view.MotionEvent;import android.view.View;import android.view.View.OnClickListener;import android.view.WindowManager;import android.view.WindowManager.LayoutParams;import android.view.animation.AnimationUtils;import android.widget.Button;import android.widget.ImageView;import android.widget.ViewFlipper;import com.i114gbox.sdk.activity.I114gBoxActivity;import com.i114gbox.sdk.utils.I114gBoxCollectActivityUtils;import com.i114gbox.sdk.utils.I114gBoxLogUtils;import com.i114gbox.sdk.utils.I114gBoxResourceUtils;/**?* 圖片滑動漸變Activity?*??* @author SJC?*??*/public class ImageFlipperShadeActivity extends I114gBoxActivity {private static String TAG = "ImageFlipperShadeActivity";private Context ctx = null;private ViewFlipper viewFlipper;// 檢視輪播private WindowManager windowManager;// 視窗管理器private WindowManager.LayoutParams layoutParams;// 布局引數private boolean isHide;private int mAlpha = 0;// 左邊圖片檢視private ImageView leftImageView;// 右邊圖片檢視private ImageView rightImageView;private int WHAT_HIDE = 0;private int WHAT_SHOW = 1;@Overrideprotected void onCreate(Bundle savedInstanceState) {I114gBoxLogUtils.d(TAG, "The onCreate method execute.");super.onCreate(savedInstanceState);I114gBoxCollectActivityUtils.getInstance().addActivity(this);// 收集Activityctx = this;setContentView(I114gBoxResourceUtils.getLayoutId(ctx,"activity_image_flipper_shade"));viewFlipper = (ViewFlipper) findViewById(I114gBoxResourceUtils.getId(ctx, "vf_image_flipper_shade"));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_01")));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_02")));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_03")));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_04")));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_05")));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_06")));Button backButton = (Button) findViewById(I114gBoxResourceUtils.getId(ctx, "btn_image_flipper_shade_back"));backButton.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {finish();}});initImageButtonView();// 初始化ImageButton檢視}/** 新增ImageView控制元件 **/private View addImageView(int id) {ImageView imageView = new ImageView(this);imageView.setImageResource(id);return imageView;}/** 初始化ImageButton檢視 **/private void initImageButtonView() {windowManager = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);layoutParams = new WindowManager.LayoutParams();// 設定視窗型別layoutParams.type = LayoutParams.TYPE_PHONE;// 設定圖片格式，效果為背景透明layoutParams.format = PixelFormat.RGBA_8888;// 設定FLAG引數，觸控失效或無法獲取焦點layoutParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL| LayoutParams.FLAG_NOT_FOCUSABLE;// 初始化話坐標值layoutParams.x = 0;layoutParams.y = 0;// 設定視窗的寬度和高度layoutParams.width = 50;layoutParams.height = 50;// 建立左邊和右邊按鈕createLeftButtonView();createRightButtonView();}/** 建立左邊按鈕 **/private void createLeftButtonView() {leftImageView = new ImageView(ctx);leftImageView.setBackgroundResource(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_left"));leftImageView.setAlpha(0);// 完全透明// 新增點選監聽事件leftImageView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// 設定進入螢幕的動畫viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx,I114gBoxResourceUtils.getAnimId(ctx, "push_left_in")));// 設定退出螢幕的動畫viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx,I114gBoxResourceUtils.getAnimId(ctx, "push_left_out")));// 顯示下一個圖層viewFlipper.showNext();}});// 設定佈局為左邊垂直居中layoutParams.gravity = Gravity.LEFT | Gravity.CENTER_VERTICAL;// 將左邊按鈕新增到視窗中windowManager.addView(leftImageView, layoutParams);}/** 建立右邊按鈕 **/private void createRightButtonView() {rightImageView = new ImageView(ctx);rightImageView.setBackgroundResource(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_right"));rightImageView.setAlpha(0);// 完全透明// 新增點選監聽事件rightImageView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// 設定進入螢幕的動畫viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx,I114gBoxResourceUtils.getAnimId(ctx, "push_right_in")));// 設定退出螢幕的動畫viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx,I114gBoxResourceUtils.getAnimId(ctx, "push_right_out")));// 顯示上一個圖層viewFlipper.showPrevious();}});// 設定佈局為右邊垂直居中layoutParams.gravity = Gravity.RIGHT | Gravity.CENTER_VERTICAL;// 將右邊按鈕新增到視窗中windowManager.addView(rightImageView, layoutParams);}@Overridepublic boolean onTouchEvent(MotionEvent event) {I114gBoxLogUtils.d(TAG, "The onTouchEvent method execute.");switch (event.getAction()) {// 移動事件case MotionEvent.ACTION_MOVE:break;// 按下事件case MotionEvent.ACTION_DOWN:// 顯示ImageButton檢視showImageButtonView();break;// 按下後鬆開事件case MotionEvent.ACTION_UP:// 隱藏ImageButton檢視hideImageButtonView();break;default:break;}return true;}/** 顯示ImageButton檢視 **/private void showImageButtonView() {isHide = true;mHandler.sendEmptyMessage(WHAT_SHOW);}/** 隱藏ImageButton檢視 **/private void hideImageButtonView() {new Thread() {@Overridepublic void run() {try {Thread.sleep(1500);isHide = false;mHandler.sendEmptyMessage(WHAT_HIDE);} catch (InterruptedException e) {I114gBoxLogUtils.e(TAG, e.getMessage());}};}.start();}/** 處理非同步訊息 **/@SuppressLint("HandlerLeak")private Handler mHandler = new Handler() {@Overridepublic void handleMessage(android.os.Message msg) {// 當接收到顯示左右圖片的訊息時if (msg.what == 1 && mAlpha < 255) {mAlpha += 50;if (mAlpha > 255)mAlpha = 255;// 設定透明度leftImageView.setAlpha(mAlpha);// 重新整理檢視leftImageView.invalidate();rightImageView.setAlpha(mAlpha);rightImageView.invalidate();if (!isHide && mAlpha < 255)mHandler.sendEmptyMessageDelayed(WHAT_SHOW, 100);}// 當接收到隱藏左右圖片的訊息時else if (msg.what == 0 && mAlpha > 0) {mAlpha -= 10;if (mAlpha < 0)mAlpha = 0;// 設定透明度leftImageView.setAlpha(mAlpha);// 重新整理檢視leftImageView.invalidate();rightImageView.setAlpha(mAlpha);rightImageView.invalidate();if (isHide && mAlpha > 0)mHandler.sendEmptyMessageDelayed(WHAT_HIDE, 100);}};};@Overrideprotected void onDestroy() {I114gBoxLogUtils.d(TAG, "The onDestory method execute.");super.onDestroy();// 移除ImageView控制元件windowManager.removeView(leftImageView);windowManager.removeView(rightImageView);};}d.view.WindowManager.LayoutParams;import android.view.animation.AnimationUtils;import android.widget.Button;import android.widget.ImageView;import android.widget.ViewFlipper;import com.i114gbox.sdk.activity.I114gBoxActivity;import com.i114gbox.sdk.utils.I114gBoxCollectActivityUtils;import com.i114gbox.sdk.utils.I114gBoxLogUtils;import com.i114gbox.sdk.utils.I114gBoxResourceUtils;/**?* 圖片滑動漸變Activity?*??* @author SJC?*??*/public class ImageFlipperShadeActivity extends I114gBoxActivity {private static String TAG = "ImageFlipperShadeActivity";private Context ctx = null;private ViewFlipper viewFlipper;// 檢視輪播private WindowManager windowManager;// 視窗管理器private WindowManager.LayoutParams layoutParams;// 布局引數private boolean isHide;private int mAlpha = 0;// 左邊圖片檢視private ImageView leftImageView;// 右邊圖片檢視private ImageView rightImageView;private int WHAT_HIDE = 0;private int WHAT_SHOW = 1;@Overrideprotected void onCreate(Bundle savedInstanceState) {I114gBoxLogUtils.d(TAG, "The onCreate method execute.");super.onCreate(savedInstanceState);I114gBoxCollectActivityUtils.getInstance().addActivity(this);// 收集Activityctx = this;setContentView(I114gBoxResourceUtils.getLayoutId(ctx,"activity_image_flipper_shade"));viewFlipper = (ViewFlipper) findViewById(I114gBoxResourceUtils.getId(ctx, "vf_image_flipper_shade"));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_01")));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_02")));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_03")));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_04")));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_05")));viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_06")));Button backButton = (Button) findViewById(I114gBoxResourceUtils.getId(ctx, "btn_image_flipper_shade_back"));backButton.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {finish();}});initImageButtonView();// 初始化ImageButton檢視}/** 新增ImageView控制元件 **/private View addImageView(int id) {ImageView imageView = new ImageView(this);imageView.setImageResource(id);return imageView;}/** 初始化ImageButton檢視 **/private void initImageButtonView() {windowManager = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);layoutParams = new WindowManager.LayoutParams();// 設定視窗型別layoutParams.type = LayoutParams.TYPE_PHONE;// 設定圖片格式，效果為背景透明layoutParams.format = PixelFormat.RGBA_8888;// 設定FLAG引數，觸控失效或無法獲取焦點layoutParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL| LayoutParams.FLAG_NOT_FOCUSABLE;// 初始化話坐標值layoutParams.x = 0;layoutParams.y = 0;// 設定視窗的寬度和高度layoutParams.width = 50;layoutParams.height = 50;// 建立左邊和右邊按鈕createLeftButtonView();createRightButtonView();}/** 建立左邊按鈕 **/private void createLeftButtonView() {leftImageView = new ImageView(ctx);leftImageView.setBackgroundResource(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_left"));leftImageView.setAlpha(0);// 完全透明// 新增點選監聽事件leftImageView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// 設定進入螢幕的動畫viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx,I114gBoxResourceUtils.getAnimId(ctx, "push_left_in")));// 設定退出螢幕的動畫viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx,I114gBoxResourceUtils.getAnimId(ctx, "push_left_out")));// 顯示下一個圖層viewFlipper.showNext();}});// 設定佈局為左邊垂直居中layoutParams.gravity = Gravity.LEFT | Gravity.CENTER_VERTICAL;// 將左邊按鈕新增到視窗中windowManager.addView(leftImageView, layoutParams);}/** 建立右邊按鈕 **/private void createRightButtonView() {rightImageView = new ImageView(ctx);rightImageView.setBackgroundResource(I114gBoxResourceUtils.getDrawableId(ctx, "flipper_right"));rightImageView.setAlpha(0);// 完全透明// 新增點選監聽事件rightImageView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// 設定進入螢幕的動畫viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx,I114gBoxResourceUtils.getAnimId(ctx, "push_right_in")));// 設定退出螢幕的動畫viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx,I114gBoxResourceUtils.getAnimId(ctx, "push_right_out")));// 顯示上一個圖層viewFlipper.showPrevious();}});// 設定佈局為右邊垂直居中layoutParams.gravity = Gravity.RIGHT | Gravity.CENTER_VERTICAL;// 將右邊按鈕新增到視窗中windowManager.addView(rightImageView, layoutParams);}@Overridepublic boolean onTouchEvent(MotionEvent event) {I114gBoxLogUtils.d(TAG, "The onTouchEvent method execute.");switch (event.getAction()) {// 移動事件case MotionEvent.ACTION_MOVE:break;// 按下事件case MotionEvent.ACTION_DOWN:// 顯示ImageButton檢視showImageButtonView();break;// 按下後鬆開事件case MotionEvent.ACTION_UP:// 隱藏ImageButton檢視hideImageButtonView();break;default:break;}return true;}/** 顯示ImageButton檢視 **/private void showImageButtonView() {isHide = true;mHandler.sendEmptyMessage(WHAT_SHOW);}/** 隱藏ImageButton檢視 **/private void hideImageButtonView() {new Thread() {@Overridepublic void run() {try {Thread.sleep(1500);isHide = false;mHandler.sendEmptyMessage(WHAT_HIDE);} catch (InterruptedException e) {I114gBoxLogUtils.e(TAG, e.getMessage());}};}.start();}/** 處理非同步訊息 **/@SuppressLint("HandlerLeak")private Handler mHandler = new Handler() {@Overridepublic void handleMessage(android.os.Message msg) {// 當接收到顯示左右圖片的訊息時if (msg.what == 1 && mAlpha < 255) {mAlpha += 50;if (mAlpha > 255)mAlpha = 255;// 設定透明度leftImageView.setAlpha(mAlpha);// 重新整理檢視leftImageView.invalidate();rightImageView.setAlpha(mAlpha);rightImageView.invalidate();if (!isHide && mAlpha < 255)mHandler.sendEmptyMessageDelayed(WHAT_SHOW, 100);}// 當接收到隱藏左右圖片的訊息時else if (msg.what == 0 && mAlpha > 0) {mAlpha -= 10;if (mAlpha < 0)mAlpha = 0;// 設定透明度leftImageView.setAlpha(mAlpha);// 重新整理檢視leftImageView.invalidate();rightImageView.setAlpha(mAlpha);rightImageView.invalidate();if (isHide && mAlpha > 0)mHandler.sendEmptyMessageDelayed(WHAT_HIDE, 100);}};};@Overrideprotected void onDestroy() {I114gBoxLogUtils.d(TAG, "The onDestory method execute.");super.onDestroy();// 移除ImageView控制元件windowManager.removeView(leftImageView);windowManager.removeView(rightImageView);};}
