Customize View(1) basic concepts and knowledge points

The next period of time we will sort out a series of custom View articles, from shallow to difficult, do not miscut wood, before really start, we still have a certain understanding and supplement to the knowledge point of custom View.

I. Coordinate system

The reason why coordinate system is put forward is that there are certain differences between Android and our traditional coordinate system, so we need to make a distinction.

Mathematical coordinate system:

The right is the positive direction of X axis, and the upper is the positive direction of Y axis. Similarly, the Angle in the mathematical coordinate system is also the positive direction counterclockwise, as shown in the figure below:

Screen coordinate system

The coordinate system definition of the screen in Android starts from the upper left corner, the right is the positive direction of X axis, and the lower is the positive direction of Y axis, as shown below:

The corresponding Angle direction is also positive clockwise

Put a screen on it, something like this

2. View coordinate system

The View’s coordinate system is relative to the parent control and usually has the following methods,

GetTop () gets the distance between the top-left corner of the View and the top of the parent View

GetLeft () gets the distance from the top left corner of the View to the left of the parent View

GetBottom () gets the distance from the bottom right corner of the View to the top of the parent View

GetRight () gets the distance between the bottom right corner of the View and the left side of the parent View

To verify this, we will write a layout file as follows:

activity_ui_custom_location.xml

 1<? xml version="1.0" encoding="utf-8"? >

 2<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3    android:layout_width="match_parent"

 4    android:layout_height="match_parent"

 5    android:gravity="center">

 6

 7    <LinearLayout

 8        android:id="@+id/ll_view"

 9        android:layout_width="300dp"

10        android:layout_height="300dp"

11        android:background="@color/colorAccent">

12

13        <View

14            android:id="@+id/view"

15            android:layout_width="100dp"

16            android:layout_height="100dp"

17            android:background="@color/colorPrimary" />

18    </LinearLayout>

19</RelativeLayout>

Copy the code

The preview of the XML layout file above is as follows:

LinearLayout A LinearLayout C LinearLayout A LinearLayout C LinearLayout A LinearLayout C LinearLayout

Let’s now get the coordinate positions of A and B respectively:

 1  View mView = findViewById(R.id.view);

 2        LinearLayout mLlView = findViewById(R.id.ll_view);

 3        mView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

 4            @Override

 5            public void onGlobalLayout(a) {

 6                mView.getViewTreeObserver().removeOnGlobalLayoutListener(this);

 7                int viewLeft = mView.getLeft();

 8                int viewTop = mView.getTop();

 9                int viewRight = mView.getRight();

10                int viewBottom = mView.getBottom();

11

12                LogUtil.d(TAG + "--view viewLeft=" + viewLeft);

13                LogUtil.d(TAG + "--view viewTop=" + viewTop);

14                LogUtil.d(TAG + "--view viewRight=" + viewRight);

15                LogUtil.d(TAG + "--view viewBottom=" + viewBottom);

16            }

17        });

18

19        mLlView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

20            @Override

21            public void onGlobalLayout(a) {

22              mLlView.getViewTreeObserver().removeOnGlobalLayoutListener(this);

23                int llViewLeft = mLlView.getLeft();

24                int llViewTop = mLlView.getTop();

25                int llViewRight = mLlView.getRight();

26                int llViewBottom = mLlView.getBottom();

27

28                LogUtil.d(TAG + "--view llViewLeft=" + llViewLeft);

29                LogUtil.d(TAG + "--view llViewTop=" + llViewTop);

30                LogUtil.d(TAG + "--view llViewRight=" + llViewRight);

31                LogUtil.d(TAG + "--view llViewBottom=" + llViewBottom);

32            }

33        });

Copy the code

Results:

We can see that the top and left obtained by B (View) are 0, from which we can infer that the coordinate position obtained by View is based on the parent layout, because the upper left corner of B is exactly the upper left corner of its parent class, so the data obtained is 0. If we have B in the middle, as follows:

Obtain the coordinate position again as follows:

The following conclusions can be drawn from the analysis results:

The difference between get and getRaw in MotionEvent

Again, we’ll start with the Demo, so let’s go straight to the Demo above,

 1mView.setOnTouchListener(new View.OnTouchListener() {

 2            @Override

 3            public boolean onTouch(View v, MotionEvent event) {

 4                float getX = event.getX();

 5                float getRawX = event.getRawX();

 6

 7                float getY = event.getY();

 8                float getRawY = event.getRawY();

 9

10                LogUtil.d(TAG + "--setOnTouchListener getX=" + getX + ",getRawX=" + getRawX);

11                LogUtil.d(TAG + "--setOnTouchListener getY=" + getY + ",getRawY=" + getRawY);

12                return false;

13            }

14        });

Copy the code

We click on the upper left corner of view B as much as possible and get the following result:

GetRawX, getRawY, getRawY, getRawX, getRawY, getRawY, getRawY, getRawY, getRawY, getRawY, getRawY, getRawY, getRawY, getRawY, getRawY, getRawY

Based on the above results, the following conclusions can be roughly drawn:

The starting point of the actual coordinates is the same point, and in order to distinguish the yellow line moved a little bit to the right and down, so the picture is rough, so it’s good to be clear.

4. Angle and radian in Android

In the subsequent custom View, some complex graphics need various mathematical calculations. For example, when we customize the circular progress bar or customize a clock, the concepts of Angle and radian are involved, so we have an understanding of the Angle and radian in Android in advance.

So let’s first look at how angles and radians are represented on a circle:

The Angle

radian

The definition of Angle and radian can be obtained from the above two figures:

The name of the	define
The Angle	Two rays shoot from the center toward the circumference, forming an Angle and an arc opposite the Angle.When the arc length is exactly 1/360 of the circumference, the Angle between the two rays is 1 degree.
radian	Two rays shoot from the center toward the circumference, forming an Angle and an arc opposite the Angle.When this arc length is exactly equal to the radius of the circle, the Angle between the two rays is 1 radian.

Why there are two kinds of description of diagonal Angle and radian? Because the two bases are different, the Angle is base 60, while the radian is decimal. When calculating the custom View, it can be converted according to different values.

4.1. Conversion method of Angle and radian

A circle has an Angle of 360 degrees and a radian of 2π

So 360 degrees = 2 PI ————————–> 180 degrees = PI

1 ° = PI / 180
One radian is equal to 180 over PI

Five, the color

5.1. Simple color introduction

Color modes supported in Android

Color pattern	note
ARGB8888	Four-channel high precision (32 bits)
ARGB4444	Four-channel low precision (16 bits)
RGB565	Screen Default mode(16)
Alpha8	Transparent channel only (8 bits)

Letters indicate the channel type, and numeric values indicate how many bits are used to represent the type. For example, ARGB8888 indicates that there are four channels, and each channel is represented in 8-bit binary. RGB565 indicates three channels, and each channel is represented in 5-bit, 6-bit, and 5-bit binary respectively

Note: We use ARGB8888 and ARGB4444, and the default mode on all Android screens is RGB565, please note this

Color definition using ARGB8888 as an example:

type	explain	0(0x00)	255(0xff)
A(Alpha)	transparency	transparent	opaque
R(Red)	red	Colorless,	red
G(Green)	green	Colorless,	green
B(Blue)	blue	Colorless,	blue

Where A, R, G, B range from 0 (0000 0000) to 255(1111 1111)
A from 0x00 to 0xFF indicates from transparent to opaque.
RGB from 0x00 to 0xFF indicates a light to dark color.

We can define the color Settings in our code as follows:

conclusion

Simple introduction about the custom view some basic concepts and knowledge, this paper thanks to a custom view, it is a custom view first, the follow-up will explore, step by step can also through some actual combat to consolidate, finishing is also a learning process, the article content will be the whole detail as far as possible, thank you for your reading, if there are mistakes, accept criticism and advice.

Customize View(1) basic concepts and knowledge points