Simple use of Android viewflipper

Everyone has used viewpager, but viewpager has another brother, viewflipper. The names of the two are very similar. We can understand viewpager as "page by page view", and viewflipper as "fast flipping view", but the utilization rate of the latter is far lower than that of the former, but this does not mean that viewflipper is weak. Now let's visit the often neglected viewflipper.

1. Create project and page view layouts

Create a new project in Android studio to achieve this effect: create pages in red, orange, green and blue, and then switch them back and forth through viewflipper. The names of the four page layout files are as follows:

item_ The code of view1.xml is as follows:

For the other three layout codes, just change the background color.

2. Add layout to viewflipper

After the page is created, how can we put it in viewflipper? Very simply, viewflipper supports adding pages with include tags. We just need to add pages in activity_ Just include the four layouts in main.xml.

You can see the following effects by running it directly:

In addition to adding pages directly to the layout file, you can also add activities to the code_ Comment out the include tag in mai.xml, and then initialize viewflipper in mainactivity, and then add the following code:

Then the addViews method can be invoked in onCreate.

3. Add page switching animation

We have achieved the effect of page switching, but there is no change process. It looks too stiff and tired eyes. If you can have animation effects, it will be much more comfortable. Here, we will use two new attributes: - inanimation: the animation effect when the view enters - outanimation: the animation effect when the view exits. These two attributes can also be set in the code, which we will use later. Now let's create the animation file we need. For example, if I want to realize the animation effect of left-right circular sliding, I can discuss it in two cases: one is that the new view enters from the left and the original view exits from the right, that is, sliding from left to right; The other is that the new view enters from the right and the original view exits from the left, that is, sliding from right to left. After knowing all the animation effects, we will create an anim folder under the res folder to create the following four animation effects:

left_ in.xml

View the animation of the interface from the left:

left_ out.xml

The animation of the view exiting the interface from the left:

right_ in.xml

right_ out.xml

Now let's try the animation effect of turning left to right. Add the following attributes to the viewflipper in the layout:

Run it, you can achieve the animation effect of sliding from left to right (the GIF image is a little distorted, but the effect is no problem).

Believe me, you don't need me to say. Do you know how to slide it from right to left?

4. Slide the screen left and right with your fingers (using touch to monitor events)

Is it itchy to watch the picture slide by itself? It doesn't matter. Let's make it respond to the sliding of our fingers. Before that, do some preparatory work: go to the layout file, remove the animation attribute, and set the autostart attribute to false.

To make it obey the "command", we can first inherit the ontouchlistener interface, and then implement the ontouch method:

The above code is not difficult, and the comments are relatively clear. The general idea is to obtain the coordinates when the finger is pressed and lifted, and then judge whether to slide left or right. It is worth noting that Showprevious and shownext methods. The former displays the previous view and the latter displays the latter view. Finally, remember to change the return value to true, otherwise the touch event will not respond.

The effect picture is as follows, which can be left or right.

5. Finger left and right sliding screen II (realized by using gesture to monitor events)

In addition to touch monitoring events, we can also use gesture monitoring event ongesturelistener to achieve the same effect. However, after inheriting the interface, we need to implement a series of methods. The code suddenly expands, and all we need is one of them. Fortunately, Android also provides a class simpleongesturelistener, so we just need to customize a class to inherit it, and then implement the methods we need:

The onfling method here has to be explained. It represents the gesture of moving and then releasing the finger on the screen, that is, sliding. The first two parameters represent the events when the finger is pressed and released respectively. The coordinates before and after sliding can be obtained by calling the geTx () method through their objects. The following steps are the same as those in the touch event. I believe you can understand.

At first I thought it was done here, but after running, it didn't move! A closer look at the document reveals that the onTouchEvent method must also be invoked in the touch monitoring method, otherwise the touch event will not work.

6. Postscript

The usage of viewflipper has come to an end. When writing this article, I also reviewed the knowledge of gesture monitoring events. I hope you can gain something. The following is the source code: viewfliperdemo

7. Reference articles

Google official document viewflipper Android gesture operation recognition

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.