Android使用ViewFlipper實現左右滑動效果面

效果看完了就來實現這個效果。 1.布局文件 主界面使用下面的布局：  

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/ViewFlipper1"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">
    </ViewFlipper>
    
    
    
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        
        android:layout_gravity="bottom|center_horizontal"
        android:layout_height="wrap_content"
        
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/da"
          
            android:id="@+id/imageview1"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/xiao"
            android:id="@+id/imageview2"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/xiao"
            android:id="@+id/imageview3"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/xiao"
            android:id="@+id/imageview4"
            />
            
        </LinearLayout>


</FrameLayout>

簡單的介紹一下布局文件：最外層是一個FrameLayout，使用FrameLayout就是為了是的下面的四個點在ViewFlipper上面。LayoutLayout在FrameLayout的下面和水平居中。

2.ViewFlipper的使用

flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper1);
		flipper.addView(addImageView(R.drawable.png1o));
		flipper.addView(addImageView(R.drawable.png2o));
		flipper.addView(addImageView(R.drawable.png3o));

		flipper.addView(addView());

在Activity中聲明一個ViewFlipper的對象，在布局中找到。將三張圖片加到ViewFlipper中，另外再加一個View，這個View是從XML布局文件中得到的。布局文件如下：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    
    >
<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="45dp"      
        android:text="進入程序"
        android:textColor="#3E3E3E" 
        android:layout_gravity="center_horizontal"
        />
</LinearLayout> 

在這個布局文件中有一個Button，用於跳轉Activity用。

在Activity中聲明一個GestureDetector對象，在onCreate方法中分配內存。

detector = new GestureDetector(this);

使用this為參數，那麼就要使得activity類impllements OnGestureListener接口。重寫幾個方法。覆蓋父類的onTouchEvent方法，在這個方法中如下寫：

@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		return this.detector.onTouchEvent(event); 
	}

這樣就使得detector能接受消息響應了。

在實現OnGestureListener的方法中判斷用戶的滑動來切換界面：

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		System.out.println("in------------>>>>>>>");
		if (e1.getX() - e2.getX() > 120) {
			if (i < 3) {
				i++;
				setImage(i);
				this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
						R.anim.animation_right_in));
				this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
						R.anim.animation_left_out));
				this.flipper.showNext();
			}
			return true;
		} 
		else if (e1.getX() - e2.getX() < -120) {
			if (i > 0) {
				i--;
				setImage(i);
				this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
						R.anim.animation_left_in));
				this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
						R.anim.animation_right_out));
				this.flipper.showPrevious();
			}
			return true;
		}
		return false;
		
	}
	
	void setImage(int i)
	{
		for(int j=0;j<4;j++)
		{
			if(j!=i)
			iamges[j].setImageResource(R.drawable.xiao);
			else
				iamges[j].setImageResource(R.drawable.da);
		}
	}

界面切換的時候改變下面的四個小ImageView的圖片。切換的動畫在res/anim文件夾中