Summary of Android's dominant control View

[[163808]]

About Android View Controls

Controls in Android are roughly divided into two categories: ViewGroup and View. ViewGroup manages View as a container. Android view is a structure similar to the DOM tree. The parent view is responsible for measuring, positioning, drawing and other operations. The reason why the findViewById method we often use is expensive is because it is responsible for traversing the entire control tree from top to bottom to find the View instance. Try to use it as little as possible in repeated operations. Many controls currently in use are directly or indirectly inherited from View, as shown in the figure below.

View inheritance tree

Android UI interface architecture

Each Activity contains a PhoneWindow object, and PhoneWindow sets DecorView as the root view of the application window. Inside it are the familiar TitleView and ContentView. Yes, the setContentView() that we usually use is the ContentView that is set.

UI Architecture

How does Android draw View?

When an Activity is started, it will be asked to draw its layout. The Android framework will handle this request, of course, the premise is that the Activity provides a reasonable layout. Drawing starts from the root view and traverses the entire view tree from top to bottom. Each ViewGroup is responsible for drawing its own child Views, and each View is responsible for drawing itself. The drawing process is divided into three steps through the draw() method.

• Measure
• Layout
• Draw

The entire drawing process is carried out in the performTraversals() method in ViewRoot. Part of the source code is as follows.

 private   void performTraversals() {
 ......
 //The origin of widthMeasureSpec and heightMeasureSpec of the outermost root view  
 //lp.width and lp.height are equal to MATCH_PARENT when creating a ViewGroup instance  
 int childWidthMeasureSpec = getRootMeasureSpec(mWidth, lp.width);
 int childHeightMeasureSpec = getRootMeasureSpec(mHeight, lp.height);
 ......
    mView.measure(childWidthMeasureSpec, childHeightMeasureSpec);
 ......
    mView.layout( 0 , 0 , mView.getMeasuredWidth(), mView.getMeasuredHeight());
 ......
 mView.draw(canvas);
 ......
 }

Of course, you need to know the size and drawing of the view before drawing. So first do measurement and layout (measurement and positioning), as shown below.

Drawing process

Measure process

 public   final   void measure( int widthMeasureSpec, int heightMeasureSpec) {
 //....   
 
 //Callback onMeasure() method  
    onMeasure(widthMeasureSpec, heightMeasureSpec); 
 
 //more  
 }

Calculate the actual size of the view, get the height and width and store them in mMeasuredHeight and mMeasureWidth, the two parameters passed in by measure(int, int). MeasureSpec is a 32-bit int value, the upper 2 bits are the measurement mode, and the lower 30 bits are the measured size. The measurement modes can be divided into the following three types.

• EXACTLY
  Exact value mode. When layout_width or layout_height is specified as a specific value, or match_parent, the system uses EXACTLY.

• AT_MOST
  Maximum value mode, when specified as wrap_content, the size of the control cannot exceed the maximum size allowed by the parent control.

• UNSPECIFIED
  Without specifying a measurement mode, the View can be as large as you want. This is generally not used.

According to the source code above, the measure method cannot be overridden. The onMeasure method needs to be overridden during customization.

 protected   void onMeasure( int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
                getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
 }

Looking at the source code, we can see that the final height and width are set by calling setMeasuredDimension(). If not overridden, the default is to directly call getDefaultSize to get the size.

Use the getMeasuredWidth() and getMeasuredHeight() methods of View to obtain the width and height measured by the View. These two methods must be called after the onMeasure process to return valid values.

Layout Process

The Layout method is used to determine the position of the view layout, just like after you know the size of an object, you always need to know the position before you can draw it.

 mView.layout( 0 , 0 , mView.getMeasuredWidth(), mView.getMeasuredHeight());

layout takes four parameters, the left, top, right, and bottom coordinates, relative to the parent view. Here you can see that the width and height just measured are used.

 public   void layout( int l, int t, int r, int b) {
 int oldL = mLeft;
 int oldT = mTop;
 int oldB = mBottom;
 int oldR = mRight;
 boolean changed = setFrame(l, t, r, b);
 if (changed || (mPrivateFlags & LAYOUT_REQUIRED) == LAYOUT_REQUIRED) {
 .....
        onLayout(changed, l, t, r, b);
 .....
 }

Set the coordinates via setFrame. If the coordinates have changed, reposition them. If it is a View object, onLayout is an empty method because the positioning is determined by ViewGroup.

getWidth() and getHeight() will return the correct values ​​only after layout is completed.

A question arises here, what is the difference between getWidth/Height() and getMeasuredWidth/Height()?

• getWidth(): The width of the View after the layout is set.
• getMeasuredWidth(): The width of the View content obtained by measuring the content on the View.

getwidth

Draw process

 public   void draw(Canvas canvas) {
 ......
 /*
         * Draw traversal performs several drawing steps which must be executed
         * in the appropriate order:
 *
         * 1. Draw the background
         * 2. If necessary, save the canvas' layers to prepare for fading
         * 3. Draw view's content
         * 4. Draw children
         * 5. If necessary, draw the fading edges and restore layers
         * 6. Draw decorations (scrollbars for instance)
 */   
 
 // Step 1, draw the background, if needed  
 ......
 if (!dirtyOpaque) {
            drawBackground(canvas);
 } 
 
 // skip step 2 & 5 if possible (common case)  
 ...... 
 
 // Step 2, save the canvas' layers  
 ......
 if (drawTop) {
                canvas.saveLayer(left, top, right, top + length, null , flags);
 }
 ...... 
 
 // Step 3, draw the content  
 if (!dirtyOpaque) onDraw(canvas); 
 
 // Step 4, draw the children  
 dispatchDraw(canvas); 
 
 // Step 5, draw the fade effect and restore layers  
 ......
 if (drawTop) {
            matrix.setScale( 1 , fadeHeight * topFadeStrength);
            matrix.postTranslate(left, top);
            fade.setLocalMatrix(matrix);
            p.setShader(fade);
            canvas.drawRect(left, top, right, top + length, p);
 }
 ...... 
 
 // Step 6, draw decorations (scrollbars)  
        onDrawScrollBars(canvas);
 ......
 }

The key point is to call the onDraw method in the third step. The other steps are to draw some corners such as background, scrollBar, etc. Among them, dispatchDraw is used to recursively call the child View, and it is not needed if there is no child View.

The onDraw method needs to be implemented by yourself, because the content drawn by each control is different. It is mainly drawn with the canvas object, so I won't talk about it here.

References

1. A complete analysis of the Android view drawing process, taking you step by step to understand View (Part 2)
2. Android application layer View drawing process and source code analysis
3. How Android Draws Views
4. Android Heroes
5. What is the difference between getWidth/Height() and getMeasuredWidth/Height() in Android SDK?