Android-ImageSwitcher-詳解

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/0305/966.html

繼承關係，ImageSwitcher和TextSwitcher的繼承關係是一樣的。兩個重要的父類：ViewSwitcher和ViewAnimator
繼承於ViewSwitcher，說明具備了切換功能
繼承於ViewAnimator，說明具備了動畫功能

ImageSwitcher原理

ImageSwitcher的內容在Gallery中已經有所講解，這邊系統的詳解一下
ImageSwitcher粗略的理解就是ImageView的選擇器
ImageSwitcher的原理：ImageSwitcher有兩個子View：ImageView，當左右滑動的時候，就在這兩個ImageView之間來回切換來顯示圖片
下面我們來看看Android自帶的source，以便更深的理解這個原理：
既然有兩個子ImageView，那麼我們要創建兩個ImageView給ImageSwitcher。創建ImageSwitcher是通過工廠來實現的，看下面代碼

imageSwicher.setFactory(this);

爲imageSwitcher設置ViewFactory
@Override
public View makeView() {
ImageView imageView = new ImageView(this);
imageView.setImageResource(arrayPictures[pictureIndex]);
return imageView;
}

實現ViewFactory的makeView()方法，makeView()方法就是負責給ImageSwitcher創建兩個字ImageView
下面再來看看setFactory()方法的具體代碼
public void setFactory(ViewFactory factory) {
mFactory = factory;
obtainView();
obtainView();
}

可以看到在setFactory的同時，調用了兩遍obtainView()方法，obtainView()方法就是給ImageSwitcher添加子ImageView的，調用兩遍就是添加了兩個子ImageView
再來看看obtainView()方法的具體代碼
private View obtainView() {
View child = mFactory.makeView();
LayoutParams lp = (LayoutParams) child.getLayoutParams();
if (lp == null) {
lp = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
}
addView(child, lp);
return child;
}

可以看到obtainView()方法的的職責就是：通過makeView()方法創建View，然後把創建出來的View添加到ImageSwitcher上
再來看看下面的方法
public void setImageResource(int resid)
{
ImageView image = (ImageView)this.getNextView();
image.setImageResource(resid);
showNext();
}

此方法就是用來顯示下一張圖片的，我們可以看到這個方法裏面調用了getNextView()方法和showNext()方法，那麼我們來看看這兩個方法的具體代碼
public View getNextView() {
int which = mWhichChild == 0 ? 1 : 0;
return getChildAt(which);
}
public void showNext() {
setDisplayedChild(mWhichChild + 1);
}

getNextView()方法是在兩個子ImageView之間切換，showNext()方法是負責顯示這兩個子View中的哪一個

也就是說，現用getNextView()方法得到下一個View，然後重新設置這個View的imageResource，最後通過showNext()方法將下一個View顯示出來

好了，ImageSwitcher的原理講完了。下面附上一個Demo

ImageSwitcher實例

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageSwitcher
android:id="@+id/imageSwicher"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="@android:color/white"
android:gravity="center" >
</ImageSwitcher>
</LinearLayout>

ImageSwicherDemoActivity.java

package com.tianjf;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;
/**
* 一個左右滑動瀏覽圖片的Demo
*
* @author tianjf
*
*/
public class ImageSwicherDemoActivity extends Activity implements ViewFactory,
OnTouchListener {
private ImageSwitcher imageSwicher;
// 圖片數組
private int[] arrayPictures = { R.drawable.bg001, R.drawable.bg002,
R.drawable.bg003, R.drawable.bg004 };
// 要顯示的圖片在圖片數組中的Index
private int pictureIndex;
// 左右滑動時手指按下的X座標
private float touchDownX;
// 左右滑動時手指鬆開的X座標
private float touchUpX;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imageSwicher = (ImageSwitcher) findViewById(R.id.imageSwicher);
// 爲ImageSwicher設置Factory，用來爲ImageSwicher製造ImageView
imageSwicher.setFactory(this);
// 設置ImageSwitcher左右滑動事件
imageSwicher.setOnTouchListener(this);
}
@Override
public View makeView() {
ImageView imageView = new ImageView(this);
imageView.setImageResource(arrayPictures[pictureIndex]);
return imageView;
}
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
// 取得左右滑動時手指按下的X座標
touchDownX = event.getX();
return true;
} else if (event.getAction() == MotionEvent.ACTION_UP) {
// 取得左右滑動時手指鬆開的X座標
touchUpX = event.getX();
// 從左往右，看前一張
if (touchUpX - touchDownX > 100) {
// 取得當前要看的圖片的index
pictureIndex = pictureIndex == 0 ? arrayPictures.length - 1
: pictureIndex - 1;
// 設置圖片切換的動畫
imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.slide_in_left));
imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.slide_out_right));
// 設置當前要看的圖片
imageSwicher.setImageResource(arrayPictures[pictureIndex]);
// 從右往左，看下一張
} else if (touchDownX - touchUpX > 100) {
// 取得當前要看的圖片的index
pictureIndex = pictureIndex == arrayPictures.length - 1 ? 0
: pictureIndex + 1;
// 設置圖片切換的動畫
// 由於Android沒有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right編寫了slide_out_left和slide_in_right
imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.slide_out_left));
imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.slide_in_right));
// 設置當前要看的圖片
imageSwicher.setImageResource(arrayPictures[pictureIndex]);
}
return true;
}
return false;
}
}