Android Viewflipper sequence with multiple views

Question

I want to add a viewflipper with multiple views in it (say 3 views with one image in each view). Following is my code :

In xml :

<ViewFlipper
android:id="@+id/view_flipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="6dip" >

<!-- The child Views/Layout to flip -->


<!-- Layout 1 for 1st Screen -->

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/help1" />
</LinearLayout>


<!-- Layout 2 for 2nd Screen -->

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/help2" />
</LinearLayout>

<!-- Layout 3 for 3rd Screen -->

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/help3" />
</LinearLayout>


</ViewFlipper>

In Java:

viewFlipper = (ViewFlipper) findViewById(R.id.view_flipper);

// Method to handle touch event like left to right swap and right to left swap
public boolean onTouchEvent(MotionEvent touchevent) 
{
switch (touchevent.getAction())
{
// when user first touches the screen to swap
case MotionEvent.ACTION_DOWN: 
{
lastX = touchevent.getX();
break;
}
case MotionEvent.ACTION_UP: 
{
float currentX = touchevent.getX();

// if left to right swipe on screen
if (lastX < currentX) 
{
// If no more View/Child to flip
if (viewFlipper.getDisplayedChild() == 0)
break;

// set the required Animation type to ViewFlipper
// The Next screen will come in form Left and current Screen will go OUT from Right 
viewFlipper.setInAnimation(this, R.anim.in_from_left);
viewFlipper.setOutAnimation(this, R.anim.out_to_right);
// Show the next Screen
viewFlipper.showNext();
}

// if right to left swipe on screen
if (lastX > currentX)
{
if (viewFlipper.getDisplayedChild() == 1)
break;
// set the required Animation type to ViewFlipper
// The Next screen will come in form Right and current Screen will go OUT from Left 
viewFlipper.setInAnimation(this, R.anim.in_from_right);
viewFlipper.setOutAnimation(this, R.anim.out_to_left);
// Show The Previous Screen
viewFlipper.showPrevious();
}
break;
}
}
return false;
}

This is working except that the views come in the order 1 > 3 > 2 rather than 1 > 2 > 3 on swiping. As I am new to android I have just copied this code from elsewhere without understanding the code.

Answer 1

You are using ViewFlipper to swipe left and right between views. You should really use ViewPager for that.

That been said, you can do what you want with view flipper if you change your ACTION_UP to something like:

case MotionEvent.ACTION_UP: {
    float currentX = touchevent.getX();

    if (lastX > currentX) {
        if (viewFlipper.getDisplayedChild() == 2)
            break;

        // anim stuff here...

        viewFlipper.showNext();
    }

    if (lastX < currentX) {
        if (viewFlipper.getDisplayedChild() == 0)
            break;

        // anim stuff here...

        viewFlipper.showPrevious();
    }
    break;
}