The implementation method of gallery image set browsing for Android programming sliding effect _android

Source: Internet
Author: User
Tags gety

This paper illustrates the gallery image set browsing implementation method of Android programming sliding effect. Share to everyone for your reference, specific as follows:

The Android system comes with a gallery view of the application of the image, with a very smooth display of pictures when dragged through the fingers, with good user interaction and experience.

This example uses gallery and custom view to simulate the image browsing effect of a gallery image set. The effect chart is as follows:

1. Basic principle

Implements the Ongesturelistener interface onfling () gesture event in the activity, drawing the draw () picture with a custom View

2. Activity

Activity, registered Mygesture.ontouchevent (event) through Ontouchevent ()

@Override Public
Boolean ontouchevent (Motionevent event) {
  switch (event.getaction ()) {
  case MOTIONEVENT.ACTION_UP:
    flingview.onfling (0);//When the finger is lifted, reset the sliding distance offsetx = 0 break
    ;
  }
  Return Mygesture.ontouchevent (event);
}

Then we implement the Onscroll () method of the interface Ongesturelistener, pass the sliding parameter to the Handlescroll () member of the Flingview that inherits from the view, get the slide x-axis distance

@Override Public
Boolean onscroll (motionevent E1, motionevent E2, float Distancex, float distancey) {
  Flingview.handlescroll ( -1 * (int) Distancex);
  return true;
}

Then implement the Onfling () method of the interface Ongesturelistener, pass the sliding parameter to the onfling () member method of the Flingview that inherits from the view, and get the speed of the gesture.

@Override Public
Boolean onfling (motionevent E1, motionevent E2, float Velocityx, float velocityy) {
  Flingview.onfling ((int)-Velocityx);
  return true;
}

3, Flingview

In Flingview, get the speed of gestures from the activity

public void onfling (int paramFloat1) {
  if (OffsetX > GALLERYDEMOACTIVITY.DEVICESCREENWIDTH/5) {
    if Fbitmap! = null) {
      isfling = true;
      Isflingright = true;
    }
  } else if (OffsetX <-GALLERYDEMOACTIVITY.DEVICESCREENWIDTH/5) {
    if (nbitmap!= null) {
      isfling = true;
      Isflingleft = true;
    }
  }
  Start animation effect
  startanimation (New Myanimation ());


During the sliding process, draw the picture by implementing the Draw () method of view, noting that at this point you need to draw the current picture (get focus) and the next picture (get focus) altogether two pictures

@Override public void Draw (Canvas Canvas) {Paint Paint = new Paint ();
  Rect Rect = new Rect ();
  Canvas.drawcolor (Color.Black);
    Draws the current picture if (bitmap!= null) {int left = OffsetX;
    int top = OffsetY;
    int right = OffsetX + gallerydemoactivity.devicescreenwidth;
    int bottom = OffsetY + gallerydemoactivity.devicescreenheight;
    Rect.set (left, top, right, bottom);
  Canvas.drawbitmap (bitmap, NULL, rect, paint); ///Draw Next Picture if (OffsetX < 0) {//left-sliding if (nbitmap!= null) {int ieft = Gallerydemoactivity.devicescree
      Nwidth + + OffsetX;
      int top = 0;
      int right = left + gallerydemoactivity.devicescreenwidth;
      int bottom = Gallerydemoactivity.devicescreenheight;
      Rect.set (left, top, right, bottom);
    Canvas.drawbitmap (Nbitmap, NULL, rect, paint); ' Else if ' (OffsetX > 0) {//Right sliding if (Fbitmap!= null) {int left =-gallerydemoactivity.devicescreenwidt
      H-15 + OffsetX;
      int top = 0; int right = left + gallerydemoactivity.devicescreenwidth;
      int bottom = Gallerydemoactivity.devicescreenheight;
      Rect.set (left, top, right, bottom);
    Canvas.drawbitmap (Fbitmap, NULL, rect, paint);

 }
  }
}

After sliding the picture, you need to do a sliding animation processing, reset the current picture and the current picture of the previous and next state, for the next slide to prepare

@Override
protected void Onanimationend () {
  if (isflingright) {//slide to the right, position minus 1
    nbitmap = bitmap;
    bitmap = Fbitmap;
    Fbitmap = null;
    postion = postion-1;
  } else if (isflingleft) {//left sliding, position plus 1
    fbitmap = bitmap;
    bitmap = Nbitmap;
    Nbitmap = null;
    postion = postion + 1;
  }
  Isflingright = false;
  Isflingleft = false;
  Isfling = false;
  OffsetX = 0;
  if (Fbitmap = null && OffsetX = 0) {//If the previous picture is empty (slide to the right), reset the previous picture (position-1)
    if (postion > 0) {
      FB Itmap = Getbitmap (postion-1);
    }
  } else if (Nbitmap = = null && OffsetX = 0) {//If the latter picture is empty (left-sliding), reset the latter picture (position + 1)
    if (Postion < bitmaps . length-1) {
      Nbitmap = getbitmap (postion + 1);
    }
  }
  Clearanimation ();
}

4. Introduction of gesture coordinates

In this example, the Onscroll () and onfling () methods of the Ongesturelistener interface are used to refer to the Android system coordinates and touch Motionevent E1 and E2, Speed Velocityx, velocityy equivalents
The android screen coordinate system is shown below (left)

(1) in Motionevent, E1 is the first time the finger presses the starting point of the screen, E2 is lifting his finger off the screen, according to the android screen coordinates shown above:
The finger slides to the right, the end point (E2) is to the right of the starting point (E1), with E2.getx ()-e1.getx () greater than 0
The fingers slide to the left, the end point (E2) is to the left of the starting point (E1), with E2.getx ()-e1.getx () less than 0
The fingers slide down, the end point (E2) is on the lower side of the starting point (E1), with E2.gety ()-e1.gety () greater than 0
The fingers slide up, the end point (E2) is on the upper side of the starting point (E1), there is e2.gety ()-e1.gety () less than 0

(2) Onscroll (motionevent E1, motionevent E2, float Distancex, float distancey)
Distancex, is the x distance of the call before and after two times, not the horizontal distance between E2 and E1
Distancex, is the Y-distance of call before and after two times, not the vertical distance between E2 and E1
The specific value of the direction, please refer to the above figure (in)

(3) onfling (motionevent E1, motionevent E2, float Velocityx, float velocityy)
Velocityx, is the x-axis velocity per second.
Velocityy, is the speed per second of the Y axis.
The specific value of the direction, please see above (right)
Careful observation can be found: Velocityx, velocityy direction and Distancex, Distancey direction just the opposite

Introduction to more Ongesturelistener interface functions

More interested readers of Android-related content can view this site: "Android Development Animation Tips", "Android Development introduction and Advanced Course" and "Android Control usage summary."

I hope this article will help you with the Android program.

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.