How to Use ViewFlipper for sliding pages in Android

1) View switching control-Overview of ViewFlipper

The ViewFilpper class inherits from the ViewAnimator class. The ViewAnimator class inherits from FrameLayout.

View the source code of the ViewAnimator class. We can see that this class is mainly used to provide animation effects for the View switching. This class has the following animation-related methods.

SetInAnimation:Set the animation used when the View enters the screen. This method has two overload Methods: You can directly input the Animation object or the resourceID of the specified Animation file.

SetOutAnimation:Set the animation used when the View exits the screen. Use the same method as setInAnimation.

ShowNext:Call this method to display the next View in FrameLayout.

ShowPrevious:You can call this method to display the previous View in FrameLayout.

View the source code of ViewFlipper. ViewFlipper is mainly used to automatically switch views. This class provides the following main methods.

SetFilpInterval:Set the View switching interval. The parameter is in milliseconds.

StartFlipping:Start to switch the View. The interval is the interval set by the preceding method. The switchover will be performed cyclically.

StopFlipping:Stop View switching.

SetAutoStart:Set whether to start automatically. If it is set to "true", the View switch starts automatically when ViewFlipper is displayed.

In general, we use the ViewFilpper class to implement View switching without using its parent class ViewAnimator.

2) Implement slide-GestureDetector Introduction

If you want to achieve the sliding flip effect, you need to know another class: android. view. GestureDetector class. The GestureDetector class can be used to detect various gesture events. This class has two callback interfaces to notify specific events respectively.

GestureDetector. OnDoubleTapListener: Used to notify DoubleTap events, similar to double-click events on a PC.

GestureDetector. OnGestureListener: Used to notify normal gesture events. This interface has six callback methods. For details, see the API. Here, the onFling () method is used to determine the sliding.

3) specific implementation

The following code snippet details how to slide pages.

Copy codeThe Code is as follows: public class ViewFlipperActivity extends Activity implements OnGestureListener {

Private static final int FLING_MIN_DISTANCE = 100;
Private ViewFlipper flipper;
Private GestureDetector detector;

@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. viewflipper );
// Register a GestureDetector
Detector = new GestureDetector (this );
Flipper = (ViewFlipper) findViewById (R. id. ViewFlipper );
ImageView image1 = new ImageView (this );
Image1.setBackgroundResource (R. drawable. image1 );
// Add the first view
Flipper. addView (image1 );
ImageView image2 = new ImageView (this );
Image2.setBackgroundResource (R. drawable. image2 );
// Add the second view
Flipper. addView (image2 );
}

@ Override
Public boolean onTouchEvent (MotionEvent event ){
// Send the touch screen event to the gesture recognition class for processing
Return this. detector. onTouchEvent (event );
}

@ Override
Public boolean onDown (MotionEvent e ){
Return false;
}

@ Override
Public void onShowPress (MotionEvent e ){
}

@ Override
Public boolean onSingleTapUp (MotionEvent e ){
Return false;
}

@ Override
Public boolean onScroll (MotionEvent e1, MotionEvent e2, float distanceX,
Float distanceY ){
Return false;
}

@ Override
Public void onLongPress (MotionEvent e ){
}

@ Override
Public boolean onFling (MotionEvent e1, MotionEvent e2, float velocityX,
Float velocityY ){
If (e1.getX ()-e2.getX ()> FLING_MIN_DISTANCE ){
// Set the animation effect for the View to enter and exit
This. flipper. setInAnimation (AnimationUtils. loadAnimation (this,
R. anim. left_in ));
This. flipper. setOutAnimation (AnimationUtils. loadAnimation (this,
R. anim. left_out ));
This. flipper. showNext ();
Return true;
}
If (e1.getX ()-e2.getX () <-FLING_MIN_DISTANCE ){
This. flipper. setInAnimation (AnimationUtils. loadAnimation (this,
R. anim. right_in ));
This. flipper. setOutAnimation (AnimationUtils. loadAnimation (this,
R. anim. right_out ));
This. flipper. showPrevious ();
Return true;
}
Return false;
}
}

In this Code, two iamgeviews (used to display images) are created and added to ViewFlipper. After the program runs, When you slide to the left with your fingers on the screen, the previous image is displayed. When you slide to the right with your fingers on the screen, the next image is displayed. The main code for sliding switching is in the onFling () method. When you press the touch screen and move it quickly, the event is triggered. In this code example, the sliding distance of the finger is calculated. If the sliding distance is greater than 100 pixels, the switchover is performed. Otherwise, no switchover is performed.

As you can see, the onFling () method has four parameters. The code above e1 and e2 is used for better understanding. What are the functions of the velocityX and velocityY parameters? VelocityX and velocityY are actually moving speeds on the X and Y axes, measured in pixels/s. Based on these two parameters, you can determine the sliding speed for more processing.

To display the sliding effect, the setInAnimation () and setOutAnimation () Methods of ViewFlipper are called to set the animation of the View entry and exit. We will not go into details about the use of animations or the specific XML file code here.

In addition, add additional topics based on the above Code.

In the Xml layout file, we can set both pixel px and dp (or dip ).

In general, we will choose to use dp to ensure consistent layout on mobile phones with different screen resolutions. However, in the Code, dp cannot be directly used.

Take the above Code as an example. The Code defines that the sliding distance threshold is 100 pixels. This will lead to different effects on mobile phones with different resolutions. For example, on the X model and on the X model, you need to slide your fingers to switch the View. Therefore, we recommend that you do not use pixels or dp in the code.

Since dp cannot be used directly, you need to convert from px to dp. In fact, there are Formulas Between px and dp that can be converted to each other. (The implementation code for conversion between dp and px in Android) has been written. For more information, see