[android ui]动画特效的应用----ViewSwitcher控件

     为了让活动能不断更新视图控件的内容，为每一个视图控件绑定动画特效显得非常繁琐，但是Android SDK提供的ViewSwitcher控件，能够高效简便地更新视图。

       ViewSwitcher有两个子视图控件，并处理从当前子视图到下一个子视图的过渡。ViewSwitcher的子视图控件是使用ViewFactory以编程方式生成的。

       ViewSwitcher有两个子类：

       → TextSwitcher：让您能够在两个TextView控件之间切换。

       → ImageSwitcher：让您能够在两个ImageView控件之间切换。

       下面以ImageSwitcher为例来说一下使用的步骤：

 

1、  制作两个动画特效switcher_in.xml和switcher_out.xml：

switcher_in.xml：

[html] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <set xmlns:android="http://schemas.android.com/apk/res/android">  
4.   
5.          <scale  
6.   
7.                    android:fromXScale="0.0"  
8.   
9.                    android:toXScale="1.0"  
10.   
11.                    android:fromYScale="1.0"  
12.   
13.                    android:toYScale="1.0"  
14.   
15.                    android:pivotX="99%"  
16.   
17.                    android:pivotY="99%"  
18.   
19.                    android:duration="500" />  
20.            
21.          <alpha   
22.   
23.                    android:interpolator="@android:anim/linear_interpolator"  
24.   
25.                    android:fromAlpha="0.0"  
26.   
27.                    android:toAlpha="1.0"  
28.   
29.                    android:duration="500"/>  
30.   
31. </set>  
32.   
33.    

switcher_out.xml：

[html] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <set xmlns:android="http://schemas.android.com/apk/res/android">  
4.   
5.          <scale   
6.   
7.                    android:fromXScale="1.0"  
8.   
9.                    android:toXScale="0.0"  
10.   
11.                    android:fromYScale="1.0"  
12.   
13.                    android:toYScale="1.0"  
14.   
15.                    android:pivotX="1%"  
16.   
17.                    android:pivotY="1%"  
18.   
19.                    android:duration="500"/>  
20.   
21.          <alpha   
22.   
23.                    android:interpolator="@android:anim/linear_interpolator"  
24.   
25.                    android:fromAlpha="1.0"  
26.   
27.                    android:toAlpha="0.0"  
28.   
29.                    android:duration="500"/>  
30.   
31. </set>  

 

2、  在布局文件中添加ImageSwitcher，并将刚创建的动画与其绑定：

        

[html] view plaincopyprint?

1. <ImageSwitcher   
2.   
3.                   android:id="@+id/imageSwitcher"  
4.   
5.                   android:layout_width="wrap_content"  
6.   
7.                   android:layout_height="wrap_content"  
8.   
9.                   android:inAnimation="@anim/switcher_in"  
10.   
11.                   android:outAnimation="@anim/switcher_out">  
12.   
13.         </ImageSwitcher>  

3、  为ImageSwitcher创建布局资源image_switcher_view.xml：

[html] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <ImageView xmlns:android="http://schemas.android.com/apk/res/android"  
4.   
5.          android:layout_width="match_parent"  
6.   
7.          android:layout_height="match_parent"  
8.   
9.          android:scaleType="fitCenter" >  
10.   
11. </ImageView>  

4、初始化ImageSwitcher控件，实现自定义ViewFactory类：

 

[java] view plaincopyprint?

1. private ImageSwitcher imageSwitcher;  
2.   
3. private float touchDownX , touchUpX;  
4.   
5. int index = 0;  
6.   
7. int[] arrayImage = {R.drawable.a7 , R.drawable.a9 , R.drawable.a11 , R.drawable.a12};  
8.   
9. @Override  
10.   
11. protected void onCreate(Bundle savedInstanceState)  
12.   
13. {  
14.   
15.     super.onCreate(savedInstanceState);  
16.   
17.     setContentView(R.layout.activity_main);  
18.   
19.     imageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher);  
20.   
21.     imageSwitcher.setFactory(new MyImageFacotry());  
22.   
23.     imageSwitcher.setImageResource(arrayImage[index]);  
24.   
25. }  
26.   
27. private class MyImageFacotry implements ViewFactory  
28.   
29. {  
30.   
31.         public View makeView()   
32.   
33.         {  
34.   
35.         ImageView imageView = (ImageView)LayoutInflater.from(getApplicationContext()).inflate(R.layout.image_switcher_view, imageSwitcher, false);  
36.   
37.                    return imageView;  
38.   
39.         }  
40.   
41. }  

5、  为ImageSwitcher添加手势滑动监听效果：

 

[java] view plaincopyprint?

1. imageSwitcher.setOnTouchListener(new OnTouchListener()  
2.   
3. {  
4.   
5.     public boolean onTouch(View arg0, MotionEvent arg1)   
6.   
7.     {  
8.   
9.     if (arg1.getAction() == MotionEvent.ACTION_DOWN)  
10.   
11.     {  
12.   
13.     touchDownX = arg1.getX();  
14.   
15.     return true;  
16.   
17.     }  
18.   
19.     else if(arg1.getAction() == MotionEvent.ACTION_UP)  
20.   
21.     {  
22.   
23.         touchUpX = arg1.getX();  
24.   
25.         if (touchDownX - touchUpX > 100)//左滑  
26.   
27.         {  
28.   
29.             if (index >0 )   
30.   
31.             {  
32.   
33.                 imageSwitcher.setInAnimation(getApplicationContext(), R.anim.switcher_in_right);  
34.   
35.                 imageSwitcher.setOutAnimation(getApplicationContext(), R.anim.switcher_out_right);  
36.   
37.                 imageSwitcher.setImageResource(arrayImage[index]);  
38.   
39.                 index--;  
40.   
41.             }  
42.   
43.         }  
44.   
45.         else  
46.   
47.                    {  
48.   
49.                         if (index < 3)  
50.   
51.                             {  
52.   
53.                                       imageSwitcher.setInAnimation(getApplicationContext(), R.anim.switcher_in_left);  
54.   
55.                                       imageSwitcher.setOutAnimation(getApplicationContext(), R.anim.switcher_out_left);  
56.   
57.                                       imageSwitcher.setImageResource(arrayImage[index]);  
58.   
59.                                       index++;  
60.   
61.                              }  
62.   
63.                      }  
64.   
65.                      return true;  
66.   
67.     }  
68.   
69.            return false;  
70.   
71.  }  
72. });  
73.   
74.    

源码下载地址：动画特效的应用----ViewSwitcher控件.docx