Android_TextSwitcher和ImageSwitcher

先看看繼承關係，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

@Overridepublic 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 };// 要顯示的圖片在圖片數組中的Indexprivate int pictureIndex;// 左右滑動時手指按下的X座標private float touchDownX;// 左右滑動時手指鬆開的X座標private float touchUpX;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);imageSwicher = (ImageSwitcher) findViewById(R.id.imageSwicher);// 為ImageSwicher設定Factory，用來為ImageSwicher製造ImageViewimageSwicher.setFactory(this);// 設定ImageSwitcher左右滑動事件imageSwicher.setOnTouchListener(this);}@Overridepublic View makeView() {ImageView imageView = new ImageView(this);imageView.setImageResource(arrayPictures[pictureIndex]);return imageView;}@Overridepublic 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) {// 取得當前要看的圖片的indexpictureIndex = 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) {// 取得當前要看的圖片的indexpictureIndex = 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_rightimageSwicher.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;}}

由於Android沒有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right編寫了slide_out_left和slide_in_right，代碼如下：

slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <translate android:fromXDelta="50%p" android:toXDelta="0" android:duration="300"/>    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" /></set>

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <translate android:fromXDelta="0" android:toXDelta="-50%p" android:duration="300"/>    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" /></set>

好了ImageSwitcher的講解到此結束，下面附上一個和ImageSwitcher差不多的TextSwitcher的Demo。

由於TextSwitcher的原理和ImageSwitcher一樣，只是一個是ImageView，一個是TextView。那麼在此就不多說，直接上代碼

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" >    <TextSwitcher        android:id="@+id/textSwicher"        android:layout_width="fill_parent"        android:layout_height="0dip"        android:layout_weight="1"        android:background="@android:color/white"        android:gravity="center" >    </TextSwitcher></LinearLayout>

TextSwitcherDemoActivity.java

package com.tianjf;import android.app.Activity;import android.os.Bundle;import android.view.Gravity;import android.view.MotionEvent;import android.view.View;import android.view.View.OnTouchListener;import android.view.ViewGroup.LayoutParams;import android.view.animation.AnimationUtils;import android.widget.TextSwitcher;import android.widget.TextView;import android.widget.ViewSwitcher.ViewFactory;/** * 一個左右滑動瀏覽文本的Demo *  * @author tianjf *  */public class TextSwitcherDemoActivity extends Activity implements ViewFactory,OnTouchListener {private TextSwitcher textSwicher;// 圖片數組private String[] arrayTexts = { "文本01", "文本02", "文本03", "文本04" };// 要顯示的圖片在圖片數組中的Indexprivate int textIndex;// 左右滑動時手指按下的X座標private float touchDownX;// 左右滑動時手指鬆開的X座標private float touchUpX;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);textSwicher = (TextSwitcher) findViewById(R.id.textSwicher);// 為TextSwitcher設定Factory，用來為TextSwitcher製造TextViewtextSwicher.setFactory(this);// 設定TextSwitcher左右滑動事件textSwicher.setOnTouchListener(this);}@Overridepublic View makeView() {TextView textView = new TextView(this);textView.setTextSize(100);textView.setLayoutParams(new TextSwitcher.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));textView.setGravity(Gravity.CENTER);textView.setText(arrayTexts[textIndex]);return textView;}@Overridepublic 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) {// 取得當前要看的文本的indextextIndex = textIndex == 0 ? arrayTexts.length - 1: textIndex - 1;// 設定文本切換的動畫textSwicher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left));textSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right));// 設定當前要看的文本textSwicher.setText(arrayTexts[textIndex]);// 從右往左，看下一張} else if (touchDownX - touchUpX > 100) {// 取得當前要看的文本的indextextIndex = textIndex == arrayTexts.length - 1 ? 0: textIndex + 1;// 設定文本切換的動畫// 由於Android沒有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right編寫了slide_out_left和slide_in_righttextSwicher.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.slide_out_left));textSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.slide_in_right));// 設定當前要看的文本textSwicher.setText(arrayTexts[textIndex]);}return true;}return false;}}

slide_in_right.xml和slide_out_left.xml可以參照ImageSwitcher的Demo，在此就不重複了。