Android 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:

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 left and right * @ Description: Android achieves sliding between left and right * @ File: MainActivity. java * @ Package com. android. flip * @ Author Hanyonglu * @ Date 10:44:04 * @ 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:

<? 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:

<? 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:

<? 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:

<? 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:

<? 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>

 

If you want to achieve the effect of Slide left and right, visit blog: http://www.cnblogs.com/hanyonglu/archive/2012/04/07/2435589.html

 

If you want to achieve the sliding effect of the left and right with the fade button, visit blog: http://www.cnblogs.com/hanyonglu/archive/2012/02/13/2350171.html

 

: Click to download

 

Finally, I hope to reprint friends can respect the author's labor results, plus reprint address: http://www.cnblogs.com/hanyonglu/archive/2012/02/13/2349827.html thank you.

　　

End. Pai_^