Android USES ViewFlipper for gesture toggle instances

  • 2020-06-07 05:18:54
  • OfStack

An example of Android using ViewFlipper for gesture switching is given in this paper for your reference. Specific implementation steps are as follows:

First, define an ViewFlipper in the xml file of layout:

<?xml version="1.0" encoding="utf-8"?>  
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android" 
        android:id="@+id/viewFlipper" 
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent" 
        > 
         
    <LinearLayout 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        > 
         
        <TextView 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent" 
            android:background="#FF0000" 
            /> 
             
    </LinearLayout> 
     
    <LinearLayout 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        > 
         
        <TextView 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent" 
            android:background="#00FF00" 
            /> 
             
    </LinearLayout> 
     
</ViewFlipper>

Declare a new GestureDetector, rewrite its onFling() function, and determine the gesture in this function, here is the horizontal drag:

public class MyGestureDetector extends SimpleOnGestureListener  

    private static final int SWIPE_MIN_DISTANCE = 120; 
    private static final int SWIPE_MAX_OFF_PATH = 250; 
    private static final int SWIPE_THRESHOLD_VELOCITY = 200; 
     
    @Override 
    public boolean onFling(MotionEvent e1, MotionEvent e2,  
                           float velocityX, float velocityY) 
    { 
        try 
        { 
               if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH) 
               { 
                   return false; 
               } 
               if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE &&  
                  Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) 
               { 
                viewFlipper.setInAnimation(slideLeftIn); 
                   viewFlipper.setOutAnimation(slideLeftOut); 
                viewFlipper.showNext(); 
               } 
               else  
                if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE &&  
                    Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) 
                { 
                    viewFlipper.setInAnimation(slideRightIn); 
                    viewFlipper.setOutAnimation(slideRightOut); 
                    viewFlipper.showPrevious(); 
                } 
           } 
        catch (Exception e) 
        { 
             
           } 
           return false; 
    } 
}

Note that the onTouchEvent() function is rewritten in Activity:

private ViewFlipper viewFlipper;  
 
private Animation slideLeftIn; 
private Animation slideLeftOut; 
private Animation slideRightIn; 
private Animation slideRightOut; 
 
private GestureDetector gestureDetector; 
@Override 
public void onCreate(Bundle savedInstanceState) 

    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 
     
    viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper); 
       slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_left_in); 
       slideLeftOut = AnimationUtils.loadAnimation(this, R.anim.slide_left_out); 
       slideRightIn = AnimationUtils.loadAnimation(this, R.anim.slide_right_in); 
       slideRightOut = AnimationUtils.loadAnimation(this, R.anim.slide_right_out); 
        
       gestureDetector = new GestureDetector(new MyGestureDetector()); 
        
       new View.OnTouchListener() 
       { 
           public boolean onTouch(View v, MotionEvent event) 
           { 
               if (gestureDetector.onTouchEvent(event)) 
               { 
                   return true; 
               } 
               return false; 
           } 
       }; 

 
@Override 
public boolean onTouchEvent(MotionEvent event) 

    if (gestureDetector.onTouchEvent(event)) 
    { 
        return true; 
    } 
    else 
    { 
        return false; 
    } 
}

Finally, create a new anim folder under res to store the animation files that are switched between view:

1.slide_left_in.xml

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <translate 
        android:fromXDelta="100%p"  
        android:toXDelta="0"  
        android:duration="500" 
        /> 
    <alpha 
        android:fromAlpha="0.0"  
        android:toAlpha="1.0" 
        android:duration="500" 
        /> 
</set>

2.slide_left_out.xml

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <translate 
        android:fromXDelta="0"  
        android:toXDelta="-100%p"  
        android:duration="500" 
        /> 
    <alpha 
        android:fromAlpha="1.0"  
        android:toAlpha="0.0"  
        android:duration="500" 
        /> 
</set>

3.slide_right_in.xml

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <translate  
        android:fromXDelta="-100%p"  
        android:toXDelta="0"  
        android:duration="500" 
        /> 
    <alpha 
        android:fromAlpha="0.0"  
        android:toAlpha="1.0" 
        android:duration="500" 
        /> 
</set>

4.slide_right_out.xml

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <translate  
        android:fromXDelta="0"  
        android:toXDelta="100%p"  
        android:duration="500" 
        /> 
    <alpha 
        android:fromAlpha="1.0"  
        android:toAlpha="0.0" 
        android:duration="500" 
        /> 
</set>

Hopefully, this article has been helpful in your Android programming


Related articles: