Feb
10
2012

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>

Download the files.


Written by admin in: android, sample code |

No Comments

RSS feed for comments on this post. TrackBack URL

Sorry, the comment form is closed at this time.

AndGPS | Connect Android Phone To GPS Solutions