The draw mechanism of the Android view frame

Overview

The Android View framework works in three main processes:

1. View tree measurement (measure) measure mechanism of Android view frame

2. Layout of the view tree layoutsmechanism of Android view frame

3. View tree Draw (draw)The draw mechanism of the Android view frame

The workflow for the view frame is to measure each view size (measure) and place each view in the appropriate location (layout) and draw each view (draw).

This paper mainly describes the draw process in the three major processes. If you do not know the measure process, you can refer to the measure mechanism of this article Android view Framework .

If you are unsure of the layout process, you can refer to the layout mechanism of the Android view framework in this article.

This article does not describe the use of the graphic module-specific drawing API, but describes the drawing process of the view frame.

Think about the whole draw process with questions. 1. Why does the system have draw process?

After the measure process and layout process, the view frame has determined the size and position of each view. Then, then, is an important process, which is the draw process, which is used to draw the view, and its purpose is to use the various drawing functions provided by the graphic framework to draw what the current view looks like.

2. What did the draw process do?

In the view frame, the draw process is primarily the appearance of the drawing view. ViewGroup is responsible for drawing all the sub-view in addition to drawing itself. Instead of a view object with sub-view, it is up to you to draw yourself.

The main flow of the draw process is as follows:

1. Draw Backgroud (Drawbackground)
2, if necessary, save the canvas layer, to prepare fading (not necessary steps)
3. Draw the content of view (OnDraw method)
4. Draw children (Dispatchdraw method)
5, if necessary, draw fading edges, and then restore layer (not necessary steps)
6, drawing adorners, such as ScrollBar (Ondrawforeground)

Source Code Analysis

In the view source code, the following information about the layout process is extracted.

We know that the root node of the entire view tree is Decorview, which is a framelayout, so it is a viewgroup, so the whole view tree is measured from the draw method of a ViewGroup object.

View:1, Draw

/**

Draw a view and his sub-view. It is best not to overwrite this method, but you should overwrite the OnDraw method to draw yourself.

*/

public void Draw (canvas canvas);

Source:

It is not given here, interested readers, can consult the SDK by themselves.

Pseudo code

 Public void Draw (canvas canvas) {    1, drawing Backgroud (Drawbackground)  ;     2,if necessary, save the canvas layer, to prepare fading;     3.draw the content of view (OnDraw method)    ; 4, Draw Children (Dispatchdraw method);     5,if necessary, draw fading edges, and then restore layer;     6, draw the adorner, such as ScrollBar (Ondrawforeground);}

2, OnDraw

/**

Draws the appearance of a view. The default implementation of view is an empty implementation, so there is no source code given here.

*/

protected void OnDraw (canvas canvas);

Viewgroup:1, Dispatchdraw

/** Drawing sub-View,view class is an empty implementation, there are implementations in the ViewGroup class */

protected void Dispatchdraw (canvas canvas);

Source:

It is no longer given that interested readers check the SDK themselves.

Pseudo code:

protected void Dispatchdraw (canvas canvas) {    if  (requires drawing layout animation) {    for  (Traverse child view) {        binding layout animation;    }    Starts the animation control, notifies the animation to start;    }      for (Traverse child view) {    child.draw ();}    }

Hands-on Operation

Let's write a custom viewgroup for each of its inner sub-view, and let the left side of each sub-view be a distance from the left edge of the previous child view. Then draw a circle inside the entire layout. It might look like the following:

The actual operating effect is as follows:

The code is as follows:

 Public classVerticaloffsetlayoutextendsViewGroup {Private Static Final intOFFSET = 100; PrivatePaint Mpaint;  PublicVerticaloffsetlayout (Context context) {Super(context); Init (Context,NULL, 0); }     PublicVerticaloffsetlayout (Context context, AttributeSet attrs) {Super(context, attrs); Init (context, attrs,0); }     PublicVerticaloffsetlayout (context context, AttributeSet attrs,intdefstyleattr) {        Super(context, attrs, defstyleattr);    Init (context, attrs, defstyleattr); }    Private voidInit (context context, AttributeSet attrs,intdefstyleattr) {Mpaint=NewPaint (Color.Blue); Mpaint.setantialias (true); Mpaint.setalpha (125); } @Overrideprotected voidOnmeasure (intWidthmeasurespec,intHeightmeasurespec) {        Super. Onmeasure (Widthmeasurespec, Heightmeasurespec); intWidthmode =Measurespec.getmode (WIDTHMEASURESPEC); intHeightmode =Measurespec.getmode (HEIGHTMEASURESPEC); intWidthsize =measurespec.getsize (WIDTHMEASURESPEC); intHeightsize =measurespec.getsize (HEIGHTMEASURESPEC); intwidth = 0; intHeight = 0; intChildCount =Getchildcount ();  for(inti = 0; i < ChildCount; i++) {View child=Getchildat (i); Viewgroup.layoutparams LP=Child.getlayoutparams (); intChildwidthspec = Getchildmeasurespec (widthmeasurespec, 0, Lp.width); intChildheightspec = Getchildmeasurespec (heightmeasurespec, 0, Lp.height);        Child.measure (Childwidthspec, Childheightspec); }        Switch(widthmode) { CaseMeasureSpec.EXACTLY:width=widthsize;  Break;  CaseMeasurespec.at_most: Casemeasurespec.unspecified: for(inti = 0; i < ChildCount; i++) {View child=Getchildat (i); intWidthaddoffset = i * OFFSET +child.getmeasuredwidth (); Width=Math.max (width, widthaddoffset); }                 Break; default:                 Break; }        Switch(heightmode) { CaseMeasureSpec.EXACTLY:height=heightsize;  Break;  CaseMeasurespec.at_most: Casemeasurespec.unspecified: for(inti = 0; i < ChildCount; i++) {View child=Getchildat (i); Height= height +child.getmeasuredheight (); }                 Break; default:                 Break;    } setmeasureddimension (width, height); } @Overrideprotected voidOnLayout (BooleanChangedintLintTintRintb) {intleft = 0; intright = 0; inttop = 0; intBottom = 0; intChildCount =Getchildcount ();  for(inti = 0; i < ChildCount; i++) {View child=Getchildat (i); Left= i *OFFSET; Right= left +child.getmeasuredwidth (); Bottom= Top +child.getmeasuredheight ();            Child.layout (left, top, right, bottom); Top+=child.getmeasuredheight (); }} @Overrideprotected voidOnDraw (canvas canvas) {Super. OnDraw (canvas); intx = GetWidth ()/2; inty = GetHeight ()/2;    Canvas.drawcircle (x, Y, math.min (x, y), mpaint); }}

The draw mechanism of the Android view frame