What is a View?
View is a basic component in the Android system. It is a rectangular area on the user interface that can be used to display text, pictures, buttons, etc. View can respond to user interaction events, such as clicks, swipes, etc. In Android, all UI components are inherited from the View class.
View drawing process
The view drawing process can be divided into three stages: measurement, layout and drawing. Below we will introduce these three stages one by one.
Measurement phase
The measurement stage is the first important stage of the View drawing process. During the measurement phase, the system will call the ViewonMeasureMethod, measure the width and height of the View. During this process, the system will calculate the size of the View based on the View's LayoutParams and the size of the parent container.
Example: The following code is a custom View onMeasure method routine. During the measurement process, we set the size of the View.
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Get the Size and Mode of the width int widthSize = (widthMeasureSpec);
int widthMode = (widthMeasureSpec);
// If the Mode is accurate, return directly if (widthMode == ) {
setMeasuredDimension(widthSize, heightMeasureSpec);
return;
}
// Calculate the width of the View int desiredWidth = getPaddingLeft() + getPaddingRight() + defaultWidth;
int measuredWidth;
if (desiredWidth < widthSize) {
measuredWidth = desiredWidth;
} else {
measuredWidth = widthSize;
}
// Set the Size and Mode of width and height int heightSize = (heightMeasureSpec);
int heightMode = (heightMeasureSpec);
int measuredHeight = defaultHeight;
if (heightMode == ) {
measuredHeight = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
measuredHeight = (defaultHeight, heightSize);
}
setMeasuredDimension(measuredWidth, measuredHeight);
}After the measurement phase is over, the system passes the calculated width and height to the layout phase.
Layout stage
The layout stage is the second important stage of the View drawing process. During the layout phase, the system will call the ViewonLayoutMethod, place the View in the correct position in the parent container. During this process, the system will determine the location of the View based on the location of the View's LayoutParams and the parent container.
Example: The following code is a custom ViewGroup onLayout method routine. During the layout process, we traverse the subView and determine the position and size of the subView according to LayoutParams.
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
int left = getPaddingLeft();
int top = getPaddingTop();
int right = getMeasuredWidth() - getPaddingRight();
int bottom = getMeasuredHeight() - getPaddingBottom();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
if (() == GONE) {
continue;
}
LayoutParams lp = (LayoutParams) ();
int childLeft = left + ;
int childTop = top + ;
int childRight = right - ;
int childBottom = bottom - ;
(childLeft, childTop, childRight, childBottom);
}
}Draw phase (Draw)
The drawing stage is the last important stage of the View drawing process. During the drawing phase, the system will call the ViewonDrawMethod, draw the content of the View. In this process, we can use the Canvas object to draw various shapes, text, pictures, etc.
Example: The following code is a custom view onDraw method routine. During the drawing process, we draw a piece of text using the Paint object.
@Override
protected void onDraw(Canvas canvas) {
(canvas);
//Draw text String text = "Hello World";
Paint paint = new Paint();
(50);
();
(true);
(text, 0, getHeight() / 2, paint);
}In addition to drawing content, we can also draw the background and foreground of the View during the drawing stage. The system will calldrawBackgroundanddrawForegroundMethod to draw background and foreground. It is worth noting that the drawing order of the View is: first draw the background, then draw the content, and finally draw the foreground.
View drawing process
The view drawing process can be regarded as a recursive call process. We will introduce this process in detail below.
Step 1: Create View
At the beginning of the View drawing process, we need to create a View object and add it to the parent container. During this process, the system will call the View's constructor and pass the View's LayoutParams to it.
Step 2: Measure View
Next, the system will call the ViewmeasureMethod, measure the width and height of the View. In this process, the View will calculate its own width and height based on its LayoutParams and the size of the parent container.
Step 3: Layout View
After the measurement is completed, the system will call the ViewlayoutMethod, place the View in the correct position in the parent container. In this process, the View will determine its position based on its LayoutParams and the location of the parent container.
Step 4: Draw the background
After the layout is completed, the system will call the ViewdrawBackgroundMethod, draw the background of the View. In this process, we can use the Canvas object to draw various shapes, text, pictures, etc.
Step 5: Draw content
Next, the system will call the ViewonDrawMethod, draw the content of the View. In this process, we can use the Canvas object to draw various shapes, text, pictures, etc.
Step 6: Draw the foreground
After the drawing content is completed, the system will call the ViewdrawForegroundMethod, draw the foreground of the View. In this process, we can also use the Canvas object to draw various shapes, text, pictures, etc.
Step 7: Drawing subview
Then, the system will recursively call ViewGroupdispatchDrawMethod, draw the content of all subviews. In this process, we can use the Canvas object to draw various shapes, text, pictures, etc.
Step 8: Complete drawing
Finally, all Views are drawn and the entire View tree is drawn.
Example: The following code is a drawing process routine for custom ViewGroup. During the drawing process, we first draw the background, and then draw the content of each subview.
public class MyViewGroup extends ViewGroup {
public MyViewGroup(Context context) {
super(context);
}
public MyViewGroup(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Measure the width and height of the subview measureChildren(widthMeasureSpec, heightMeasureSpec);
// Get the width, height, size of ViewGroup int widthSize = (widthMeasureSpec);
int heightSize = (heightMeasureSpec);
// Set the width and height of the ViewGroup setMeasuredDimension(widthSize, heightSize);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// Iterate through all subviews and set their position and size int childCount = getChildCount();
int left, top, right, bottom;
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
left = ();
top = ();
right = ();
bottom = ();
(left, top, right, bottom);
}
}
@Override
protected void onDraw(Canvas canvas) {
(canvas);
// Draw the background ();
}
@Override
protected void dispatchDraw(Canvas canvas) {
(canvas);
// Draw the content of each subview for (int i = 0; i < getChildCount(); i++) {
View childView = getChildAt(i);
(canvas);
}
}
}In the drawing process of ViewGroup, the system will first call ViewGroup'sdrawMethods, and then call them in turndispatchDrawMethods and drawing each subview'sdrawmethod. The drawing order of ViewGroup is to draw your own background first, then draw the content and background of each subview, and finally draw your own foreground.
Summarize
This article introduces the drawing process of Android View in detail, including the measurement stage, layout stage and drawing stage. At the same time, we also explained in detail the drawing process of Android ViewGroup from the perspective of code implementation, helping you better understand and master Android UI development.
The above is the detailed content that reveals the process steps of Android view drawing. For more information about Android view drawing, please follow my other related articles!