【Android 介面效果2】ViewFlipper實現滑動翻頁
ViewFlippe
原文:http://www.cnblogs.com/lea-fu/p/3298827.htmlViewFilpper類繼承於ViewAnimator類。而ViewAnimator類繼承於FrameLayout。
檢視ViewAnimator類的原始碼可以看出此類的作用主要是為其中的View切換提供動畫效果。該類有如下幾個和動畫相關的方法。
setInAnimation:設定View進入螢幕時候使用的動畫。該方法有兩個過載方法,即可以直接傳入Animation物件,也可以傳入定義的Animation檔案的resourceID。
setOutAnimation:設定View退出螢幕時候使用的動畫。使用方法和setInAnimation方法一樣。
showNext:呼叫該方法可以顯示FrameLayout裡面的下一個View。
showPrevious:呼叫該方法可以來顯示FrameLayout裡面的上一個View。
檢視ViewFlipper的原始碼可以看到,ViewFlipper主要用來實現View的自動切換。該類提供瞭如下幾個主要的方法。
setFilpInterval:設定View切換的時間間隔。引數為毫秒。
startFlipping:開始進行View的切換,時間間隔是上述方法設定的間隔數。切換會迴圈進行。
stopFlipping:停止View切換。
setAutoStart:設定是否自動開始。如果設定為“true”,當ViewFlipper顯示的時候View的切換會自動開始。
一般情況下,我們都會使用ViewFilpper類實現View的切換,而不使用它的父類ViewAnimator類。
2)實現滑動—GestureDetector介紹
如果想要實現滑動翻頁的效果,就要了解另外一個類:android.view.GestureDetector類。GestureDetector類中可以用來檢測各種手勢事件。該類有兩個回撥介面,分別用來通知具體的事件。
GestureDetector.OnDoubleTapListener:用來通知DoubleTap事件,類似於PC上面的滑鼠的雙擊事件。
GestureDetector.OnGestureListener:用來通知普通的手勢事件,該介面有六個回撥方法,具體的可以檢視API。這裡想要實現滑動的判斷,就需要用到其中的onFling()方法。
3)具體的實現
下面的程式碼片段詳細說明了如何實現滑動翻頁:
工程檔案截圖:
效果圖:
實現程式碼:
Main.java
package com.leaf.android; import android.app.Activity; import android.os.Bundle; import android.view.GestureDetector; import android.view.MotionEvent; import android.view.View; import android.view.GestureDetector.OnGestureListener; import android.view.animation.AnimationUtils; import android.widget.ImageView; import android.widget.ViewFlipper; /** * Android實現左右滑動效果 * * @author leaf * */ public class Main extends Activity implements OnGestureListener { private ViewFlipper flipper; private GestureDetector detector; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); detector = new GestureDetector(this); flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper1); flipper.addView(addTextView(R.drawable.img1)); flipper.addView(addTextView(R.drawable.img2)); flipper.addView(addTextView(R.drawable.img3)); flipper.addView(addTextView(R.drawable.img4)); flipper.addView(addTextView(R.drawable.img5)); } private View addTextView(int id) { ImageView iv = new ImageView(this); iv.setImageResource(id); return iv; } public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { if (e1.getX() - e2.getX() > 120) { this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in)); this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out)); this.flipper.showNext(); return true; } else if (e1.getX() - e2.getX() < -120) { this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in)); this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out)); this.flipper.showPrevious(); return true; } return false; } @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub return this.detector.onTouchEvent(event); } public boolean onDown(MotionEvent e) { // TODO Auto-generated method stub return false; } public void onLongPress(MotionEvent e) { // TODO Auto-generated method stub } public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // TODO Auto-generated method stub return false; } public void onShowPress(MotionEvent e) { // TODO Auto-generated method stub } public boolean onSingleTapUp(MotionEvent e) { // TODO Auto-generated method stub return false; } }
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/ViewFlipper1" android:layout_width="fill_parent" android:layout_height="fill_parent" > </ViewFlipper> </LinearLayout>
push_left_in.xml檔案中程式碼:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="100%p" android:toXDelta="0" /> <alpha android:duration="500" android:fromAlpha="0.1" android:toAlpha="1.0" /> </set>
push_left_out.xml檔案中程式碼:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="0" android:toXDelta="-100%p" /> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1" /> </set>
push_right_in.xml檔案中程式碼:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="-100%p" android:toXDelta="0" /> <alpha android:duration="500" android:fromAlpha="0.1" android:toAlpha="1.0" /> </set>
push_right_out.xml檔案中程式碼:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="0" android:toXDelta="100%p" /> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1" /> </set>