Implement swiping page effect using GestureDetector and ViewFlipper
Refer to the exercise “Detect swipe using SimpleOnGestureListener” and “Bi-direction ViewFlipper“. It’s easy to implement swiping page effect using GestureDetector and ViewFlipper.
Modify the code of the activity from the last exercise “Bi-direction ViewFlipper“.
package com.exercise.AndroidViewFlipper;
import android.app.Activity;import android.os.Bundle;import android.view.GestureDetector;import android.view.GestureDetector.SimpleOnGestureListener;import android.view.MotionEvent;import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.widget.ViewFlipper;
public class AndroidViewFlipperActivity extends Activity {
ViewFlipper page;
Animation animFlipInForeward; Animation animFlipOutForeward; Animation animFlipInBackward; Animation animFlipOutBackward;
/** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);
page = (ViewFlipper)findViewById(R.id.flipper);
animFlipInForeward = AnimationUtils.loadAnimation(this, R.anim.flipin); animFlipOutForeward = AnimationUtils.loadAnimation(this, R.anim.flipout); animFlipInBackward = AnimationUtils.loadAnimation(this, R.anim.flipin_reverse); animFlipOutBackward = AnimationUtils.loadAnimation(this, R.anim.flipout_reverse);
}
private void SwipeRight(){ page.setInAnimation(animFlipInBackward); page.setOutAnimation(animFlipOutBackward); page.showPrevious(); }
private void SwipeLeft(){ page.setInAnimation(animFlipInForeward); page.setOutAnimation(animFlipOutForeward); page.showNext(); }
@Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub return gestureDetector.onTouchEvent(event); }
SimpleOnGestureListener simpleOnGestureListener = new SimpleOnGestureListener(){
@Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
float sensitvity = 50; if((e1.getX() - e2.getX()) > sensitvity){ SwipeLeft(); }else if((e2.getX() - e1.getX()) > sensitvity){ SwipeRight(); }
return true; }
};
GestureDetector gestureDetector = new GestureDetector(simpleOnGestureListener);}
Modify main.xml to remove buttons.
<?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" >
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" />
<ViewFlipper android:id="@+id/flipper" android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/ic_launcher"/> </LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:gravity="center" android:background="#C0C0C0"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_launcher"/> </LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:gravity="center" android:background="#A0A0A0"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_launcher"/> </LinearLayout>
</ViewFlipper></LinearLayout>
No Comments
RSS feed for comments on this post. TrackBack URL
Sorry, the comment form is closed at this time.