Android中ImageSwitcher详解

先看看继承关系，ImageSwitcher和TextSwitcher的继承关系是一样的。两个重要的父类：ViewSwitcher和ViewAnimator

继承于ViewSwitcher，说明具备了切换功能

继承于ViewAnimator，说明具备了动画功能

ImageSwitcher原理

ImageSwitcher的内容在Gallery中已经有所讲解，这边系统的详解一下

ImageSwitcher粗略的理解就是ImageView的选择器

ImageSwitcher的原理：ImageSwitcher有两个子View：ImageView，当左右滑动的时候，就在这两个ImageView之间来回切换来显示图片

下面我们来看看Android自带的source，以便更深的理解这个原理：

既然有两个子ImageView，那么我们要创建两个ImageView给ImageSwitcher。创建ImageSwitcher是通过工厂来实现的，看下面代码

 

1	imageSwicher.setFactory( this );

为imageSwitcher设置ViewFactory

1 2 3 4 5 6

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

实现ViewFactory的makeView()方法，makeView()方法就是负责给ImageSwitcher创建两个字ImageView

下面再来看看setFactory()方法的具体代码

1 2 3 4 5

public void setFactory(ViewFactory factory) {      mFactory = factory;      obtainView();      obtainView(); }

可以看到在setFactory的同时，调用了两遍obtainView()方法，obtainView()方法就是给ImageSwitcher添加子ImageView的，调用两遍就是添加了两个子ImageView

再来看看obtainView()方法的具体代码

1 2 3 4 5 6 7 8 9

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上

再来看看下面的方法

1 2 3 4 5 6

public void setImageResource(int resid) {      ImageView image = (ImageView) this .getNextView();      image.setImageResource(resid);      showNext(); }

此方法就是用来显示下一张图片的，我们可以看到这个方法里面调用了getNextView()方法和showNext()方法，那么我们来看看这两个方法的具体代码

1 2 3 4

public View getNextView() {      int which = mWhichChild == 0 ? 1 : 0;      return getChildAt(which); }

1 2 3

public void showNext() {      setDisplayedChild(mWhichChild + 1); }

getNextView()方法是在两个子ImageView之间切换，showNext()方法是负责显示这两个子View中的哪一个

也就是说，现用getNextView()方法得到下一个View，然后重新设置这个View的imageResource，最后通过showNext()方法将下一个View显示出来

好了，ImageSwitcher的原理讲完了。下面附上一个Demo

ImageSwitcher实例

main.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

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 ;      } }

由于Android没有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right编写了slide_out_left和slide_in_right，代码如下：

slide_in_right.xml

1 2 3 4 5

<?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

1 2 3 4 5

<?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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98

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" };      // 要显示的图片在图片数组中的Index      private int textIndex;      // 左右滑动时手指按下的X坐标      private float touchDownX;      // 左右滑动时手指松开的X坐标      private float touchUpX;          @Override      public void onCreate(Bundle savedInstanceState) {          super .onCreate(savedInstanceState);          setContentView(R.layout.main);              textSwicher = (TextSwitcher) findViewById(R.id.textSwicher);              // 为TextSwitcher设置Factory，用来为TextSwitcher制造TextView          textSwicher.setFactory( this );          // 设置TextSwitcher左右滑动事件          textSwicher.setOnTouchListener( this );      }          @Override      public 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;      }          @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                  textIndex = 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) {                  // 取得当前要看的文本的index                  textIndex = 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_right                  textSwicher.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，在此就不重复了。