View的测量和绘制

我们日常与Activity打交道是最多的,一般每个Activity都会调用setContentView()设置layout。
每个layout就是一个View或者ViewGroup(包含许多子View),Android中界面的架构图大致如下:

image.png

每个Activity包含一个Window对象,而Window中的内容由DecorViewf负责呈现
我们在屏幕中一般能看到TitleView-->即标题栏,ContentView-->一个ID为content的FrameLayout(我们的布局文件就设置在这里)

View的测量

每个View是通过onMeasure()方法进行测量自身大小,测量完毕后,系统就知道要画多大的空间

测量模式

Android系统有三种测量模式
EXACTLY

调用时机:xml文件中设置width,height为具体数值时,或match-parent时

AT_MOST

调用时机:xml布局文件中指定View宽高为wrap-content时

UNSPECIFIED

调用时机:在ScrollView或者不限制大小的View中调用

Tips:MeasureSpec类中的getMode(),getSize()能告知我们测量模式和测量的大小

MeasureSpec从何而来
根据guolin大大的文章,MeasureSpec是由父View测量后生成该类,然后传递至子View
而父View的MeasureSpec是通过RootViewImpl(View和Window沟通的协议类)这个类中的performTraversals()进行获取的(这个方法很长啊...)

    if (baseSize != 0 && desiredWindowWidth > baseSize) {
                //其他代码
                childWidthMeasureSpec = getRootMeasureSpec(baseSize, lp.width);
                childHeightMeasureSpec = getRootMeasureSpec(desiredWindowHeight, lp.height);
                performMeasure(childWidthMeasureSpec, childHeightMeasureSpec);
                //其他代码
    }

最终来到了getRootMeasureSpec方法,然后根据宽高(一般都是match_parent)的具体数值再用makeMeasureSpec来配置MeasureSpec
至此,Spec成功配置,随后作为onMeasure的参数传递下去

private static int getRootMeasureSpec(int windowSize, int rootDimension) {
        int measureSpec;
        switch (rootDimension) {

        case ViewGroup.LayoutParams.MATCH_PARENT:
            // Window can't resize. Force root view to be windowSize.
            measureSpec = MeasureSpec.makeMeasureSpec(windowSize, MeasureSpec.EXACTLY);
            break;
        case ViewGroup.LayoutParams.WRAP_CONTENT:
            // Window can resize. Set max size for root view.
            measureSpec = MeasureSpec.makeMeasureSpec(windowSize, MeasureSpec.AT_MOST);
            break;
        default:
            // Window wants to be an exact size. Force root view to be that size.
            measureSpec = MeasureSpec.makeMeasureSpec(rootDimension, MeasureSpec.EXACTLY);
            break;
        }
        return measureSpec;
    }

View如何测量

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

View在onMeasure中调用setMeasuredDimension()设置宽高
而宽高又是通过getDefaultSize()获取的

  public static int getDefaultSize(int size, int measureSpec) {
        int result = size;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        switch (specMode) {
        case MeasureSpec.UNSPECIFIED:
            result = size;
            break;
        case MeasureSpec.AT_MOST:
        case MeasureSpec.EXACTLY:
            result = specSize;
            break;
        }
        return result;
    }

getDefalutSize中有两个参数,前者是通过getSuggestedMinimumWidth()或Height()获得的推荐大小
可以看到,它返回的result在AT_MOST和EXACTLY模式下是一致的,都是从MeasureSpec获取的
这样导致了自定义View未重写该方法就直接使用wrap_content模式,其效果跟match-parent一致

为什么效果是这样呢?
上述代码中getDefaultSize的第一个参数size是通过getSuggestedMinimumHeight()获取的

  protected int getSuggestedMinimumHeight() {
        return (mBackground == null) ? mMinHeight : max(mMinHeight, mBackground.getMinimumHeight());

    }

这里以高为例,可以看出它是根据有无背景来设置大小的,其中mMinHeight是在xml文件中进行指定的,没有则默认为0

    //未设置背景
    <org.fourstars.firstcode.lesson9.CustomView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    //设置背景为图标
    <!--android:background="@mipmap/ic_launcher"-->

这里我们在CustomView中进行打印宽高

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        Log.d(TAG, "suggest width:" + getSuggestedMinimumWidth() + "\t suggest height:" + getSuggestedMinimumHeight());
        Log.d(TAG, "spec width:" + MeasureSpec.getSize(widthMeasureSpec) + "\t spec height:" + MeasureSpec.getSize(heightMeasureSpec));
//        setMeasuredDimension(getViewSize(widthMeasureSpec,getSuggestedMinimumWidth()),getViewSize(heightMeasureSpec,getSuggestedMinimumHeight()));
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

未设置背景


image.png

设置背景后


image.png

image.png

可以看到背景的有无是直接影响到getSuggestedMinimumWidth()的返回值的
而没有重写onMeasure的测量方式的话,不管你有无背景,wrap_content下默认是全屏的

private int getViewSize(int spec, int suggestSize) {
        int result = 0;
        int specMode = MeasureSpec.getMode(spec);
        int specSize = MeasureSpec.getSize(spec);

        switch (specMode) {
            case MeasureSpec.EXACTLY:
                result = specSize;
                break;
            case MeasureSpec.AT_MOST:
                result = Math.max(suggestSize, 200);
                break;
            case MeasureSpec.UNSPECIFIED:
                result = suggestSize;
                break;
            default:
                break;
        }
        Log.d(TAG, "getViewSize: " + result);

        return result;
    }

对此我们重写自己的测量方式,在AT_MOST模式下View的宽高取getSuggestedMinimumWidth()和200(预设的最小值)中取最大值,就不会出现View充满父View的空间的情况了

Tips:一个界面往往不止一个View,这些View组成了ViewGroup
ViewGroup测量的时候,会根据View的状态(可见测量,隐藏则不量)让子Vie测出自己的宽高,最后才得出ViewGroup自己的宽高

View的layout

查看源码发现,View中的onLayout()是空的

    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    }

由于layout过程是决定了View在视图中的位置的,单个View无需考虑,而是应该由ViewGroup来进行布局,而ViewGroup中的onLayout竟然也是空的,不同的是他是抽象的

@Override
    protected abstract void onLayout(boolean changed,
            int l, int t, int r, int b);
image.png

View的onDraw

对于ViewGroup来说,它是不需要进行Draw的,只要其子View绘制好了,ViewGroup就可以坐享其成
ViewGroup通过dispatchDraw()来告知子View进行绘制
然而,View中的onDraw也是空的

这里我们以TextView中的onDraw为例,来进行绘制

image.png
    @Override
    protected void onDraw(Canvas canvas) {
        //在父类方法调用前实现逻辑
        super.onDraw(canvas);//这里TextView进行绘制文本等内容 
    }

对于自定义View而言,要想在xml文件中使用该控件,就必须实现两个参数的构造函数

    public SimpleTextView(Context context) {
        super(context);
    }

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

Cavas中的 save和 restore操作

    @Override
    protected void onDraw(Canvas canvas) {
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        //画一个绿色实心矩形背景,mPaint在构造函数中初始化
        canvas.drawRect(0,0,width,height,mPaint);
        //保存坐标轴状态
        canvas.save();

        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(8);
        //画一条起点为(0,20),终点为(width,20)的线
        canvas.drawLine(0,20,width,20,mPaint);
        //坐标轴以(width/2,height/2)为轴心进行顺时针旋转90°
        canvas.rotate(90,width/2,height/2);
        //恢复坐标轴状态,即逆时针旋转回来
        canvas.restore();
        //再次画线
        canvas.drawLine(0,40,height-40,40,mPaint);

        super.onDraw(canvas);
    }
image.png

可以看到两条线是跟我们写的逻辑一样,是平行的
原因是调用了canvas.restore()恢复了坐标轴的状态

当我们不调用restore()时,效果如图

image.png

可以看出第二条线时旋转90°后进行绘制的,此时是按照下面的坐标轴进行绘制第二条线的


image.png

Tips:save和restore是配对使用的,restore不能多于save的次数,不然会报错

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,186评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,858评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,620评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,888评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,009评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,149评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,204评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,956评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,385评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,698评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,863评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,544评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,185评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,899评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,141评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,684评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,750评论 2 351

推荐阅读更多精彩内容