Android slide effect BASICS (iii) -- gallery image copy set browsing

The Android system comes with a gallery image browsing application that allows you to smoothly display images when dragging your fingers. This provides excellent user interaction and experience.

This example uses gallery and custom view to simulate the Image Browsing effect of a gallery image set. As follows:

1. Basic Principles

Implement the ongesturelistener interface onfling () gesture event in the activity, and draw a draw () image through a custom View

2. Activity

In activity, register mygesture. ontouchevent (event) through ontouchevent)

@ Override <br/> Public Boolean ontouchevent (motionevent event) {<br/> switch (event. getaction () {<br/> case motionevent. action_up: <br/> flingview. onfling (0); // After the finger is raised, reset the sliding distance offsetx = 0 <br/> break; <br/>}</P> <p> return mygesture. ontouchevent (event); <br/>}

The onscroll () method of the ongesturelistener interface is implemented. The sliding parameter is passed to the handlescroll () member method of the flingview inherited from the view to obtain the x-axis distance of the sliding.

@ Override <br/> Public Boolean onscroll (motionevent E1, motionevent E2, float distancex, float distancey) {<br/> flingview. handlescroll (-1 * (INT) distancex); <br/> return true; <br/>}

Then, the onfling () method of the ongesturelistener interface is implemented to pass the sliding parameter to the onfling () member method of the flingview inherited from the view to get the gesture speed.

@ Override <br/> Public Boolean onfling (motionevent E1, motionevent E2, float velocityx, float velocityy) {<br/> flingview. onfling (INT)-velocityx); <br/> return true; <br/>}

3. flingview

In flingview, get the gesture speed from activity

Public void onfling (INT paramfloat1) {<br/> If (offsetx> gallerydemoactivity. devicescreenwidth/5) {<br/> If (fbitmap! = NULL) {<br/> isfling = true; <br/> isflingright = true; <br/>}< br/>} else if (offsetx <-gallerydemoactivity. devicescreenwidth/5) {<br/> If (nbitmap! = NULL) {<br/> isfling = true; <br/> isflingleft = true; <br/>}< br/> // start animation effect <br/> startanimation (New myanimation (); <br/>}

During the Sliding Process, draw an image by implementing the draw () method of the view. Note: You need to draw the current image (obtain the focus) and the next image (to obtain the focus) at the same time) two images in total

@ Override <br/> Public void draw (canvas) {<br/> paint = new paint (); <br/> rect = new rect (); <br/> canvas. drawcolor (color. black); </P> <p> // draw the current image <br/> If (Bitmap! = NULL) {<br/> int left = offsetx; <br/> int Top = offsety; <br/> int right = offsetx + gallerydemoactivity. devicescreenwidth; <br/> int Bottom = offsety + gallerydemoactivity. devicescreenheight; <br/> rect. set (left, top, right, bottom); <br/> canvas. drawbitmap (bitmap, null, rect, paint); <br/>}</P> <p> // draw the next image <br/> If (offsetx <0) {// move to the left <br/> If (nbitmap! = NULL) {<br/> int left = gallerydemoactivity. devicescreenwidth + 15 + offsetx; <br/> int Top = 0; <br/> int right = left + gallerydemoactivity. devicescreenwidth; <br/> int Bottom = gallerydemoactivity. devicescreenheight; <br/> rect. set (left, top, right, bottom); <br/> canvas. drawbitmap (nbitmap, null, rect, paint); <br/>}< br/>} else if (offsetx> 0) {// slide to the right <br/> If (fbitmap! = NULL) {<br/> int left =-gallerydemoactivity. devicescreenwidth-15 + offsetx; <br/> int Top = 0; <br/> int right = left + gallerydemoactivity. devicescreenwidth; <br/> int Bottom = gallerydemoactivity. devicescreenheight; <br/> rect. set (left, top, right, bottom); <br/> canvas. drawbitmap (fbitmap, null, rect, paint); <br/>}< br/>}After the sliding image ends, you need to perform a sliding animation to re-set the status of the current image and the previous and next image to prepare for the next slide.

@ Override <br/> protected void onanimationend () {<br/> If (isflingright) {// slide to the right, position minus 1 <br/> nbitmap = bitmap; <br/> bitmap = fbitmap; <br/> fbitmap = NULL; <br/> postion = postion-1; <br/>} else if (isflingleft) {// slide to the left, position plus 1 <br/> fbitmap = bitmap; <br/> bitmap = nbitmap; <br/> nbitmap = NULL; <br/> postion = postion + 1; <br/>}</P> <p> isflingright = false; <br/> isflingleft = false; <br/> isfling = false; <br/> offsetx = 0; <br/> If (fbitmap = NULL & offsetx = 0) {// if the previous image is empty (slide to the right), reset the previous image (position-1) <br/> If (postion> 0) {<br/> fbitmap = getbitmap (postion-1 ); <br/>}</P> <p>} else if (nbitmap = NULL & offsetx = 0) {// if the next image is empty (sliding to the left), reset the next image (Position + 1) <br/> If (postion <bitmaps. length-1) {<br/> nbitmap = getbitmap (postion + 1); <br/>}< br/> clearanimation (); <br/>}

4. Introduction to gesture coordinates

In this example, the onscroll () and onfling () Methods of the ongesturelistener interface are used, involving Android system coordinates and the equivalent values of motionevent E1 and E2, velocity velocityx, and velocityy.

Android screen coordinate system (left)

(1) In motionevent, E1 is the start point for the first time when the finger presses the screen. E2 is the end point when the finger is raised to exit the screen. According to the android screen coordinate system, we can see that:

Slide your finger to the right. The end point (E2) is on the right of the start point (E1), and e2.getx ()-e1.getx () is greater than 0.
The finger slides to the left. The end point (E2) is on the left of the start point (E1), and e2.getx ()-e1.getx () is smaller than 0.
The finger slides down. The end point (E2) is at the lower side of the start point (E1), and e2.gety ()-e1.gety () is greater than 0.
The finger slides up. The end point (E2) is on the top side of the start point (E1), and e2.gety ()-e1.gety () is smaller than 0.

(2) onscroll (motionevent E1, motionevent E2, float distancex, float distancey)

Distancex is the X distance between the first call and the second call, not the horizontal distance between E2 and E1.

Distancex is the y distance between the first call and the second call, not the vertical distance between E2 and E1.

For details about the direction of the value, see (medium)

(3) onfling (motionevent E1, motionevent E2, float velocityx, float velocityy)

Velocityx, which is the speed per second of the X axis

Velocityy, which is the speed per second of the Y axis

For details about the direction of the value, see (right)

After careful observation, we can find that the directions of velocityx and velocityy are the opposite of those of distancex and distancey.

For more information about ongesturelistener interface functions, see the previous blog Android slide effect (1) -- viewflipper

Download sample source code