Summary of seven ways to realize sliding in Android

There are many ways to realize sliding in Android. This blog will provide some ideas to realize sliding, hoping to help people in need.

1、 Android coordinate system

Before explaining sliding, we need to briefly mention the Android coordinate system, because the essence of sliding is the constant change of coordinates, so let's first understand the two concepts of Android coordinate system and view coordinate system. Put two pictures directly, at a glance.

Android coordinate system

View coordinate system

As can be seen from the above two figures, the coordinate origin of the Android coordinate system is located in the upper left corner of the screen, while the origin of the view coordinate system is located in the upper left corner of the parent view. Since two different coordinate systems are provided, how can we obtain the coordinates? Android has provided us with some methods to obtain these coordinates. See the following figure at a glance.

Various methods for Android to obtain coordinates

2、 Layout method

When drawing a view, we call the onlayout () method to determine the position of the view. Similarly, we can call the layout () method to pass in the coordinates after our sliding to realize the sliding of the view. Of course, we can obtain the coordinates in the touch event. Next, we will give a small example of the sliding of the view with the finger.

Above, we get the coordinates (lastx, lasty) when the finger is pressed in the touch event, and then continuously calculate the offset in the X and Y directions when the finger moves, and then call the layout () method to change the position of the view to realize sliding. Of course, we use geTx () and gety () to obtain the view coordinates for modification. We can also use getrawx () and getrawy () to obtain the absolute coordinates to achieve the above effect. The code is as follows:

It must be noted that after changing the position of the view, we must call to set the initial coordinates, so as to accurately obtain the offset.

3、 Offsetleftandright and offsettopandbottom

Most steps of this method are the same as those of the previous method, but there are differences in mobile view. The code is as follows:

The above method is only one more layer of encapsulation, which can achieve the same effect as the above.

4、 Set layoutparams

Layoutparams can change the layout parameters. We can achieve the same effect above through the following code.

Note: our layoutparams can be obtained through getlayoutparams() method, but note that if the parent layout of the view is LinearLayout, our layoutparams is linearlayout.layoutparams. If the parent layout of the view is relativelayout, our layoutparams is relativelayout.layoutparams. Of course, we also have a simple method, regardless of the layout of the parent layout. The code is as follows:

The above method does not care about the type of parent layout and is more convenient to use.

5、 Scrollto and scrollby methods

For these two methods, we need to talk about some precautions in detail

1. The parameter of scrollto is a specific coordinate point (x, y), while the parameter of scrollby is the coordinate offset in the X, Y direction

2. Scrollto and scrollby move the contents of the view. This is very important!!!!

If we use scrollto and scrollby for ViewGroup, all internal child views will be moved. If we use scrollto and scrollby for textview, the median text will be moved.

3. Another problem with view movement is the coordinates. Let's explain it with pictures below:

View move 1

View move 2

We can understand that our mobile phone screen is a cover plate, and there is a huge canvas under the mobile phone screen. The cover plate of our mobile phone screen is transparent, so that only the canvas part overlapping with the mobile phone screen can be seen by us. We can also understand that calling scrollto and scrollby is a cover plate on the mobile phone. As shown in the figure, the coordinates of the button in the ViewGroup are (20,10). When we call scrollby (20,10), it is equivalent to moving the cover plate on the screen, and then the button we see will reach the upper left corner of the ViewGroup. Thus, if we want the button to move 20 and 10 units in the horizontal and vertical directions, we must call scrollby (- 20, - 10)

After the above knowledge preparation, we also use scrollby to realize the small example of the view moving with the finger implemented earlier:

6、 Using scroller

Scroller is also a very important role in sliding. After going through the previous scrollto and scrollby, you will also find that their movement is completed instantly, and the sliding is very abrupt. In order to improve the user experience, Google gave scroller, which can realize smooth movement, so as to make the sliding process more real and the user experience better, Let's briefly talk about the implementation principle of scroller.

Scroller is also a very important role in sliding. After going through the previous scrollto and scrollby, you will also find that their movement is completed instantly, and the sliding is very abrupt. In order to improve the user experience, Google gave scroller, which can realize smooth movement, so as to make the sliding process more real and the user experience better, Let's briefly talk about the implementation principle of scroller.

The implementation of scroller is similar to that of scrollto and scrollby. Both scrollto and scrollby move instantaneously from one coordinate point to another on the left, while scroller divides the moving distance into several small displacements, and then calls scrollto to continuously move these small displacements in each section. Due to the visual persistence effect of human eyes, It will give people the visual effect of smooth movement.

Next, we add a small function based on the previous step. In the first part, the view moves with the finger, but when we release the finger, let the view move smoothly to the initial position (the upper left corner of the screen). Next, we will introduce the usage of scroller step by step

1. Declare the scroller variable and initialize it in the constructor

2. Action in touch event_ In the up (finger lift) event, enter the coordinates of starting sliding and the distance to slide, and trigger the scroller's sliding event

3. Rewrite computescroll() to realize real sliding

The following is a complete code example:

The above code is the same as before. We will only talk about the scroller and some precautions

1. The meaning of the parameters of the startscroll () method can be seen from the following source code:

It can be seen that the startx and starty parameters are the (x, y) coordinates to start scrolling, so we can get them through getscrollx() and getscrolly() of ViewGroup (parent view of child view). It must be noted here that our content during sliding is the child view, so we can get them through getscrollx() and getscrolly() of parent view (ViewGroup) of child view What we get is the sliding distance of the sub view in the X and Y directions, that is, the (x, y) coordinates of the sub view when our fingers are raised. If we call the getscrollx () and getscrolly () methods on the child view, we will get the sliding distance and coordinates of the view inside the child view.

DX and Dy are the offsets in the X and Y directions respectively, and the comment says that if the values of DX and Dy we pass in are positive, the content (actually our view here) will be moved up and left, that is, we can return the child view to the upper left corner. Here, we can still use the concept of view movement mentioned in the previous section, When we want the child view to move up, we actually want the cover plate covered on it to move to the lower right corner. We can understand DX and Dy as the offset of the parent view (the cover plate covered on it).

Assuming that we just started to move the sub view to the lower right, it is equivalent to the cover plate moving to the upper left, so the values we obtained through getscrollx() and getscrolly() are negative. Now we release our fingers to move the sub view to the upper left (i.e. back to the upper left corner of the screen), it is equivalent to the cover plate moving to the lower right corner, Therefore, the values of DX and Dy must be - getscrollx () and - getscrolly (), and both values are positive.

2. Since our computescroll () method will not be called actively, but we need it to be called continuously to make small movements to achieve smooth sliding, we can use the following methods.

These three call invalidate () --- > OnDraw () --- > computescroll () in the following order, so we can_ After calling the startScroll () method in UP, we call the invalidate () method, and then judge whether the sliding ends in the computeScroll () method. If it is not finished, then we get the coordinates of the tiny displacement currently needed by getCurrX () and getCurrY (), and then pass it into the scrollTo () method. At that time, the child View is only moving a short distance, then we call invalidate again. () method, then call the OnDraw () method, and then enter the computescroll () again. Let the child view move a short distance again until the sliding ends. Computescrolloffset () returns false, then the process of this circular call ends, so as to complete the process of smooth movement.

7、 Attribute animation

Attribute animation can also realize the sliding of view, but because attribute animation involves many knowledge points, it will not be expanded here, but just provide an idea. Later, write a blog.

8、 Viewdraghelper

Viewdraghelper can help us realize various sliding requirements, but its use is also relatively complex, so we are going to write a blog to introduce it. Here is just a concept

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.