ViewAnimator 之(一) ImageSwitcher和TextSwitcher



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

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

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

ImageSwitcher原理

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

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

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

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

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

[java] view plain copy print ?

1. imageSwicher.setFactory(this);  

imageSwicher.setFactory(this);

为imageSwitcher设置ViewFactory

[java] view plain copy print ?

1. @Override  
2. public View makeView() {  
3.     ImageView imageView = new ImageView(this);  
4.     imageView.setImageResource(arrayPictures[pictureIndex]);  
5.     return imageView;  
6. }  

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

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

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

[java] view plain copy print ?

1. public void setFactory(ViewFactory factory) {  
2.     mFactory = factory;  
3.     obtainView();  
4.     obtainView();  
5. }  

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

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

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

[java] view plain copy print ?

1. private View obtainView() {  
2.     View child = mFactory.makeView();  
3.     LayoutParams lp = (LayoutParams) child.getLayoutParams();  
4.     if (lp == null) {  
5.         lp = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);  
6.     }  
7.     addView(child, lp);  
8.     return child;  
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上

再来看看下面的方法

[java] view plain copy print ?

1. public void setImageResource(int resid)  
2. {  
3.     ImageView image = (ImageView)this.getNextView();  
4.     image.setImageResource(resid);  
5.     showNext();  
6. }  

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

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

[java] view plain copy print ?

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

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

[java] view plain copy print ?

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

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

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

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

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

ImageSwitcher实例

main.xml

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <ImageSwitcher  
8.         android:id="@+id/imageSwicher"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="0dip"  
11.         android:layout_weight="1"  
12.         android:background="@android:color/white"  
13.         android:gravity="center" >  
14.     </ImageSwitcher>  
15.   
16. </LinearLayout>  

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

[java] view plain copy print ?

1. package com.tianjf;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.MotionEvent;  
6. import android.view.View;  
7. import android.view.View.OnTouchListener;  
8. import android.view.animation.AnimationUtils;  
9. import android.widget.ImageSwitcher;  
10. import android.widget.ImageView;  
11. import android.widget.ViewSwitcher.ViewFactory;  
12.   
13. /** 
14.  * 一个左右滑动浏览图片的Demo 
15.  *  
16.  * @author tianjf 
17.  *  
18.  */  
19. public class ImageSwicherDemoActivity extends Activity implements ViewFactory,  
20.         OnTouchListener {  
21.   
22.     private ImageSwitcher imageSwicher;  
23.   
24.     // 图片数组  
25.     private int[] arrayPictures = { R.drawable.bg001, R.drawable.bg002,  
26.             R.drawable.bg003, R.drawable.bg004 };  
27.     // 要显示的图片在图片数组中的Index  
28.     private int pictureIndex;  
29.     // 左右滑动时手指按下的X坐标  
30.     private float touchDownX;  
31.     // 左右滑动时手指松开的X坐标  
32.     private float touchUpX;  
33.   
34.     @Override  
35.     public void onCreate(Bundle savedInstanceState) {  
36.         super.onCreate(savedInstanceState);  
37.         setContentView(R.layout.main);  
38.   
39.         imageSwicher = (ImageSwitcher) findViewById(R.id.imageSwicher);  
40.   
41.         // 为ImageSwicher设置Factory，用来为ImageSwicher制造ImageView  
42.         imageSwicher.setFactory(this);  
43.         // 设置ImageSwitcher左右滑动事件  
44.         imageSwicher.setOnTouchListener(this);  
45.     }  
46.   
47.     @Override  
48.     public View makeView() {  
49.         ImageView imageView = new ImageView(this);  
50.         imageView.setImageResource(arrayPictures[pictureIndex]);  
51.         return imageView;  
52.     }  
53.   
54.     @Override  
55.     public boolean onTouch(View v, MotionEvent event) {  
56.         if (event.getAction() == MotionEvent.ACTION_DOWN) {  
57.             // 取得左右滑动时手指按下的X坐标  
58.             touchDownX = event.getX();  
59.             return true;  
60.         } else if (event.getAction() == MotionEvent.ACTION_UP) {  
61.             // 取得左右滑动时手指松开的X坐标  
62.             touchUpX = event.getX();  
63.             // 从左往右，看前一张  
64.             if (touchUpX - touchDownX > 100) {  
65.                 // 取得当前要看的图片的index  
66.                 pictureIndex = pictureIndex == 0 ? arrayPictures.length - 1  
67.                         : pictureIndex - 1;  
68.                 // 设置图片切换的动画  
69.                 imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this,  
70.                         android.R.anim.slide_in_left));  
71.                 imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,  
72.                         android.R.anim.slide_out_right));  
73.                 // 设置当前要看的图片  
74.                 imageSwicher.setImageResource(arrayPictures[pictureIndex]);  
75.                 // 从右往左，看下一张  
76.             } else if (touchDownX - touchUpX > 100) {  
77.                 // 取得当前要看的图片的index  
78.                 pictureIndex = pictureIndex == arrayPictures.length - 1 ? 0  
79.                         : pictureIndex + 1;  
80.                 // 设置图片切换的动画  
81.                 // 由于Android没有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right编写了slide_out_left和slide_in_right  
82.                 imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this,  
83.                         R.anim.slide_out_left));  
84.                 imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,  
85.                         R.anim.slide_in_right));  
86.                 // 设置当前要看的图片  
87.                 imageSwicher.setImageResource(arrayPictures[pictureIndex]);  
88.             }  
89.             return true;  
90.         }  
91.         return false;  
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

[html] view plain copy print ?

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

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

[html] view plain copy print ?

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

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

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <TextSwitcher  
8.         android:id="@+id/textSwicher"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="0dip"  
11.         android:layout_weight="1"  
12.         android:background="@android:color/white"  
13.         android:gravity="center" >  
14.     </TextSwitcher>  
15.   
16. </LinearLayout>  

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

[java] view plain copy print ?

1. package com.tianjf;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.Gravity;  
6. import android.view.MotionEvent;  
7. import android.view.View;  
8. import android.view.View.OnTouchListener;  
9. import android.view.ViewGroup.LayoutParams;  
10. import android.view.animation.AnimationUtils;  
11. import android.widget.TextSwitcher;  
12. import android.widget.TextView;  
13. import android.widget.ViewSwitcher.ViewFactory;  
14.   
15. /** 
16.  * 一个左右滑动浏览文本的Demo 
17.  *  
18.  * @author tianjf 
19.  *  
20.  */  
21. public class TextSwitcherDemoActivity extends Activity implements ViewFactory,  
22.         OnTouchListener {  
23.   
24.     private TextSwitcher textSwicher;  
25.   
26.     // 图片数组  
27.     private String[] arrayTexts = { "文本01", "文本02", "文本03", "文本04" };  
28.     // 要显示的图片在图片数组中的Index  
29.     private int textIndex;  
30.     // 左右滑动时手指按下的X坐标  
31.     private float touchDownX;  
32.     // 左右滑动时手指松开的X坐标  
33.     private float touchUpX;  
34.   
35.     @Override  
36.     public void onCreate(Bundle savedInstanceState) {  
37.         super.onCreate(savedInstanceState);  
38.         setContentView(R.layout.main);  
39.   
40.         textSwicher = (TextSwitcher) findViewById(R.id.textSwicher);  
41.   
42.         // 为TextSwitcher设置Factory，用来为TextSwitcher制造TextView  
43.         textSwicher.setFactory(this);  
44.         // 设置TextSwitcher左右滑动事件  
45.         textSwicher.setOnTouchListener(this);  
46.     }  
47.   
48.     @Override  
49.     public View makeView() {  
50.         TextView textView = new TextView(this);  
51.         textView.setTextSize(100);  
52.         textView.setLayoutParams(new TextSwitcher.LayoutParams(  
53.                 LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
54.         textView.setGravity(Gravity.CENTER);  
55.         textView.setText(arrayTexts[textIndex]);  
56.         return textView;  
57.     }  
58.   
59.     @Override  
60.     public boolean onTouch(View v, MotionEvent event) {  
61.         if (event.getAction() == MotionEvent.ACTION_DOWN) {  
62.             // 取得左右滑动时手指按下的X坐标  
63.             touchDownX = event.getX();  
64.             return true;  
65.         } else if (event.getAction() == MotionEvent.ACTION_UP) {  
66.             // 取得左右滑动时手指松开的X坐标  
67.             touchUpX = event.getX();  
68.             // 从左往右，看前一文本  
69.             if (touchUpX - touchDownX > 100) {  
70.                 // 取得当前要看的文本的index  
71.                 textIndex = textIndex == 0 ? arrayTexts.length - 1  
72.                         : textIndex - 1;  
73.                 // 设置文本切换的动画  
74.                 textSwicher.setInAnimation(AnimationUtils.loadAnimation(this,  
75.                         android.R.anim.slide_in_left));  
76.                 textSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,  
77.                         android.R.anim.slide_out_right));  
78.                 // 设置当前要看的文本  
79.                 textSwicher.setText(arrayTexts[textIndex]);  
80.                 // 从右往左，看下一张  
81.             } else if (touchDownX - touchUpX > 100) {  
82.                 // 取得当前要看的文本的index  
83.                 textIndex = textIndex == arrayTexts.length - 1 ? 0  
84.                         : textIndex + 1;  
85.                 // 设置文本切换的动画  
86.                 // 由于Android没有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right编写了slide_out_left和slide_in_right  
87.                 textSwicher.setInAnimation(AnimationUtils.loadAnimation(this,  
88.                         R.anim.slide_out_left));  
89.                 textSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,  
90.                         R.anim.slide_in_right));  
91.                 // 设置当前要看的文本  
92.                 textSwicher.setText(arrayTexts[textIndex]);  
93.             }  
94.             return true;  
95.         }  
96.         return false;  
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，在此就不重复了。

转载于：http://blog.csdn.net/tianjf0514/article/details/7556487