How to prevent ViewFlipper from looping

Question

I am developing an application in which I am using a ViewFlipper with a custom OnTouch implementation. In the ViewFlipper, I have about 20 images for the user to flip through. This works fine, but if I'm at the 20th image in the series and flip the screen, it returns to the first image.

I want to prevent the ViewFlipper from looping back to the first image. Instead, it should simply stop at the last image.

Here is my code:

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.Spinner;
import android.widget.ViewFlipper;

public class Activity1 extends Activity implements OnTouchListener{

    float downXValue;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Set main.XML as the layout for this Activity
        setContentView(R.layout.main);

        // Add these two lines
        LinearLayout layMain = (LinearLayout) findViewById(R.id.layout_main);
        layMain.setOnTouchListener((OnTouchListener) this); 

        // Add a few countries to the spinner
        Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
        ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
                    android.R.layout.simple_spinner_dropdown_item,
                    new String[] { "Canada", "USA" });
        spinnerCountries.setAdapter(countryArrayAdapter);

    }

    public boolean onTouch(View arg0, MotionEvent arg1) {

        // Get the action that was done on this touch event
        switch (arg1.getAction())
        {
            case MotionEvent.ACTION_DOWN:
            {
                // store the X value when the user's finger was pressed down
                downXValue = arg1.getX();
                break;
            }

            case MotionEvent.ACTION_UP:
            {
                // Get the X value when the user released his/her finger
                float currentX = arg1.getX();            

                // going backwards: pushing stuff to the right
                if (downXValue < currentX)
                {
                    // Get a reference to the ViewFlipper
                     ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
                     // Set the animation
                      vf.setAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
                      // Flip!
                      vf.showPrevious();
                }

                // going forwards: pushing stuff to the left
                if (downXValue > currentX)
                {
                    // Get a reference to the ViewFlipper
                    ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
                     // Set the animation
                     vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
                      // Flip!
                     vf.showNext();
                }
                break;
            }
        }

        // if you return false, these actions will not be recorded
        return true;
    }

}

And the XML layout:

<?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"
    android:id="@+id/layout_main"
    >

    <ViewFlipper android:id="@+id/details"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">  


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

            <ImageView android:id="@+id/ImageView01" android:background="@drawable/two" 
            android:layout_x="1dip" android:layout_y="1dip" 
            android:layout_height="fill_parent" android:layout_width="fill_parent"></ImageView>
        </LinearLayout> 
         <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >

            <ImageView android:id="@+id/ImageView01" android:background="@drawable/three" 
            android:layout_x="1dip" android:layout_y="1dip" 
            android:layout_height="fill_parent" android:layout_width="fill_parent"></ImageView>
        </LinearLayout> 
         <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >

            <ImageView android:id="@+id/ImageView01" android:background="@drawable/four" 
            android:layout_x="1dip" android:layout_y="1dip" 
            android:layout_height="fill_parent" android:layout_width="fill_parent"></ImageView>
        </LinearLayout> 
         <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >

            <ImageView android:id="@+id/ImageView01" android:background="@drawable/five" 
            android:layout_x="1dip" android:layout_y="1dip" 
            android:layout_height="fill_parent" android:layout_width="fill_parent"></ImageView>
        </LinearLayout> 
 <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >

            <ImageView android:id="@+id/ImageView01" android:background="@drawable/six" 
            android:layout_x="1dip" android:layout_y="1dip" 
            android:layout_height="fill_parent" android:layout_width="fill_parent"></ImageView>
        </LinearLayout> 
         <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >

            <ImageView android:id="@+id/ImageView01" android:background="@drawable/seven" 
            android:layout_x="1dip" android:layout_y="1dip" 
            android:layout_height="fill_parent" android:layout_width="fill_parent"></ImageView>
        </LinearLayout> 
         <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >

            <ImageView android:id="@+id/ImageView01" android:background="@drawable/eight" 
            android:layout_x="1dip" android:layout_y="1dip" 
            android:layout_height="fill_parent" android:layout_width="fill_parent"></ImageView>
        </LinearLayout> 

    <ViewFlipper>
 </LinearLayout>

Heideheidegger

Can you elaborate on what you mean by flipping the screen? Are you talking about orientation change or performing a sort of swipe gesture on the ViewFlipper? Do you have any code to produce this behavior that you can show? – Oxbow

I can p[aste my code in the question you can check it from the above qestion. – Heideheidegger

Answer 1

You know that there are 20 children in the viewflipper. Therefore make an if statement in the onclick that checks if the getDisplayedChild() is lower then 20. If it is 20 or higher then just dont call showNext().

Thromboplastin

Answer 2

I detect end of children by custom ViewFlipper

public class ExViewFlipper extends ViewFlipper {

  private OnChangeViewListener mOnChangeViewListener;

  public ExViewFlipper(Context context) {
    super(context);
  }

  public ExViewFlipper(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public interface OnChangeViewListener {

    /**
     * call on Change view
     * 
     * @param index next index
     * @param hasNext true if next view is exist
     */
    void onChange(int index, boolean hasNext);
  }

  public void setOnChangeViewListener(OnChangeViewListener listener) {
    mOnChangeViewListener = listener;
  }

  @Override
  public void showNext() {

    super.showNext();

    if (mOnChangeViewListener != null) {
      mOnChangeViewListener.onChange(getDisplayedChild(), true);
    }
  }

  @Override
  public void showPrevious() {

    super.showPrevious();

    if (mOnChangeViewListener != null) {
      mOnChangeViewListener.onChange(getDisplayedChild(), false);
    }
  }

  public boolean isFirstItem() {

    return getDisplayedChild() == 0;
  }

  public boolean isLastItem() {

    return getDisplayedChild() == getChildCount() - 1;
  }
}

Ampliate

Answer 3

Set an AnimationListener on the Viewflipper and then stop the animation when you reach the last slide.

    viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipperMain);              
    viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.slide_in_right));       
    viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_out_left));   

    AnimationListener mAnimationListener = new Animation.AnimationListener() {
        public void onAnimationStart(Animation animation) {
            //animation started event
        }

        public void onAnimationRepeat(Animation animation) {
        }

        public void onAnimationEnd(Animation animation) {
            //TODO animation stopped event
            if (viewFlipper.getDisplayedChild()==intLastChild){
                viewFlipper.stopFlipping();
            }
        }
    };

   //Get a reference to one of the animations set on the ViewFlipper
   //In this example, I used the "In Animation"
   viewFlipper.getInAnimation().setAnimationListener(mAnimationListener);

Anelace