Android sliding effect (1) -- viewflipper

ViewfilpperIt is a view container class officially provided by Android. It inherits from the viewanimator class and is used for page switching. You can also set the time interval for automatic playback.
Viewanimator inherits framelayout, So multiple views can be placed in the layout of viewfilpper. The inheritance relationship is as follows:

In this example, viewflipper and gesturedetector. ongesturelistener are used to implement automatic playback and gesture Sliding Screen events.First look at the effect:

Activity

Import android. app. activity; <br/> Import android. OS. bundle; <br/> Import android. view. gesturedetector; <br/> Import android. view. motionevent; <br/> Import android. view. viewgroup. layoutparams; <br/> Import android. view. animation. animation; <br/> Import android. view. animation. animationutils; <br/> Import android. widget. imageview; <br/> Import android. widget. viewflipper; </P> <p> public class viewflipperactivit Y extends activity implements android. view. gesturedetector. ongesturelistener {<br/> private int [] IMGs = {R. drawable. img1, R. drawable. img2, <br/> r. drawable. img3, R. drawable. img4, R. drawable. img5 }; </P> <p> private gesturedetector = NULL; <br/> private viewflipper = NULL; </P> <p> private activity mactivity = NULL; </P> <p> @ override <br/> Public void oncreate (bundle savedinstan Cestate) {<br/> super. oncreate (savedinstancestate); <br/> setcontentview (R. layout. main); </P> <p> mactivity = This; </P> <p> viewflipper = (viewflipper) findviewbyid (R. id. viewflipper); <br/> gesturedetector = new gesturedetector (this); // declare a gesture detection event </P> <p> for (INT I = 0; I imageview IV = new imageview (this); <br/> IV. setimageresource (IMGs [I]); <br/> IV. setscaletype (imageview. Scaletype. fit_xy); <br/> viewflipper. addview (IV, new layoutparams (layoutparams. fill_parent, layoutparams. fill_parent); <br/>}</P> <p> viewflipper. setautostart (true); // sets the automatic playback function (click an event and play it automatically before it is clicked) <br/> viewflipper. setflipinterval (3000); <br/> If (viewflipper. isautostart ()&&! Viewflipper. isflipping () {<br/> viewflipper. startflipping (); <br/>}</P> <p> @ override <br/> Public Boolean ontouchevent (motionevent event) {<br/> viewflipper. stopflipping (); // click the event to stop automatic playback <br/> viewflipper. setautostart (false); <br/> return gesturedetector. ontouchevent (event); // register a gesture event <br/>}</P> <p> @ override <br/> Public Boolean onfling (motionevent E1, motionevent E2, float velocityx, float velocityy) {<br/> If (e2.getx ()-e1.getx ()> 120) {// slide from left to right (left to right) <br/> animation rinanim = animationutils. loadanimation (mactivity, R. anim. push_right_in); // sliding the gradient effect (alpha 0.1-> 1.0) on the left to the right <br/> animation routanim = animationutils. loadanimation (mactivity, R. anim. push_right_out); // slide the gradient to the right (alpha 1.0-> 0.1) </P> <p> viewflipper. setinanimation (rinanim); <br/> viewflipper. setoutanimation (routanim); <br/> viewflipper. showprevious (); <br/> return true; <br/>} else if (e2.getx ()-e1.getx () <-120) {// sliding from right to left (right to left) <br/> animation linanim = animationutils. loadanimation (mactivity, R. anim. push_left_in); // sliding left to the gradient (alpha 0.1-> 1.0) <br/> animation loutanim = animationutils. loadanimation (mactivity, R. anim. push_left_out); // sliding the gradient (alpha 1.0-> 0.1) to the right of the left side </P> <p> viewflipper. setinanimation (linanim); <br/> viewflipper. setoutanimation (loutanim); <br/> viewflipper. shownext (); <br/> return true; <br/>}< br/> return true; <br/>}</P> <p> @ override <br/> Public Boolean ondown (motionevent e) {<br/> return false; <br/>}</P> <p> @ override <br/> Public void onlongpress (motionevent E) {<br/>}</P> <p> @ override <br/> Public Boolean onscroll (motionevent E1, motionevent E2, float distancex, float distancey) {<br/> return false; <br/>}</P> <p> @ override <br/> Public void onshowpress (motionevent E) {<br/>}</P> <p> @ override <br/> Public Boolean onsingletapup (motionevent e) {<br/> return false; <br/>}< br/>}

Main. xml

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: Orientation = "vertical"> </P> <p> <viewflipper <br/> Android: id = "@ + ID/viewflipper" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent"/> </P> <p> </linearlayout>

Sample Analysis

I. automatic playback

The viewflipper control is a container for imageview. It is used to add image resources for display. It has two main functions: Add display view and automatically play view.

Add a view resource by implementing the addview (view child, viewgroup. layoutparams Params) of the parent class android. View. viewgroup, that is, the image and fill style.

Enable automatic playback ViewYou can set the following three member functions:

1. setautostart (true): Set whether to enable automatic playback. True indicates automatic playback, false indicates not automatic playback, and true indicates automatic playback.

2. setflipinterval (INT milliseconds), set the view playback interval, such as 3000 (3 seconds)

3. startflipping () to start automatic playback.

Stop automatic view playback, Set the member function as follows:

1. stopflipping () to stop automatic playback

2. setautostart (false): Stop automatic playback. Set it to false.

2. gesture Sliding Screen

Gesture Sliding Screen animation is implemented by detecting various gesture events through the android. View. gesturedetector class. This class has two callback interfaces)

A. gesturedetector. ondoubletaplistenerUsed to notify doubletap double-click events, similar to double-click events of the mouse. The following are three abstract callback functions of the interface:

1. ondoubletap (motionevent E): Notification (triggered) after double-click gesture event of doubletap)

2. ondoubletapevent (motionevent E): Notification (trigger) between double-click gesture events of doubletap, including Down, up, and move events (events between double-click events, for example, double-click in the same place will generate a doubletap gesture, while a down and up event will occur in the doubletap gesture, which are notified by the function)

3. onsingletapconfirmed, if the system does not receive the second click after a period of time, the system determines that the click is singletap rather than doubletap. At this time, the singletapconfirmed event is triggered.

B. gesturedetector. ongesturelistenerUsed to notify common gesture events (down, longpress, scroll, up, etc.). The specific six abstract callback functions of the interface are as follows:

1. ondown (motionevent E): Down event, which indicates pressing the event

2. onsingletapup (motionevent E): Click the up event at a time to indicate the event to be lifted after the event is pressed.

3. onshowpress (motionevent E): When the down event occurs, move or the up event is not triggered before the event is triggered. This event is generally used to notify the user that press and press the event has occurred.

4. onlongpress (motionevent E ), if you still press the screen, it is considered a long press event.

5. onfling (motionevent E1, motionevent E2, float velocityx, float velocityy): A sliding gesture event, such as a sudden up after a scroll event, the fling speed is determined by the change of e x and y per second.

6. onscroll (motionevent E1, motionevent E2, float distancex, float distancey)

In this example, only the above gesturedetector. ongesturelistener and its onfling events are used for Sliding Screen animation. The specific implementation steps are as follows:

1. The activity implements the Android. View. gesturedetector. ongesturelistener listening interface and declares gesturedetector = new gesturedetector (this). It is used to listen for gesture events.

2. Register gesturedetector. ongesturelistener gesture listening gesturedetector. ontouchevent (event) in the activity member function ontouchevent (motionevent ).

3. Implement slide screen animation in the gesturedetector. ongesturelistener callback function onfling (motionevent E1, motionevent E2, float velocityx, float velocityy)

3. Gradient Screen Effect

1. When the gesture slides from left to right, the picture is left to right

If (e2.getx ()-e1.getx ()> 120), that is, the sliding distance between the up end point (E2) and the down start point (E1) is greater than 120, to detect sliding events from left to right.

Push_left_in.xml -- left-side gradient effect

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <set xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <translate <br/> Android: Duration = "1500" <br/> Android: fromxdelta = "100% P" <br/> Android: toxdelta = "0"/> </P> <p> <Alpha <br/> Android: duration = "1500" <br/> Android: fromalpha = "0.1" <br/> Android: toalpha = "1.0"/> <br/> </set>

Push_left_out.xml -- Right-out gradient effect

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <set xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <translate <br/> Android: Duration = "1500" <br/> Android: fromxdelta = "0" <br/> Android: toxdelta = "-100% P"/> </P> <p> <Alpha <br/> Android: duration = "1500" <br/> Android: fromalpha = "1.0" <br/> Android: toalpha = "0.1"/> <br/> </set>

2. When the gesture slides from right to left, the picture is right to left

If (e2.getx ()-e1.getx () <-120), that is, the sliding distance between the up end point (E2) and the down start point (E1) is less than-120, to detect sliding events from right to left

Push_right_in.xml -- Right-forward gradient effect

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <set xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <translate <br/> Android: Duration = "1500" <br/> Android: fromxdelta = "-100% P" <br/> Android: toxdelta = "0"/> </P> <p> <Alpha <br/> Android: duration = "1500" <br/> Android: fromalpha = "0.1" <br/> Android: toalpha = "1.0"/> <br/> </set>
Push_right_out.xml -- Right-out gradient effect

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <set xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <translate <br/> Android: Duration = "1500" <br/> Android: fromxdelta = "0" <br/> Android: toxdelta = "100% P"/> </P> <p> <Alpha <br/> Android: duration = "1500" <br/> Android: fromalpha = "1.0" <br/> Android: toalpha = "0.1"/> <br/> </set>
Android: Duration indicates the gradient duration; translate indicates the displacement transformation; Alpha indicates the transparency transformation.

Translate

Android: fromxdelta = "-100% P" Android: toxdelta = "0" indicates that the image is moved from left to invisible.

Android: fromxdelta = "0" Android: toxdelta = "100% P" indicates that the image is slide from the right to the invisible

Alpha

Android: fromalpha = "1.0" Android: toalpha = "0.1" indicates that the image is not transparent (1.0) to transparent (0.1)

Android: fromalpha = "0.1" Android: toalpha = "1.0" indicates that the image is transparent (0.1) to opacity (1.0)

Source code download

Recommendation reference:

Viewflipper

Gesturedetector. ondoubletaplistener

Gesturedetector. ongesturelistener