android利用ViewFlipper实现屏幕切换动画效果

1、屏幕切换指的是在同一个Activity内屏幕见的切换，最长见的情况就是在一个FrameLayout内有多个页面，比如一个系统设置页面；一个个性化设置页面。

2、介绍ViewFilpper类

ViewFlipper

extends ViewAnimator

java.lang.Object
↳	android.view.View
	↳	android.view.ViewGroup
		↳	android.widget.FrameLayout
			↳	android.widget.ViewAnimator
				↳	android.widget.ViewFlipper

Class Overview

Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

意思是：简单的ViewAnimator之间,两个或两个以上的view加上动画效果。只有一个小孩会显示在一个时间。如果需要,每个孩子能自动翻转之间在固定的时间间隔。

该类继承了Framelayout类，ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。

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

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

setOutAnimation: 设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。

showNext： 调用该函数来显示FrameLayout里面的下一个View。

showPrevious： 调用该函数来显示FrameLayout里面的上一个View。

3、首选看一下定义四个动画的xml文件：

in_left_right.xml——从左到右进入屏幕

[java] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>
2. <set
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. >
6. <translate
7. android:fromXDelta="-100%p"
8. android:toXDelta="0"
9. android:duration="2000"
10. />
12. </set>

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="2000" /> </set>
out_left_right.xml——从左到右出去屏幕

[java] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>
2. <set
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. >
6. <translate
7. android:fromXDelta="0"
8. android:toXDelta="100%p"
9. android:duration="2000"
10. />
12. </set>

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="2000" /> </set>
in_right_left.xml——从右到左进入屏幕

[java] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>
2. <set
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. >
6. <translate
7. android:fromXDelta="100%p"
8. android:toXDelta="0"
9. android:duration="2000"
10. />
12. </set>

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="2000" /> </set>
out_right_left.xml——从右到左出去屏幕

[java] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>
2. <set
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. >
6. <translate
7. android:fromXDelta="0"
8. android:toXDelta="-100%p"
9. android:duration="2000"
10. />
12. </set>

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="2000" /> </set>
4、定义main.xml文件

[java] 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:background="#ffffff"
6. android:orientation="vertical"
7. android:padding="15dp" >
9. <ViewFlipper
10. android:id="@+id/flipper"
11. android:layout_width="fill_parent"
12. android:layout_height="fill_parent" >
14. <!-- 第一个页面 -->
15. <LinearLayout
16. android:id="@+id/layout1"
17. android:layout_width="fill_parent"
18. android:layout_height="fill_parent"
19. android:orientation="vertical">
21. <Spinner
22. android:id="@+id/spinner"
23. android:layout_width="fill_parent"
24. android:layout_height="wrap_content" />
26. <com.tiantang.testandroid1.MyTextView
27. android:id="@+id/mytext"
28. android:layout_width="fill_parent"
29. android:layout_height="wrap_content"
30. android:clickable="true"
31. android:ellipsize="marquee"
32. android:focusable="true"
33. android:focusableInTouchMode="true"
34. android:lines="1"
35. android:marqueeRepeatLimit="marquee_forever"
36. android:scrollHorizontally="true"
37. android:text="1234567890987654321234556778909876765453234567898765322"
38. android:textColor="#000000"
39. android:textSize="20dp" />
40. </LinearLayout>
41. <!-- 第二个页面 -->
42. <SlidingDrawer
43. android:id="@+id/drawer"
44. android:layout_width="fill_parent"
45. android:layout_height="fill_parent"
46. android:content="@+id/content"
47. android:handle="@+id/handle" >
49. <ImageView
50. android:id="@id/handle"
51. android:layout_width="50dp"
52. android:layout_height="50dp"
53. android:src="@drawable/info" />
55. <ImageView
56. android:id="@id/content"
57. android:layout_width="fill_parent"
58. android:layout_height="fill_parent"
59. android:src="@drawable/confirm_bg" />
60. </SlidingDrawer>
61. </ViewFlipper>
63. </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:background="#ffffff" android:orientation="vertical" android:padding="15dp" > <ViewFlipper android:id="@+id/flipper" android:layout_width="fill_parent" android:layout_height="fill_parent" > <!-- 第一个页面 --> <LinearLayout android:id="@+id/layout1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <Spinner android:id="@+id/spinner" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <com.tiantang.testandroid1.MyTextView android:id="@+id/mytext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:clickable="true" android:ellipsize="marquee" android:focusable="true" android:focusableInTouchMode="true" android:lines="1" android:marqueeRepeatLimit="marquee_forever" android:scrollHorizontally="true" android:text="1234567890987654321234556778909876765453234567898765322" android:textColor="#000000" android:textSize="20dp" /> </LinearLayout> <!-- 第二个页面 --> <SlidingDrawer android:id="@+id/drawer" android:layout_width="fill_parent" android:layout_height="fill_parent" android:content="@+id/content" android:handle="@+id/handle" > <ImageView android:id="@id/handle" android:layout_width="50dp" android:layout_height="50dp" android:src="@drawable/info" /> <ImageView android:id="@id/content" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/confirm_bg" /> </SlidingDrawer> </ViewFlipper> </LinearLayout>

5、java代码实现：

[java] view plain copy print ?

1. package com.tiantang.testandroid1;
3. import android.app.Activity;
4. import android.content.Context;
5. import android.os.Bundle;
6. import android.view.GestureDetector;
7. import android.view.GestureDetector.OnGestureListener;
8. import android.view.LayoutInflater;
9. import android.view.MotionEvent;
10. import android.view.View;
11. import android.view.View.OnTouchListener;
12. import android.view.ViewGroup;
13. import android.widget.ArrayAdapter;
14. import android.widget.BaseAdapter;
15. import android.widget.Button;
16. import android.widget.EditText;
17. import android.widget.ListView;
18. import android.widget.RadioButton;
19. import android.widget.SlidingDrawer;
20. import android.widget.Spinner;
21. import android.widget.TextView;
22. import android.widget.ViewFlipper;
24. public class TestAndroid1Activity extends Activity {
25. /** Called when the activity is first created. */
26. private Spinner spinner;
28. private ViewFlipper flipper;
29. private MyAdapter adapter;
30. private TextView text;
31. private SlidingDrawer drawer;
32. private GestureDetector detector;
34. @Override
35. public void onCreate(Bundle savedInstanceState) {
36. super.onCreate(savedInstanceState);
37. setContentView(R.layout.main);
38. spinner = (Spinner) findViewById(R.id.spinner);
39. drawer = (SlidingDrawer) findViewById(R.id.drawer);
40. flipper = (ViewFlipper) findViewById(R.id.flipper);
41. String[] strs = new String[]{"1234567890987654321234556778909876765453234567898765322"};
42. ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.mytext, strs);
43. spinner.setAdapter(adapter);
45. flipper.setLongClickable(true);
46. flipper.setOnTouchListener(new OnTouchListener() {
47. @Override
48. public boolean onTouch(View v, MotionEvent event) {
49. // TODO Auto-generated method stub
50. detector.onTouchEvent(event);
51. return false;
52. }
53. });
54. detector = new GestureDetector(this, new OnGestureListener(){
55. @Override
56. public boolean onDown(MotionEvent e) {
57. //用户轻触屏幕。（单击）
58. return true;
59. }
61. @Override
62. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
63. //用户按下屏幕，快速移动后松开（就是在屏幕上滑动）
64. 　　 //e1:第一个ACTION_DOWN事件（手指按下的那一点）
65. 　　 //e2:最后一个ACTION_MOVE事件 （手指松开的那一点）
66. 　 //velocityX:手指在x轴移动的速度 单位：像素/秒
67. 　　 //velocityY:手指在y轴移动的速度 单位：像素/秒
69. int x = (int) (e2.getX() - e1.getX());
70. if(x>0){
71. flipper.setInAnimation(TestAndroid1Activity.this,R.anim.in_left_right );
72. flipper.setOutAnimation(TestAndroid1Activity.this,R.anim.out_left_right );
73. flipper.showPrevious();
74. }else{
75. flipper.setInAnimation(TestAndroid1Activity.this,R.anim.in_right_left );
76. flipper.setOutAnimation(TestAndroid1Activity.this,R.anim.out_right_left );
77. flipper.showNext();
78. }
79. return true;
80. }
81. @Override
82. public void onLongPress(MotionEvent e) {
83. // TODO Auto-generated method stub
84. //用户长按屏幕
86. }
87. @Override
88. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
89. // TODO Auto-generated method stub
90. return false;//用户按下屏幕并拖动
92. }
93. @Override
94. public void onShowPress(MotionEvent e) {
95. // TODO Auto-generated method stub
96. //用户轻触屏幕，尚末松开或拖动，注意，强调的是没有没有松开或者拖动状态
97. }
98. @Override
99. public boolean onSingleTapUp(MotionEvent e) {
100. // TODO Auto-generated method stub
101. return false;//用户轻触屏幕后松开。
102. }
103. });
104. }

转载于:https://my.oschina.net/haquanwen/blog/56189