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

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

程序结构图：

ViewFliper中的代码

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代码

<?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----从左到右进入屏幕

<?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----从右至左进入屏幕

<?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----从左到右退出屏幕

<?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----从右至左退出屏幕

<?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"代表控件向左跑到屏幕的外部。下面附上个人理解的图。