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方法，在這個方法中如下寫：

@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stubreturn this.detector.onTouchEvent(event); }

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

在實現OnGestureListener的方法中判斷使用者的滑動來切換介面：

@Overridepublic 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);elseiamges[j].setImageResource(R.drawable.da);}}

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