Android中利用ViewFliper实现屏幕切换效果

Android中利用ViewFliper实现屏幕切换效果              

        分类：             Android Develop              2012-05-20 19:25     1322人阅读     评论(0)     收藏     举报    

android layout encoding class xml up

本示例是用ViewFliper实现屏幕切换图片的效果，手指滑动就实现图片的切换，主要实现效果如下：

程序结构图：

ViewFliper中的代码

[java] view plain copy print ?

1. package com.scnu.mc.myviewfliper;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.MotionEvent;  
6. import android.widget.ViewFlipper;  
7.   
8. public class ViewFliper extends Activity {  
9.   
10.     ViewFlipper viewFlipper = null;  
11.     float startX;  
12.   
13.     @Override  
14.     public void onCreate(Bundle savedInstanceState) {  
15.         super.onCreate(savedInstanceState);  
16.         setContentView(R.layout.main);  
17.   
18.         init();  
19.     }  
20.   
21.     private void init() {  
22.         viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper);  
23.     }  
24.   
25.     @Override  
26.     public boolean onTouchEvent(MotionEvent event) {  
27.         switch (event.getAction()) {  
28.         case MotionEvent.ACTION_DOWN:  
29.             startX = event.getX();  
30.             break;  
31.         case MotionEvent.ACTION_UP:  
32.   
33.             if (event.getX() > startX) { // 向右滑动  
34.                 viewFlipper.setInAnimation(this, R.anim.in_left2right);  
35.                 viewFlipper.setOutAnimation(this, R.anim.out_left2right);  
36.                 viewFlipper.showNext();  
37.             } else if (event.getX() < startX) { // 向左滑动  
38.                 viewFlipper.setInAnimation(this, R.anim.in_right2left);  
39.                 viewFlipper.setOutAnimation(this, R.anim.out_right2left);  
40.                 viewFlipper.showPrevious();  
41.             }  
42.             break;  
43.         }  
44.   
45.         return super.onTouchEvent(event);  
46.     }  
47.   
48. }  

package com.scnu.mc.myviewfliper;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ViewFlipper;

public class ViewFliper extends Activity {

	ViewFlipper viewFlipper = null;
	float startX;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		init();
	}

	private void init() {
		viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper);
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			startX = event.getX();
			break;
		case MotionEvent.ACTION_UP:

			if (event.getX() > startX) { // 向右滑动
				viewFlipper.setInAnimation(this, R.anim.in_left2right);
				viewFlipper.setOutAnimation(this, R.anim.out_left2right);
				viewFlipper.showNext();
			} else if (event.getX() < startX) { // 向左滑动
				viewFlipper.setInAnimation(this, R.anim.in_right2left);
				viewFlipper.setOutAnimation(this, R.anim.out_right2left);
				viewFlipper.showPrevious();
			}
			break;
		}

		return super.onTouchEvent(event);
	}

}

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" android:layout_height="fill_parent"  
4.     android:orientation="vertical">  
5.     <ViewFlipper android:id="@+id/viewFlipper"  
6.         android:layout_width="fill_parent" android:layout_height="fill_parent">  
7.         <!-- 第一个页面 -->  
8.         <LinearLayout android:layout_width="fill_parent"  
9.             android:layout_height="fill_parent" android:gravity="center">  
10.             <ImageView android:layout_width="wrap_content"  
11.                 android:layout_height="wrap_content" android:src="@drawable/a1" />  
12.         </LinearLayout>  
13.         <!-- 第二个页面 -->  
14.         <LinearLayout android:layout_width="fill_parent"  
15.             android:layout_height="fill_parent" android:gravity="center">  
16.             <ImageView android:layout_width="wrap_content"  
17.                 android:layout_height="wrap_content" android:src="@drawable/a2"  
18.                 android:gravity="center" />  
19.         </LinearLayout>  
20.         <!-- 第三个页面 -->  
21.         <LinearLayout android:layout_width="fill_parent"  
22.             android:layout_height="fill_parent" android:gravity="center">  
23.   
24.             <ImageView android:layout_width="wrap_content"  
25.                 android:layout_height="wrap_content" android:src="@drawable/a3"  
26.                 android:gravity="center" />  
27.         </LinearLayout>  
28.         <!-- 第四个页面 -->  
29.         <LinearLayout android:layout_width="fill_parent"  
30.             android:layout_height="fill_parent" android:gravity="center">  
31.   
32.             <ImageView android:layout_width="wrap_content"  
33.                 android:layout_height="wrap_content" android:src="@drawable/a4"  
34.                 android:gravity="center" />  
35.         </LinearLayout>  
36.     </ViewFlipper>  
37. </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">
	<ViewFlipper android:id="@+id/viewFlipper"
		android:layout_width="fill_parent" android:layout_height="fill_parent">
		<!-- 第一个页面 -->
		<LinearLayout android:layout_width="fill_parent"
			android:layout_height="fill_parent" android:gravity="center">
			<ImageView android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:src="@drawable/a1" />
		</LinearLayout>
		<!-- 第二个页面 -->
		<LinearLayout android:layout_width="fill_parent"
			android:layout_height="fill_parent" android:gravity="center">
			<ImageView android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:src="@drawable/a2"
				android:gravity="center" />
		</LinearLayout>
		<!-- 第三个页面 -->
		<LinearLayout android:layout_width="fill_parent"
			android:layout_height="fill_parent" android:gravity="center">

			<ImageView android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:src="@drawable/a3"
				android:gravity="center" />
		</LinearLayout>
		<!-- 第四个页面 -->
		<LinearLayout android:layout_width="fill_parent"
			android:layout_height="fill_parent" android:gravity="center">

			<ImageView android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:src="@drawable/a4"
				android:gravity="center" />
		</LinearLayout>
	</ViewFlipper>
</LinearLayout>

4个动画效果的xml文件

in_left2right----从左到右进入屏幕

[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  
4.         android:duration="30"  
5.         android:fromXDelta="-100%p"  
6.         android:toXDelta="0" />  
7. </set>  

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="30"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />
</set>

in_right2left----从右至左进入屏幕

[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  
4.         android:duration="30"  
5.         android:fromXDelta="100%p"  
6.         android:toXDelta="0" />  
7. </set>  

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="30"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>

out_left2right----从左到右退出屏幕

[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  
4.         android:duration="30"  
5.         android:fromXDelta="0"  
6.         android:toXDelta="100%p" />  
7. </set>  

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="30"
        android:fromXDelta="0"
        android:toXDelta="100%p" />
</set>

out_right2left----从右至左退出屏幕

[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  
4.         android:duration="30"  
5.         android:fromXDelta="0"  
6.         android:toXDelta="-100%p" />  
7. </set>  

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="30"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />
</set>

注：fromXDelta和toXDelta代表控件相对应parent的偏移距离，个人理解是"100%p"代表控件向右跑到屏幕的外面，"-100%p"代表控件向左跑到屏幕的外部。下面附上个人理解的图。