How Android achieves sliding between left and right

This example shows how to slide between the left and right of an image in Android.

The sliding effect is used in Android. In this example, ViewFlipper is used to implement the sliding effect. Of course, other views can also be used to implement the sliding effect. Next let's begin to achieve this effect. For your convenience, let's take a look:
For example:

　

Next, let's take a look at the program structure:
　

Code in the MainActivity file:

Copy codeThe Code is as follows: package com. android. flip;
Import android. app. Activity;
Import android. OS. Bundle;
Import android. view. GestureDetector;
Import android. view. MotionEvent;
Import android. view. View;
Import android. view. GestureDetector. OnGestureListener;
Import android. view. animation. AnimationUtils;
Import android. widget. ImageView;
Import android. widget. ViewFlipper;
/**
* Android achieves sliding between the left and right sides
* @ Description: Android enables sliding between left and right
* @ File: MainActivity. java
* @ Package com. android. flip
* @ Author Hanyonglu
* @ Date 2012-02-12 10:44:04 AM
* @ Version V1.0
*/
Public class MainActivity extends Activity implements OnGestureListener {
Private ViewFlipper flipper;
Private GestureDetector detector;

/** Called when the activity is first created .*/
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );

Detector = new GestureDetector (this );
Flipper = (ViewFlipper) this. findViewById (R. id. ViewFlipper1 );
Flipper. addView (addImageView (R. drawable. one ));
Flipper. addView (addImageView (R. drawable. two ));
Flipper. addView (addImageView (R. drawable. three ));
Flipper. addView (addImageView (R. drawable. four ));
Flipper. addView (addImageView (R. drawable. five ));
}

Private View addImageView (int id ){
ImageView iv = new ImageView (this );
Iv. setImageResource (id );
Return iv;
}

@ Override
Public boolean onTouchEvent (MotionEvent event ){
// TODO Auto-generated method stub
Return this. detector. onTouchEvent (event );
}

@ Override
Public boolean onDown (MotionEvent e ){
// TODO Auto-generated method stub
Return false;
}

@ Override
Public boolean onFling (MotionEvent e1, MotionEvent e2, float velocityX,
Float velocityY ){
If (e1.getX ()-e2.getX ()> 120 ){
This. flipper. setInAnimation (AnimationUtils. loadAnimation (this, R. anim. push_left_in ));
This. flipper. setOutAnimation (AnimationUtils. loadAnimation (this, R. anim. push_left_out ));
This. flipper. showNext ();
Return true;
} Else if (e1.getX ()-e2.getX () <-120 ){
This. flipper. setInAnimation (AnimationUtils. loadAnimation (this, R. anim. push_right_in ));
This. flipper. setOutAnimation (AnimationUtils. loadAnimation (this, R. anim. push_right_out ));
This. flipper. showPrevious ();
Return true;
}

Return false;
}

@ Override
Public void onLongPress (MotionEvent e ){
// TODO Auto-generated method stub

}

@ Override
Public boolean onScroll (MotionEvent e1, MotionEvent e2, float distanceX,
Float distanceY ){
// TODO Auto-generated method stub
Return false;
}

@ Override
Public void onShowPress (MotionEvent e ){
// TODO Auto-generated method stub

}

@ Override
Public boolean onSingleTapUp (MotionEvent e ){
// TODO Auto-generated method stub
Return false;
}
}

The layout interface is relatively simple. You only need to add ViewFlipper. The Code is as follows:
Copy codeThe Code is as follows: <? 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"
>
<ViewFlipper android: id = "@ + id/ViewFlipper1"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
</ViewFlipper>
</LinearLayout>

In order to make it slide with some special effects, we need to add the Animation effect. Speaking of Animation, Let's first look at how to implement Custom Animation in Android. Custom Animation is defined in XML format. The defined XML file is stored in res/anim.

　　Generally, there are four types of Animation:
1. Alpha: gradient transparency animation effect
2. Scale: Scaling animation effects of gradient sizes
3. Translate: animation effect for moving the position of the screen
4. Rotate: animation effect for moving the position of the screen

Code in the push_left_in.xml file:
Copy codeThe Code is as follows: <? 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.1" android: toAlpha = "1.0"
Android: duration = "500"/>
</Set>

Code in the push_left_out.xml file:
Copy codeThe Code is as follows: <? 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.1"
Android: duration = "500"/>
</Set>

Code in the push_right_in.xml file:
Copy codeThe Code is as follows: <? 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.1" android: toAlpha = "1.0"
Android: duration = "500"/>
</Set>

Code in the push_right_out.xml file:
Copy codeThe Code is as follows: <? 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.1"
Android: duration = "500"/>
</Set>