Android UI basics-coordinate system, angle (radian), color

Since mobile devices generally define the upper left corner of the screen as the origin of coordinates, with the x-axis increasing direction to the right and the y-axis increasing direction downward, the coordinate system on the mobile phone screen is slightly different from the common coordinate system in mathematics. ,Details are as follows:

(PS: ∠a is corresponding, pay attention to the y-axis direction!)

The default coordinate system on the actual screen is as follows:

PS: Assume that the brown part is the mobile phone screen

1.2 View’s coordinate system

Note: View's coordinate system is relative to the parent control.

getTop(); //获取子View左上角距父View顶部的距离

getLeft(); //获取子View左上角距父View左侧的距离

getBottom(); //获取子View右下角距父View顶部的距离

getRight(); //获取子View右下角距父View左侧的距离

As shown below:

1.3 The difference between get and getRaw in MotionEvent

event.getX(); //触摸点相对于其所在组件坐标系的坐标

event.getY();



event.getRawX(); //触摸点相对于屏幕默认坐标系的坐标

event.getRawY();

As shown below:

PS: The contents of the same color are corresponding. For the convenience of display, the blue arrow is slightly offset to the left.

1.4 Core Points

serial number	Main points
1	The difference between common coordinate systems in mathematics and the screen default coordinate system
2	View's coordinate system is relative to the parent control
3	The difference between get and getRaw in MotionEvent

2 Angles and radians

2.1 Definition of angles and radians

Angle, like radians, is a unit of measurement that describes angles. Here are their definitions:

name	definition
angle	Two rays are emitted from the center of the circle to the circumference, forming an included angle and an arc directly opposite the included angle. When the length of this arc is exactly equal to one-360th of the circumference of the circle, the angle between the two rays is 1 degree.
radian	Two rays are emitted from the center of the circle to the circumference, forming an included angle and an arc directly opposite the included angle. When the arc length is exactly equal to the radius of the circle, the angle between the two rays is 1 radian.

As shown in the picture:

2.2 Conversion relationship between angles and radians

The angle corresponding to one circle of a circle is 360 degrees (angle), and the corresponding radian is 2π radians.

Therefore, the equivalent relationship is obtained: 360 (angle) = 2π (radians) ==> 180 (angle) = π (radians)

From the equivalence relationship, the following conversion formula can be obtained:

rad is radians, deg is angle

official	example
row = you x π / 180	2π ＝ 360 x π / 180
you = rad x 180 / π	360 ＝ 2p x 180 / p

Formula from Wikipedia:

rad is radians, deg is angle

2.3 Some details

Due to the small difference between the default screen coordinate system and the common mathematical coordinate system, there must be some differences in the corners, such as:

In the common mathematical coordinate system, the angle increasing direction is counterclockwise,

In the default screen coordinate system, the angle increases clockwise.

3 colors

3.1 A brief introduction to color

Color modes supported by Android:

color mode	Remark
ARGB8888	Four channels of high precision (32 bits)
ARGB4444	Four channels low precision (16 bits)
RGB565	Screen default mode (16-bit)
Alpha8	Transparent channel only (8-bit)

PS: The letters represent the channel type, and the numerical value represents how many binary digits are used to describe the type. For example, ARGB8888 means that there are four channels (ARGB), and each corresponding channel is described by 8 bits.

Note: We commonly use ARGB8888 and ARGB4444, and the default mode on all Android device screens is RGB565, please pay attention to this.

Taking ARGB8888 as an example to introduce color definition:

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

The value range of ARGB is 0~255 (i.e. 0x00~0xff in hexadecimal)

A From 0x00 to 0xff means from transparent to opaque.

RGB from 0x00 to 0xff represents the color from light to dark.

When RGB takes the minimum value (0 or 0x000000), the color is black, and when the RGB takes the maximum value (255 or 0xffffff), the color is white.

3.2 Several ways to create or use color

3.2.1 Defining colors in java

int color = Color.GRAY; //灰色

Since the Color class provides only a limited number of colors, they are usually represented by ARGB values.

int color = Color.argb(127, 255, 0, 0); //半透明红色

int color = 0xaaff0000; //带有透明度的红色

3.2.2 Define colors in xml files

Defined as follows in the /res/values/color.xml file:

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

<resources>

<color name="red">#ff0000</color>

<color name="green">#00ff00</color>

</resources>

Detailed explanation: Two colors, red and green, are defined in the above xml file, and there is no alpha (transparent) channel.

Defining a color starts with '#', followed by a hexadecimal value. There are several definition methods:

#f00 //低精度 - 不带透明通道红色

#af00 //低精度 - 带透明通道红色



#ff0000 //高精度 - 不带透明通道红色

#aaff0000 //高精度 - 带透明通道红色

3.2.3. Reference the color defined in xml in the java file:

int color = getResources().getColor(R.color.mycolor);