Android View作图及实践_Android

Android View绘制及实践

概述

整个View树的绘图流程是在ViewRoot.java类的performTraversals()函数展开的，该函数做的执行过程可简单概况为:
- 判断是否需要重新计算视图大小(measure)
- 判断是否重新需要安置视图的位置(layout)
- 判断是否需要重绘(draw)
其整个流程图如下：
这里写图片描述
图片来自:Android 开源项目源码解析公共技术点中的 View 绘制流程

在Android中View的整个生命周期，调用invalidate和requestLayout会触发一系列的方法，如图所示
这里写图片描述

图片来自:Android 开源项目源码解析公共技术点中的 View 绘制流程

当开发者调用requestLayout方法时，只会触发measure和layout过程
当开发者调用invalidate方法时，会触发draw过程

Measure

为整个View树计算实际大小，每个View的实际大小由父控件和其本身共同决定
measure方法调用onMeasure方法，onMeasure方法里通过setMeasuredDimension（注意padding和margin）设置View的大小
ViewGroup子类需要重写onMeasure去遍历测量其子View的大小
measure方法是final类型，不能被重写，需要重写的是onMeasure方法
整个测量过程就是对View树的递归
一个View一旦测量完成，即可通过getMeasuredWidth() 和 getMeasuredHeight()获得其宽度和高度
自定义的ViewGroup只需实现measure和layout过程

MeasureSpec

一个MeasureSpec对象由size和mode组成，MeasureSpec类通过将其封装在一个int值中以减少对象的分配。其模式有以下三种，都为int型
- UNSPECIFIED
父视图不对子视图产生任何约束，如ListView，ScrollView
- EXACTLY
父视图为子视图指定一个确切的尺寸，子视图以这个确切的值作为大小，比如match_parent或具体值20dp
- AT_MOST
父视图为子视图指定一个最大尺寸，子视图必须在这个尺寸大小内，比如wrap_content

Layout

确定子视图在相当于父视图的位置(注意margin和padding)
ViewGroup的onLayout是抽象的，其子类必须实现
View的onLayout是空实现
此时测量已完成，可通过getMeasuredWidth() 和 getMeasuredHeight()获得其宽度和高度
不要在onDraw和onLayout中创建对象，因为这两个方法会被频繁调用
到这里看一张总结性的图

图片来自:Android 开源项目源码解析公共技术点中的 View 绘制流程

LayoutParams

它是一个ViewGroup的内部类
ViewGroup 的子类有其对应的 ViewGroup.LayoutParams 的子类。比如 RelativeLayout 拥有的 ViewGroup.LayoutParams 的子类 RelativeLayoutParams
getLayoutParams() 方法得到是其所在父视图类型的 LayoutParams，比如 View 的父控件为 RelativeLayout，那么得到的 LayoutParams 类型为 RelativeLayoutParams
有时我们需要使用 view.getLayoutParams() 方法获取一个视图 LayoutParams ，然后进行强转，但由于不知道其具体类型，可能会导致强转错误
自定义View的margin等属性在LayoutParams 指定

Draw

自定义View绘制过程需要重写onDraw方法
自定义ViewGroup在dispatchDraw中发起对子视图的绘制，不应该对该函数重写
onDraw中调用相关绘制函数进行绘制

invalidate

请求重绘View
视图大小没有变化就不会调用layout过程
只重新绘制那些调用了invalidate()方法的 View
如果要在UI线程中重绘请使用postInvalidate()方法

requestLayout

当布局变化的时候，比如方向变化，尺寸的变化，会调用该方法
它会触发measure和layout过程，但不会进行 draw过程

最佳实践

以上都是理论知识，也差不多是对多篇文章的总结性内容。下面开始实现一个自定义View和ViewGroup

自定义View

其实自定义View的大部分逻辑都是在onDraw上，onLayout基本上无需重新，onMeasure需要实现测量逻辑。
下面是一个简单的毫无任何作用的自定义View，其唯一目的就是演示onDraw和onMeasure

package cn.edu.zafu.sourcedemo;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.util.AttributeSet;import android.view.View;/** * Created by lizhangqu on 2015/5/3. */public class CustomView extends View {    private Paint paint=null;    private Rect rect=null;    private  int bgColor=Color.parseColor("#673AB7");//写死背景色，实际是自定义属性    private int minContentWidth=50;//最小内容宽度，不包含内边距    private int minContentHeight=50;//最小内容高度，不包含内边距    public CustomView(Context context) {        this(context, null);    }    public CustomView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    /*初始化*/    private void init() {        paint=new Paint();        paint.setAntiAlias(true);        paint.setDither(true);        paint.setColor(bgColor);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        //其实所有逻辑可以简单调用resolveSize函数进行测量，这里自己实现一遍，理清思路        //获得宽度和高度的mode和size        int widthMode = MeasureSpec.getMode(widthMeasureSpec);        int heightMode = MeasureSpec.getMode(heightMeasureSpec);        int widthSize = MeasureSpec.getSize(widthMeasureSpec);        int heightSize = MeasureSpec.getSize(heightMeasureSpec);        //最终的宽高存在这两个变量中        int width;        int height;        if (widthMode == MeasureSpec.EXACTLY) {            // 父视图指定了大小            width = widthSize;        } else {            //父视图指定必须在这个大小内            //注意内边距，再加上自身需要的宽度            width=getPaddingLeft()+getPaddingRight()+minContentWidth;            if (widthMode == MeasureSpec.AT_MOST) {                //如果是AT_MOST，必须在父控件指定的范围内，取width和widthSize中小的那个                width = Math.min(width, widthSize);            }        }        if (heightMode == MeasureSpec.EXACTLY) {            // 父视图指定了大小            height = widthSize;        } else {            //父视图指定必须在这个大小内            //注意内边距，再加上自身需要的高度            height =getPaddingTop()+getPaddingBottom()+minContentHeight;            if (heightMode == MeasureSpec.AT_MOST) {                //如果是AT_MOST，必须在父控件指定的范围内，取width和widthSize中小的那个                height = Math.min(height, heightSize);            }        }        setMeasuredDimension(width, height);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        rect=new Rect(getPaddingLeft(),getPaddingTop(),getMeasuredWidth()-getPaddingRight(),getMeasuredHeight()-getPaddingBottom());//绘制的时候注意内边距        canvas.drawRect(rect,paint);    }}

自定义Viewgroup

实现一个纵向排布子View的ViewGroup，效果如图所示，见代码，解释看注释
自定义Viewgroup

package cn.edu.zafu.sourcedemo;import android.content.Context;import android.util.AttributeSet;import android.view.View;import android.view.ViewGroup;/** * Created by lizhangqu on 2015/5/3. */public class CustomViewGroup extends ViewGroup {    public CustomViewGroup(Context context) {        this(context, null);    }    public CustomViewGroup(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CustomViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    //重写onLayout抽象方法    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        final int count = getChildCount();        MyLayoutParams lp = null;        for (int i = 0; i < count; i++) {            View child = getChildAt(i);            //获得当前View            lp = (MyLayoutParams) child.getLayoutParams();            //获得LayoutParams，强制转换为MyLayoutParams            child.layout(lp.x, lp.y, lp.x + child.getMeasuredWidth(), lp.y                    + child.getMeasuredHeight());            //调用当前View的layout方法进行布局        }    }    //重写onMeasure实现测量逻辑    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        int width = 0;        int lastWidth = 0;        int height = getPaddingTop();        final int count = getChildCount();        //获得子View个数        for (int i = 0; i < count; i++) {            View child = getChildAt(i);            //获得当前子View            measureChild(child, widthMeasureSpec, heightMeasureSpec);            //测量子View，必须调用            MyLayoutParams lp = (MyLayoutParams) child.getLayoutParams();            //获得LayoutParams            width = Math.max(width, child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);            //比较当前View与之前的View宽度，取大者，注意这个宽度包含了margin            lp.x = getPaddingLeft() + lp.leftMargin;            //设置当前View的x左边            lp.y = height + lp.topMargin;            //设置当前View的y左边            height = height + lp.topMargin + child.getMeasuredHeight() + lp.bottomMargin;            //累加高度        }        width=width+getPaddingLeft() + getPaddingRight();        //加上左右内边距        height = height + getPaddingBottom();        //加上下边界        setMeasuredDimension(resolveSize(width, widthMeasureSpec), resolveSize(height, heightMeasureSpec));        //设置宽高，resolveSize方法会根据尺寸大小和MeasureSpec计算最佳大小    }    //重写生成LayoutParams的三个方法    @Override    public MyLayoutParams generateLayoutParams(AttributeSet attrs) {        return new MyLayoutParams(getContext(), attrs);    }    //重写生成LayoutParams的三个方法    @Override    protected MyLayoutParams generateDefaultLayoutParams() {        return new MyLayoutParams(LayoutParams.WRAP_CONTENT,                LayoutParams.WRAP_CONTENT);    }    //重写生成LayoutParams的三个方法    @Override    protected MyLayoutParams generateLayoutParams(LayoutParams p) {        return new MyLayoutParams(p.width, p.height);    }    //继承MarginLayoutParams实现自己的LayoutParams,x,y代表控件的左边和上边左边    public static class MyLayoutParams extends MarginLayoutParams {        public int x;//左        public int y;//上        public MyLayoutParams(Context context, AttributeSet attrs) {            super(context, attrs);        }        public MyLayoutParams(int w, int h) {            super(w, h);        }    }}

布局界面如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity">    <cn.edu.zafu.sourcedemo.CustomViewGroup        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="50dp"        android:padding="20dp"        android:background="#ffff00"        >        <Button            android:layout_width="20dp"            android:layout_height="20dp"            android:layout_marginTop="5dp"            android:layout_marginBottom="5dp"            android:layout_marginLeft="5dp"            android:layout_marginRight="5dp"            android:background="#ff0000"            />        <Button            android:layout_width="24dp"            android:layout_height="15dp"            android:background="#00ff00"            />        <Button            android:layout_width="10dp"            android:layout_height="30dp"            android:background="#0000ff"            />    </cn.edu.zafu.sourcedemo.CustomViewGroup></LinearLayout>

参考文章

Android 开源项目源码解析公共技术点中的 View 绘制流程前面理论部分基本从这篇文章中提取来

Android View作图及实践

概述