Animation之ViewFlipper和ViewSwitcher

ViewFlipper继承于ViewAnimator，android.widget.ViewAnimator类继承至FrameLayout，ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。

该类有如下几个和动画相关的函数：

l setInAnimation：设置View进入屏幕时候使用的动画，该函数有两个版本，一个接受单个参数，类型为android.view.animation.Animation；一个接受两个参数，类型为Context和int，分别为 Context对象和定义Animation的resourceID。

• setOutAnimation: 设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。
• showNext：调用该函数来显示FrameLayout里面的下一个View。
• showPrevious：调用该函数来显示FrameLayout里面的上一个View。

 

 

一般不直接使用ViewAnimator而是使用它的两个子类ViewFlipper和ViewSwitcher。
ViewFlipper可以用来指定FrameLayout内多个View之间的切换效果，可以一次指定也可以每次切换的时候都指定单独的效果。该类额外提供了如下几个函数： 

XML属性：

属性名称	描述
android:autoStart	当设为true时，自动启动动画。此时必须是一个布尔值，属性值为true或false （对应于全局资源属性R.attr.autoStart）
android:flipInterval	显示下一个视图的时间间隔

• isAutoStart 如果视图显示到窗口上时会自动调用startFlipping()方法，则返回true
• isFlipping：用来判断View切换是否正在进行
• setAutoStart 设置视图显示到窗口上时是否会自动调用startFlipping()方法
• setFilpInterval：设置View之间切换的时间间隔
• startFlipping：使用上面设置的时间间隔来开始切换所有的View，切换会循环进行
• stopFlipping: 停止View切换

ViewFlipper示例：
记住，ViewFlipper是继承至FrameLayout的，所以它是一个Layout里面可以放置多个View。在示例中定义一个 ViewFlipper，里面包含三个ViewGroup作为示例的三个屏幕，每个ViewGroup中包含一个按钮和一张图片，点击按钮则显示下一个屏 幕。代码如下（res\layout\main.xml）：

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>   
2. <LinearLayout   
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:orientation="vertical"    
5.     android:layout_width="fill_parent"  
6.     android:layout_height="fill_parent">   
7.     <ViewFlipper android:id="@+id/details"  
8.        android:layout_width="fill_parent"    
9.        android:layout_height="fill_parent"  
10.        android:persistentDrawingCache="animation"  
11.        android:flipInterval="1000"  
12.        android:inAnimation="@anim/push_left_in"  
13.        android:outAnimation="@anim/push_left_out">   
14.        <LinearLayout   
15.            android:orientation="vertical"  
16.            android:layout_width="fill_parent"    
17.            android:layout_height="fill_parent">   
18.            <Button   
19.               android:text="Next"    
20.               android:id="@+id/Button_next1"  
21.               android:layout_width="fill_parent"    
22.               android:layout_height="wrap_content">   
23.            </Button>   
24.            <ImageView   
25.               android:id="@+id/image1"    
26.               android:src="@drawable/dell1"  
27.               android:layout_width="fill_parent"  
28.               android:layout_height="wrap_content">   
29.            </ImageView>   
30.        </LinearLayout>   
31.     
32.        <LinearLayout   
33.            android:orientation="vertical"  
34.            android:layout_width="fill_parent"    
35.            android:layout_height="fill_parent">   
36.            <Button   
37.               android:text="Next"    
38.               android:id="@+id/Button_next2"  
39.               android:layout_width="fill_parent"    
40.               android:layout_height="wrap_content">   
41.            </Button>   
42.            <ImageView   
43.               android:id="@+id/image2"    
44.               android:src="@drawable/lg"  
45.               android:layout_width="fill_parent"  
46.               android:layout_height="wrap_content">   
47.            </ImageView>   
48.        </LinearLayout>   
49.           
50.        <LinearLayout   
51.            android:orientation="vertical"  
52.            android:layout_width="fill_parent"    
53.            android:layout_height="fill_parent">   
54.            <Button   
55.               android:text="Next"    
56.               android:id="@+id/Button_next3"  
57.               android:layout_width="fill_parent"    
58.               android:layout_height="wrap_content">   
59.            </Button>   
60.            <ImageView   
61.               android:id="@+id/image3"    
62.               android:src="@drawable/lenovo"  
63.               android:layout_width="fill_parent"  
64.               android:layout_height="wrap_content">   
65.            </ImageView>   
66.        </LinearLayout>   
67.     
68.     </ViewFlipper>   
69.     
70. </LinearLayout>  

 

很简单，在Layout定义中指定动画的相关属性就可以了，通过persistentDrawingCache指定缓存策略；flipInterval指定每个View动画之间的时间间隔；inAnimation和outAnimation分别指定View进出使用的动画效果。动画效果定义如下：

1. res\anim\push_left_in.xml   
2. <?xml version="1.0" encoding="utf-8"?>   
3. <set xmlns:android="http://schemas.android.com/apk/res/android">   
4.     <translate   
5.     android:fromXDelta="100%p"    
6.     android:toXDelta="0"    
7.     android:duration="500"/>   
8.     <alpha   
9.     android:fromAlpha="0.0"    
10.     android:toAlpha="1.0"  
11.     android:duration="500" />   
12. </set>   
13. res\anim\push_left_out.xml   
14. <?xml version="1.0" encoding="utf-8"?>   
15. <set xmlns:android="http://schemas.android.com/apk/res/android">   
16.     <translate   
17.     android:fromXDelta="0"    
18.     android:toXDelta="-100%p"    
19.     android:duration="500"/>   
20.     <alpha   
21.     android:fromAlpha="1.0"    
22.     android:toAlpha="0.0"    
23.     android:duration="500" />   
24. </set>  

 

Activity代码如下（src\cc\c\TestActivity.java）：

1. public class TestActivity extends Activity {   
2.     private ViewFlipper mViewFlipper;   
3.     @Override  
4.     public void onCreate(Bundle savedInstanceState) {   
5.         super.onCreate(savedInstanceState);   
6.         setContentView(R.layout.main);   
7.            
8.         Button buttonNext1 = (Button) findViewById(R.id.Button_next1);   
9.         mViewFlipper = (ViewFlipper) findViewById(R.id.flipper);   
10.         buttonNext1.setOnClickListener(new View.OnClickListener() {   
11.             public void onClick(View view) {   
12.                 //在layout中定义的属性，也可以在代码中指定   
13. //             mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_left_in);   
14. //             mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_left_out);   
15. //             mViewFlipper.setPersistentDrawingCache(ViewGroup.PERSISTENT_ALL_CACHES); //指定缓存策略  
16. //             mViewFlipper.setFlipInterval(1000); 
17.                mViewFlipper.showPrevious(); //显示前一个视图 
18.                mViewFlipper.showNext();//显示下一个视图
19. //调用下面的函数将会循环显示mViewFlipper内的所有View。
20. //             mViewFlipper.startFlipping(); //启动循环切换  
21.         }   
22.         });   
23.     
24.         Button buttonNext2 = (Button) findViewById(R.id.Button_next2);   
25.         buttonNext2.setOnClickListener(new View.OnClickListener() {   
26.             public void onClick(View view) {   
27.                 mViewFlipper.showNext();   
28.         }   
29.     
30.         });      
31.         Button buttonNext3 = (Button) findViewById(R.id.Button_next3);   
32.         buttonNext3.setOnClickListener(new View.OnClickListener() {   
33.             public void onClick(View view) {   
34.                 mViewFlipper.showNext();   
35.         }   
36.     
37.         });   
38.     
39.     }   
40.     } 
    

ViewSwitcher 顾名思义Switcher特指在两个View之间切换，可以通过该类指定一个ViewSwitcher.ViewFactory 工程类来创建这两个View。该类也具有两个子类ImageSwitcher、TextSwitcher分别用于图片和文本切换。

注意:一个ViewSwitcher只允许包含两个子视图，且一次仅能显示一个。
（译者注：与ViewFlipper类相似，但该类不常用，常用其两个子类ImageSwitcher：转换图片时增加动画效果;TextSwitcher： 转换文字时增加动画效果; 其实例见apidemos中ImageSwitcher实例和TextSwitcher实例）

公共方法：

public void addView(View child, int index, ViewGroup.LayoutParams params)——添加一个指定布局参数的子视图

参数：child     添加的子视
      index     添加的子视图的索引
      params    子视图的布局参数
      异常
      IllegalStateException       如果切换器中已经包含了两个视图时。

   

public View getNextView ()　　返回下一个要显示的视图

　　返回视图切换之后将要显示出的下一个视图

 

public void reset ()　重置视图转换器(ViewSwitcher）来隐藏所有存在的视图，并使转换器达到一次动画都还没有播放的状态。

public void setFactory (ViewSwitcher.ViewFactory factory)——设置用来生成将在视图转换器中切换的两个视图的工厂。也可以调用两次 addView(android.view.View, int, android.view.ViewGroup.LayoutParams)来替代使用工厂的方法。
可通过实现ViewSwitcher.ViewFactory接口的makeView()方法来添加布局。

文字转换器控件（改变文字时增加一些动画效果）

    被用来使屏幕上的label产生动画效果。每当setText(CharSequence)被调用时，TextSwitcher使用动画方式将当前的文字内容消失并显示新的文字内容。

公共方法:
public void setCurrentText (CharSequence text)   设置当前显示的文本视图的文字内容。非动画方式显示。

public void setText (CharSequence text)   设置下一视图的文本内容并切换到下一视图。可以动画的退出当前文本内容，显示下一文本内容。

示例：
public class TextSwitcher1 extends Activity implements ViewSwitcher.ViewFactory,
        View.OnClickListener {

    private TextSwitcher mSwitcher;

    private int mCounter = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.text_switcher_1);

        mSwitcher = (TextSwitcher) findViewById(R.id.switcher);
        // 指定转换器的 ViewSwitcher.ViewFactory
        mSwitcher.setFactory(this);
         // 设置淡入和淡出的动画效果
        Animation in = AnimationUtils.loadAnimation(this,
                android.R.anim.fade_in);
        Animation out = AnimationUtils.loadAnimation(this,
                android.R.anim.fade_out);
        mSwitcher.setInAnimation(in);
        mSwitcher.setOutAnimation(out);
         // 单击一次按钮改变一次文字
        Button nextButton = (Button) findViewById(R.id.next);
        nextButton.setOnClickListener(this);

        updateCounter();
    }

    public void onClick(View v) {
        mCounter++;
        updateCounter();
    }

    private void updateCounter() {
        mSwitcher.setText(String.valueOf(mCounter));
    }
   // 重写 ViewSwitcher.ViewFactory 的 makeView()，返回一个 View
    public View makeView() {
        TextView t = new TextView(this);
        t.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL);
        t.setTextSize(36);
        return t;
    }
}

ImageSwitcher图片切换器

ImageSwitcher是Android中控制图片展示效果的一个控件，每当调用以下方法：

　　　　setImageURI(Uri uri)：设置图片地址

　　　　setImageResource(int resid)：设置图片资源库

　　　　setImageDrawable(Drawable drawable)：绘制图片

ImageSwitcher使用动画方式实现图片之间的切换效果。

 

示例:

public class ImageSwitcher1 extends Activity implements
        AdapterView.OnItemSelectedListener, ViewSwitcher.ViewFactory {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.image_switcher_1);
        //实例化ImageSwitcher
        mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);

        //指定转换器的 ViewSwitcher.ViewFactory
        mSwitcher.setFactory(this);

       //指定转换的动画效果
        mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
                android.R.anim.fade_in));
        mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
                android.R.anim.fade_out));

        Gallery g = (Gallery) findViewById(R.id.gallery);
        g.setAdapter(new ImageAdapter(this));
        g.setOnItemSelectedListener(this);
    }

    public void onItemSelected(AdapterView<?> parent, View v, int position, long id) {

       //设置ImageSwitcher显示的图片，将触发图片之间的变化
        mSwitcher.setImageResource(mImageIds[position]);
    }

    public void onNothingSelected(AdapterView<?> parent) {
    }
   // 重写 ViewSwitcher.ViewFactory 的 makeView()，返回一个 View
    public View makeView() {
        ImageView i = new ImageView(this);
        i.setBackgroundColor(0xFF000000);
        i.setScaleType(ImageView.ScaleType.FIT_CENTER);
        i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT));
        return i;
    }

    private ImageSwitcher mSwitcher;

    public class ImageAdapter extends BaseAdapter {
        public ImageAdapter(Context c) {
            mContext = c;
        }

        public int getCount() {
            return mThumbIds.length;
        }

        public Object getItem(int position) {
            return position;
        }

        public long getItemId(int position) {
            return position;
        }

        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView i = new ImageView(mContext);

            i.setImageResource(mThumbIds[position]);
            i.setAdjustViewBounds(true);
            i.setLayoutParams(new Gallery.LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
            i.setBackgroundResource(R.drawable.picture_frame);
            return i;
        }

        private Context mContext;

    }

    private Integer[] mThumbIds = {
            R.drawable.sample_thumb_0, R.drawable.sample_thumb_1,
            R.drawable.sample_thumb_2, R.drawable.sample_thumb_3,
            R.drawable.sample_thumb_4, R.drawable.sample_thumb_5,
            R.drawable.sample_thumb_6, R.drawable.sample_thumb_7};

    private Integer[] mImageIds = {
            R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2,
            R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7};

}

总结：
ViewSwither可以在两个视图间转换时显示动画，一个ViewSwitcher只允许包含两个子视图，且一次仅能显示一个。常用其两个子类ImageSwitcher：转换图片时增加动画效果; TextSwitcher：转换文字时增加动画效果。