How to add a click event in ViewFlipper

1.6k views Asked by At

I am trying to design a view flipper with atleast 10 images. Now each image has its own activity to go to, if the user clicks on the image.How can i get differen click events for different images. i mean if image1 is on the screen and user clicks the screen, toast image1 clicked, for image2 toast image2 clicked and so on.. Here is what I have done.

public class PaperSelectionActivity extends Activity implements OnClickListener 
{
    ViewFlipper page;
    LinearLayout lyt;

    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.activity_paper_selection);

        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);

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub

    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.paper_selection, menu);
        return true;
    }
}

XML File:

<?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:background="@drawable/background"
    android:orientation="vertical">

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

        <RelativeLayout
            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/image1"/>

        </RelativeLayout>

        <RelativeLayout
            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/image2"/>

        </RelativeLayout>

        <RelativeLayout
            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/image3"/>

        </RelativeLayout>

        <RelativeLayout
            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/image4"/>  

        </RelativeLayout>

    </ViewFlipper>
</LinearLayout>
1

There are 1 answers

0
Kostya  Khuta On BEST ANSWER

At the risk of encouraging premature optimization, I've solved a problem very similar to this (flipping a set of potentially dozens of more or less identical pages) which turned out quite nicely, and which would solve your problem albeit slightly indirectly.

The basis of my technique was to have a ViewFlipper containing a single child page. When the user clicked 'previous' or 'next' the following things would happen:

  1. Instantiate a special View which 'clones' an image of the ViewFlipper's real child view.
  2. Add the clone View to the ViewFlipper and set it as the current child without any animation. So far the UI looks as if nothing has changed.
  3. Update the real child view (now obscured by the clone) with the text and images etc for the page being flipped in.
  4. Set the ViewFlipper's current page back to its real child view, this time with a nice animation.

I needed to go this extra mile because my page was very complex... several lists, all sorts of buttons, images etc. It would have been terribly wasteful to have 2 or 3 of them in my view hierarchy, let alone dozens. The above technique minimizes your layout complexity, and the flipping animation gets to run a lot faster if the page is complex. More detail you can wacth there