preface

If you’re an Engineer working on Android native development, you might be confused by the coordinates of a View and not understand what they really mean. Because there was a time when I, like you, felt strange and afraid to face them. Now I will sort out these knowledge points written, I hope to give you some help.

View coordinates are divided into four categories: position coordinates, content scroll coordinates, translation coordinates, and touch coordinates. By reading this article, readers will be able to understand the various View coordinates on the basis of the future in the face of animation and touch events will be more skilled.

Preliminary knowledge

This article will be easy for you to read if you already know the following.

  1. Understand View property animation; View touch event distribution; View measurement, layout process
  2. Understand basic Kotlin syntax

The environment

All the code and runtime screenshots in this article are based on the following development environment. Android Studio 4.1.1 Kotlin 1.4.20 Applications run on Android 5.1

View position coordinates

View position coordinates are the most common type of coordinates in our daily development. They are left, up, right, and down, and it is easy to get their values.

getLeft()
getTop()
getRight()
getBottom()
Copy the code

As shown above, through the View of the above four methods, you can get the View position coordinates. There are three points to note.

1. (left,top) represents the top left corner of the View, (right,bottom) represents the bottom right corner of the View 2. Position coordinates are coordinates relative to the parent container, that is, the origin of the coordinate system is the upper left corner of the parent container 3. Position coordinates do not change because of View scrolling or View panning. They are determined after the View measurement and layout process

View’s content scroll coordinates

Using the following two methods of a View, you can get the top-left coordinate of the View after the content is scrolled.

getScrollX()
getScrollY()
Copy the code

Note that the scroll coordinates of a View are relative to the View itself, that is, the origin of the coordinate system is the upper left corner of the View itself, not the parent container. As shown in the pseudo-code and operation screenshot below, the green area is a TextView. When we click on the green area, the TextView content will scroll 100px to the right. According to the operation screenshot, we can draw the following conclusion.

1. The View’s position does not change when the View’s contents are scrolled, as explained above. GetScrollX () is negative when a View’s contents scroll from left to right, just as getScrollY() is negative when a View’s contents scroll from top to bottom. If you go from right to left, bottom to top, it’s positive

viewBinding.tvScroll.scrollTo(-100.0)
Copy the code

The translation coordinate of View

Readers in the actual development, more or less have been exposed to View property animation, probably translation, rotation, zoom three. And the use of the pan scene in Android is too much, basically you can see the View sliding effect, are through the property animation pan to achieve. The translation coordinates of the upper left corner of the View can be obtained by using the following two methods. Note that the View’s translation coordinates are also relative to the View itself, that is, the origin of the coordinate system is the upper left corner of the View itself, not the parent container

getTranslationX()
getTranslationY()
Copy the code

Of course, you can still get the View’s translation coordinates relative to the parent container by using the following two methods of the View.

getX()
getY()
Copy the code

The mathematical relationship between the two is as follows

getX() = getLeft() + getTranslationX()
getY() = getTop() + getTranslationY()
Copy the code

As shown in the pseudo code and operation screenshot below, the green area is still a TextView. When we click on the green area, we use the property animation to move the TextView 100px to the right. According to the operation screenshot, we can draw the following conclusion.

1. View position coordinates will not change with View translation 2. Different from scrolling the contents of a View, panning a View moves the entire View to the right. 3. A translation to the right getTranslationX() is positive, and a translation to the lower getTranslationY() is positive. The other way around is negative

val translationXAnim = ObjectAnimator.ofFloat(viewBinding.tvScroll,"translationX".0f.100f).setDuration(2*1000)
translationXAnim.start()
Copy the code

Here is a question for the reader: If you were to implement a View sliding effect, choose content scroll or property animation pan? Obviously, translation has many advantages relative to content scrolling. First, the positive and negative values of translation coordinates are in line with people’s intuitive feelings. Secondly, translation is the translation of the whole View, with more practical application scenarios and no obvious disadvantages.

View’s touch coordinates

The View’s touch coordinates are associated with the touch event, and there are two sets of methods for obtaining the touch coordinates.

The first group gets the coordinates of the View’s touch point relative to the View’s top-left corner

eventX = event.getX()
eventY = event.getY()
Copy the code

The second group gets the coordinates of the View touch point relative to the upper-left corner of the device screen

rawX = event.getRawX()
rawY = event.getRawY()
Copy the code

Note that the event type in the pseudocode above is MotionEvent. Readers can use this object by calling the View’s setOnTouchListener method or overwriting the View’s onTouchEvent method.

As you can see in the screenshot below, the green area is still a TextView, but it has a 50px left margin and a 50px top margin. Click anywhere in the green area and you’ll see that rawX and eventX are always 50px apart and rawY and eventY are always 75px apart. According to the above analysis, there should be a 50px difference between rawY and eventY? The extra 25px is actually the height of the status bar, which confirms the above conclusion.

1. Event.getx () and event.gety () are the coordinates of the View’s touch point relative to the upper-left corner of the View. 2. Event.getrawx () and event.getrawy () are the coordinates of the View’s touch point relative to the upper-left corner of the device screen

The following figure will help readers understand better.

Write in the last

This article is a View coordinate practice and summary, I hope this article can give readers a little help.

If you are interested in me, please go to blogss.cn or follow programmer Xiabei to learn more.

  • If this article has helped you, please feel free to like it and follow it. This is what keeps me writing ❤️
  • Due to the author’s limited level, if there are any mistakes in this article, please correct them in the comments section ✔️
  • This article was first published in nuggets. Reprint is prohibited without permission ©️