Android to achieve left and right sliding effect of the method of detailed _android

Source: Internet
Author: User
Tags stub

This example shows how the picture is sliding around in Android.

As for the sliding effect, which is used more in Android, the slide effect of this example is implemented using Viewflipper, and of course it can be implemented using other view. Then let's start to achieve this effect. For the sake of understanding, let's take a look at the effect chart:
The main effect figure is as follows:



Let's take a look at the program Structure chart:
 

Mainactivity code in File:

Copy Code code 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 to achieve left and right sliding effect
* @Description: Android to achieve left and right sliding effect
* @File: Mainactivity.java
* @Package Com.android.flip
* @Author Hanyonglu
* @Date 2012-02-12 10:44:04
* @Version V1.0
*/
public class Mainactivity extends activity implements Ongesturelistener {
Private Viewflipper Flipper;
Private Gesturedetector detector;

/** called the activity is a. */
@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, we only need to join Viewflipper, the code is as follows:
Copy Code code 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>

To make it slide with certain effects, we need to add animation effect, speaking of animation, let's look at how to implement custom Animation in Android. Custom animation are defined in XML format, and the well-defined XML files are stored in Res/anim.

   The General animation has the following four kinds of types:
   1. Alpha: Gradient Transparency Animation effect
2. Scale: Gradient size Telescopic animation effect
3. Translate: Move the animation effect to the picture transformation position
4. Rotate: Move the animation effect to the picture transformation position

push_left_in.xml code in file:
Copy Code code 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= "/>"
<alpha android:fromalpha= "0.1" android:toalpha= "1.0"
Android:duration= "/>"
</set>

push_left_out.xml code in file:
Copy Code code 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= "/>"
<alpha android:fromalpha= "1.0" android:toalpha= "0.1"
Android:duration= "/>"
</set>

push_right_in.xml code in file:
Copy Code code 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= "/>"
<alpha android:fromalpha= "0.1" android:toalpha= "1.0"
Android:duration= "/>"
</set>

push_right_out.xml code in file:
Copy Code code 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= "/>"
<alpha android:fromalpha= "1.0" android:toalpha= "0.1"
Android:duration= "/>"
</set>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.