ViewGroup学习之绘制过程

Android UI界面由以下树形结构组成, 从图中可以看出, UI界面是有View与ViewGroup两大类控件组成，在下面树形图中不管是View还是ViewGroup都是从android.view.View中派生, 而ViewGroup作为容器, 它可以装载和管理其下的一些列由android.view.View派生出来的元素(View和ViewGroup):

       

      由android.view.View派生出来的单一控件元素常见的有TextView, Button, ImageView等, 派生出的容器有LinearLayout, FrameLayout 等, 也有一些由ViewGroup派生出来的控件做为单一控件元素使用的， 比如说ListView, 当然我们也可以把ListView当做容器使用。Android通过布局可以完成很多有创意富有美感的界面， ViewGroup的作用很大，这里单独拿出来研究。

 

　　ViewGroup实现了android.view.ViewParent和android.view.ViewManager两个接口, 赋予其装载子控件和管理子控件的能力。这篇主要讲Android控件如何绘制到界面上的。

　　控件显示到界面上主要分三个流程, 如下图。这是一个非常自然的想法, 得到大小后才可以布局, 布局好了才可以绘制; 这三个流程都是按照上图树形结构递归的。对于这三个流程，只要对Android控件稍有研究的人都

         

会发现， 每一个控件都有measure(), layout(), draw()方法, 下面分别分析其作用:

measure 递归: 

    1、判断是否需要重新计算大小

    2、调用onMeasure, 如果是ViewGroup类型， 则遍历所有子控件的measure方法，计算出子控件大小,

    3、使用setMeasuredDimension(int, int)确定自身计算的大小

    由于第二步会调用子控件的measure方法, 在子控件的大小计算当中也会经历这三步动作， 直到整个树遍历完, 此时此控件及其子控件的大小都确定了, 在这里强调控件的大小是由父控件和自身决定的，当然取决在于父控件， 控件自身只提供参考值， 这是因为控件的measure方法是由父控件调用的, 而父控件的控件有限，可能不完全按照你的申请要求给出, 这里留待以后讨论关于布局参数问题。

在android.view.View对于measure流程已经实现了一部分:

public final void measure(int widthMeasureSpec, int heightMeasureSpec) {
     ...
　　　// measure ourselves, this should set the measured dimension flag back
     onMeasure(widthMeasureSpec, heightMeasureSpec);
     ...
}

对于android.view.View来说它不需要遍历子控件了, 下面贴出一个我实现的一个onMeasure ：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //获取mode和size, 方便给children分配空间
        final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        final int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        final int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        //TODO 这里可以检查你的大小, 或者mode

        final int count = getChildCount();
        for(int i = 0; i < count; i++) {
            final View view = getChildAt(i);

            //这里只是举一个例子, 这里给child多少大小根据实际来定
            int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(100, MeasureSpec.EXACTLY);
            int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(100, MeasureSpec.EXACTLY);

            view.measure(childWidthMeasureSpec, childHeightMeasureSpec);
        }

        // 得出自己计算出的大小, 这里也是一个例子, 可以根据所有子控件占多大空间
        // 给出, 这里也根据要实现的效果看, 这部分建议看LinearLayout等容器的源码
        setMeasuredDimension(widthSize, heightSize);
    }

 

layout 递归: 

    1、设置自身相对父控件的位置并判断是否需要重新布局，使用setFrame(left, top, right, bottom);

    2、调用onLayout()布局子控件

在android.view.View也实现了此流程的一部分:

public void layout(int l, int t, int r, int b) {
    ...
    onLayout(changed, l, t, r, b);
    ...
}

下面我也简单的实现了第二步:

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        final int count = getChildCount();
        int widthSpan = 0;
        int heightSpan = 0;
        for(int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            child.layout(widthSpan, heightSpan, child.getMeasuredWidth(), child.getMeasuredHeight());
            widthSpan += child.getMeasuredWidth();
            heightSpan += child.getMeasuredHeight();
        }
    }

这是一个简陋的Grid布局。 

draw递归: 

    1、绘制背景 

    2、调用onDraw()绘制控件内容

    3、调用dispatchDraw()绘制所有的子控件

    4、绘制渐变边界等

    5、绘制装饰品, 比如滑动条等

draw递归在android.view.View已经有完整的实现, 自定义ViewGroup时一般只需要重写onDraw实现如何绘制内容就够了, 当然所有的流程都可以重写, 如果需要的话。下面看一下android.view.View里面draw递归的原型：

public void draw(Canvas canvas) {
        // Step 1, draw the background, if needed
        ...// Step 2, draw the content
        onDraw(canvas);

        // Step 3, draw the children
        dispatchDraw(canvas);

        // Step 4, draw the fade effect and restore layers
        ...
　　　　
　　　　 //Step 5, draw decorations
        onDrawScrollBars(canvas);
}

     上面三个递归, 解决了一颗控件树的显示问题, 现在大家会很奇怪, 到底是谁发起这个递归, 即最上层的父控件到底是谁, 查看源码可以看到, 在android.view下面有一个ViewRoot(更新后变成ViewRootImpl)隐藏类， 在其performTraversals()方法中发起这三个递归，这个类没有研究太深入, 以后补上。在performTraversals()中大概的流程是：

private void performTraversals() {
     final View host = mView;
     ...
     host.measure();
     ...
     host.layout();
     ...
     host.draw();
     ...
}

这样就实现了一个大的递归, 把完整的界面给绘制出来了。下面我自己写一个实现ViewGroup的Demo：

package com.ui.viewgroup;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

public class ViewGroupImpl extends ViewGroup {

    public class LayoutParams extends ViewGroup.LayoutParams {
        public int left = 0;
        public int top = 0;

        public LayoutParams(int width, int height) {
            super(width, height);
        }

        public LayoutParams(int left, int top, int width, int height) {
            super(width, height);
            this.left = left;
            this.top = top;
        }
    }

    public ViewGroupImpl(Context context) {
        this(context, null);
    }

    public ViewGroupImpl(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void addInScreen(View child, int left, int top, int width, int height) {
        addView(child, new LayoutParams(left, top, width, height));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        final int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        final int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        // 检测控件大小是否符合要求
        if(widthMode == MeasureSpec.UNSPECIFIED || heightMode == MeasureSpec.UNSPECIFIED) {
            throw new IllegalArgumentException("不合法的MeasureSpec mode");
        }

        // 计算子控件大小
        final int count = getChildCount();
        for(int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            final LayoutParams lp = (LayoutParams)child.getLayoutParams();

            //确定大小的
            final int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(lp.width,
                    MeasureSpec.EXACTLY);
            final int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(lp.height,
                    MeasureSpec.EXACTLY);

            child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
        }

        // 设置计算的控件大小
        setMeasuredDimension(widthSize, heightSize);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        final int count = getChildCount();
        LayoutParams lp;
        for(int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            lp = (LayoutParams)child.getLayoutParams();
            //相对父控件坐标
            child.layout(lp.left, lp.top, lp.left + lp.width, lp.top + lp.width);
        }
    }

    // draw递归 不需要我们接管,

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
    }
}

Activity:

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ViewGroupImpl viewGroupImpl = new ViewGroupImpl(this);
        setContentView(viewGroupImpl, new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT));

        // 因为此时无法获取viewGroupImpl的实际大小, 所以只好假设一个大小
        final int parentWidth = 400;
        final int parentHeight = 700;

        final int maxWidthSize = parentWidth / 4;
        final int maxHeightSize = parentHeight / 4;

        Random random = new Random();

        for(int i = 0; i < 50; i++) {
            int left = random.nextInt(parentWidth) - 10;
            int top = random.nextInt(parentHeight) - 10;

            int width = random.nextInt(maxWidthSize) + 10;
            int height = random.nextInt(maxHeightSize) + 10;

            ImageView child = new ImageView(this);
            child.setImageResource(R.drawable.ic_launcher);
            viewGroupImpl.addInScreen(child, left, top, width, height);
        }

下面是效果图: