Android Custom View

Preface

The detailed steps of customizing Android View are skills that every Android developer must master, because there will always be a need for customizing View in development. In order to improve my technical level, I have systematically studied it and wrote down some of my thoughts here. If there are any deficiencies, I hope you can point them out in time.

process

In Android, layout drawing requests are processed at the Android framework layer. Drawing starts from the root node, measuring and drawing the layout tree. PerformTraversals in RootViewImpl is deployed. What it does is measure (measure the view size), layout (determine the view position) and draw (draw the view) the required view. The following figure can well show the view drawing process:

When the user calls requestLayout, only measure and layout are triggered, but the system also triggers draw when it starts calling

The following is a detailed introduction to these processes.

measure

Measure is a final method in View and cannot be overridden. It measures and calculates the size of the view, but it will call back the onMeasure method, so when we customize the View, we can override the onMeasure method to measure the View as we need. It has two parameters widthMeasureSpec and heightMeasureSpec. In fact, these two parameters contain two parts, size and mode. Size is the measured size and mode is the view layout mode.

We can obtain them respectively through the following code:

 int widthSize = MeasureSpec.getSize(widthMeasureSpec);
 int heightSize = MeasureSpec.getSize(heightMeasureSpec);
 int widthMode = MeasureSpec.getMode(widthMeasureSpec);
 int heightMode = MeasureSpec.getMode(heightMeasureSpec);

The obtained mode types are divided into the following three types:

setMeasuredDimension

To get the width and height of the view through the above logic, the first thing to do is to call the setMeasuredDimension method to pass the measured width and height. In fact, the final method is to call the setMeasuredDimensionRaw method to assign the passed values ​​to the attributes. The calling logic of calling super.onMeasure() is the same.

Let's take a custom verification code View as an example. Its onMeasure method is as follows:

 @Override
    protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec) {
 int widthSize = MeasureSpec.getSize(widthMeasureSpec);
 int heightSize = MeasureSpec.getSize(heightMeasureSpec);
 int widthMode = MeasureSpec.getMode(widthMeasureSpec);
 int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (widthMode == MeasureSpec.EXACTLY) {
 //Get the exact width directly
            width = widthSize;
        } else if (widthMode == MeasureSpec.AT_MOST) {
 //Calculate the width (text width + padding size)
            width = bounds.width() + getPaddingLeft() + getPaddingRight();
 }
        if (heightMode == MeasureSpec.EXACTLY) {
 //Get the exact height directly
            height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
 //Calculate the height (text height + padding size)
            height = bounds.height() + getPaddingBottom() + getPaddingTop();
 }
 //Set the acquired width and height
        setMeasuredDimension(width, height);
 }

You can set different attributes for the layout_width and layout_height of the custom View to achieve different mode types, and you can see different effects.

measureChildren

If you are customizing a View that inherits ViewGroup, you must also measure the size of the subviews when measuring your own size. Generally, the size of the subviews is measured through the measureChildren(int widthMeasureSpec, int heightMeasureSpec) method.

 protected void measureChildren( int widthMeasureSpec, int heightMeasureSpec) {
 final int   size = mChildrenCount;
        final View [] children = mChildren;
 for ( int i = 0; i < size ; ++i) {
            final View child = children[i];
            if ((child.mViewFlags & VISIBILITY_MASK) != GONE) {
                measureChild(child, widthMeasureSpec, heightMeasureSpec);
 }
 }
 }

From the above source code, you will find that it actually traverses each subview, and if the subview is not hidden, the measureChild method is called. Then take a look at the measureChild source code:

 protected void measureChild( View child, int parentWidthMeasureSpec,
 int parentHeightMeasureSpec) {
        final LayoutParams lp = child.getLayoutParams();
        final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
                mPaddingLeft + mPaddingRight, lp.width);
        final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
                mPaddingTop + mPaddingBottom, lp.height);
        child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
 }

You will find that it first calls the getChildMeasureSpec method to obtain the width and height respectively, and then calls the View's measure method. From the previous analysis, we already know that it calculates the size of the view. The parameters in measure are obtained through getChildMeasureSpec. Let's take a look at its source code:

 public   static   int getChildMeasureSpec( int spec, int padding, int childDimension) {
 int specMode = MeasureSpec.getMode(spec);
 int specSize = MeasureSpec.getSize(spec); 
  
 int   size = Math. max (0, specSize - padding); 
  
 int resultSize = 0;
 int resultMode = 0; 
  
 switch (specMode) {
        // Parent has imposed an exact size   on us
 case MeasureSpec.EXACTLY:
            if (childDimension >= 0) {
                resultSize = childDimension;
                resultMode = MeasureSpec.EXACTLY;
            } else if (childDimension == LayoutParams.MATCH_PARENT) {
                // Child wants to be our size . So be it.
                resultSize = size ;
                resultMode = MeasureSpec.EXACTLY;
            } else if (childDimension == LayoutParams.WRAP_CONTENT) {
                // Child wants to determine its own size . It can't be
                // bigger than us.
                resultSize = size ;
                resultMode = MeasureSpec.AT_MOST;
 }
 break; 
  
        // Parent has imposed a maximum size   on us
 case MeasureSpec.AT_MOST:
            if (childDimension >= 0) {
                // Child wants a specific size ... so be it
                resultSize = childDimension;
                resultMode = MeasureSpec.EXACTLY;
            } else if (childDimension == LayoutParams.MATCH_PARENT) {
                // Child wants to be our size , but our size   is   not fixed.
                // Constrain child to   not be bigger than us.
                resultSize = size ;
                resultMode = MeasureSpec.AT_MOST;
            } else if (childDimension == LayoutParams.WRAP_CONTENT) {
                // Child wants to determine its own size . It can't be
                // bigger than us.
                resultSize = size ;
                resultMode = MeasureSpec.AT_MOST;
 }
 break; 
  
        // Parent asked to see how big we want to be
 case MeasureSpec.UNSPECIFIED:
            if (childDimension >= 0) {
                // Child wants a specific size ... let him have it
                resultSize = childDimension;
                resultMode = MeasureSpec.EXACTLY;
            } else if (childDimension == LayoutParams.MATCH_PARENT) {
                // Child wants to be our size ... find out how big it should
 // be
                resultSize = View .sUseZeroUnspecifiedMeasureSpec ? 0 : size ;
                resultMode = MeasureSpec.UNSPECIFIED;
            } else if (childDimension == LayoutParams.WRAP_CONTENT) {
                // Child wants to determine its own size .... find out how
                // big it should be
                resultSize = View .sUseZeroUnspecifiedMeasureSpec ? 0 : size ;
                resultMode = MeasureSpec.UNSPECIFIED;
 }
 break;
 }
        //noinspection ResourceType
 return MeasureSpec.makeMeasureSpec(resultSize, resultMode);
 }

Is it easier to understand now? What it does is to get the corresponding size according to the mode type as mentioned above. The mode of the subview is determined according to the mode type of the parent view and the LayoutParams type of the subview, and then the obtained size and mode are integrated and returned through the MeasureSpec.makeMeasureSpec method. Passed to measure, these are the two values ​​contained in the widthMeasureSpec and heightMeasureSpec mentioned above. The whole process is measureChildren->measureChild->getChildMeasureSpec->measure->onMeasure->setMeasuredDimension, so the subview can be measured and calculated through measureChildren.

layout

The same is true for layout. The onLayout method will be called back internally. This method is used to determine the drawing position of the subview, but this method is an abstract method in ViewGroup, so if the custom View inherits ViewGroup, it must be implemented. But if it inherits View, it is not necessary, and there is an empty implementation in View. The setting of the subview position is through the layout method of View by passing the calculated left, top, right and bottom values, and these values ​​are generally calculated with the help of the width and height of View. The width and height of the view can be obtained through the getMeasureWidth and getMeasureHeight methods. The values ​​obtained by these two methods are the values ​​passed by setMeasuredDimension in onMeasure above, that is, the width and height measured by the subview.

getWidth, getHeight are different from getMeasureWidth, getMeasureHeight. The former can only get the value after onLayout, which are left-right and top-bottom respectively; while the latter can only get the value after onMeasure. However, the values ​​obtained by these two methods are generally the same, so pay attention to the timing of calling.

The following is an example of defining a View that places subviews at the four corners of the parent view:

 @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
 int   count = getChildCount();
        MarginLayoutParams params; 
         
 int cl;
 int ct;
 int cr;
 int cb; 
             
 for ( int i = 0; i < count ; i++) {
 View child = getChildAt(i);
            params = (MarginLayoutParams) child.getLayoutParams(); 
                 
 if (i == 0) {
 //Upper left corner
                cl = params.leftMargin;
                ct = params.topMargin;
            } else if (i == 1) {
 //Upper right corner
                cl = getMeasuredWidth() - params.rightMargin - child.getMeasuredWidth();
                ct = params.topMargin;
            } else if (i == 2) {
 //lower left corner
                cl = params.leftMargin;
                ct = getMeasuredHeight() - params.bottomMargin - child.getMeasuredHeight()
                 - params.topMargin;
 } else {
 //lower right corner
                cl = getMeasuredWidth() - params.rightMargin - child.getMeasuredWidth();
                ct = getMeasuredHeight() - params.bottomMargin - child.getMeasuredHeight()
                 - params.topMargin;
 }
            cr = cl + child.getMeasuredWidth();
            cb = ct + child.getMeasuredHeight();
 //Determine where the subview is placed in the parent view
            child.layout(cl, ct, cr, cb);
 }
 }

As for the implementation source code of onMeasure, I will link it later. If you want to see the effect diagram, I will also post it later. The same is true for the previous verification code.

draw

Draw is initiated by dispatchDraw, which is a method in ViewGroup and has an empty implementation in View. You do not need to manage this method when customizing View. The draw method only exists in View. What ViewGroup does is just calling the drawChild method in dispatchDraw, and what is called in drawChild is the draw method of View. Let's take a look at the source code of draw:

 public void draw(Canvas canvas) {
        final int privateFlags = mPrivateFlags;
        final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE &&
                (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);
        mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN; 
          
 /*
         * 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
 int saveCount; 
  
 if (!dirtyOpaque) {
            drawBackground(canvas);
 } 
          
        // skip step 2 & 5 if possible (common case )
        final int viewFlags = mViewFlags;
        boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;
        boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;
        if (!verticalEdges && !horizontalEdges) {
            // Step 3, draw the content
            if (!dirtyOpaque) onDraw(canvas); 
              
            // Step 4, draw the children
            dispatchDraw(canvas); 
              
            // Overlay is part of the content and draws beneath Foreground
            if (mOverlay != null && !mOverlay.isEmpty()) {
                            mOverlay.getOverlayView().dispatchDraw(canvas);
 } 
                          
            // Step 6, draw decorations (foreground, scrollbars)
            onDrawForeground(canvas); 
                        
 // we're done...
 return ;
 }
 //Omit 2&5
 ....
 }

The source code is very clear. Draw is divided into 6 steps in total;

• Drawing the background
• If necessary, save the layers
• Draw your own text
• Drawing subviews
• Draw fading edges if necessary
• Drawing scrollbars

Steps 2 and 5 are not necessary. In step 3, the onDraw method is called to draw its own content, which is an empty implementation in View. This is why we must rewrite this method when customizing View. And step 4 calls dispatchDraw to draw the subview. Let's take the verification code as an example:

 @Override
    protected void onDraw(Canvas canvas) {
 //Draw the background
        mPaint.setColor(getResources().getColor(R.color.autoCodeBg));
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint); 
 
        mPaint.getTextBounds(autoText, 0, autoText.length(), bounds);
 //Draw the text
 for ( int i = 0; i < autoText.length(); i++) {
             mPaint.setColor(getResources().getColor(colorRes[random.nextInt(6)]));
            canvas.drawText(autoText, i, i + 1, getWidth() / 2 - bounds.width() / 2 + i * bounds.width() / autoNum
                    , bounds.height() + random.nextInt(getHeight() - bounds.height())
                    , mPaint);
 } 
  
 //Draw the interference points
 for ( int j = 0; j < 250; j++) {
             canvas.drawPoint(random.nextInt(getWidth()), random.nextInt(getHeight()), pointPaint);
 } 
  
 //Draw the interference line
 for ( int k = 0; k < 20; k++) {
 int startX = random.nextInt(getWidth());
 int startY = random.nextInt(getHeight());
 int stopX = startX + random.nextInt(getWidth() - startX);
 int stopY = startY + random.nextInt(getHeight() - startY);
             linePaint.setColor(getResources().getColor(colorRes[random.nextInt(6)]));
            canvas.drawLine(startX, startY, stopX, stopY, linePaint);
 }
 }

It's actually very simple, just some business logic for drawing. Well, that's basically it. Here's an example rendering, with a link to the source code

Example

By the way, there are also custom attributes, which I will briefly explain here. Custom attributes are generally required when customizing Views, so attr and declare-styleable are defined in res/values/attr.xml, and finally obtained through TypedArray in the custom View.