VIew的绘制流程

Android的UI管理系统层级关系

image.png

如上图所示,这就是Android的UI管理系统的层级关系。当一个应用启动的时候,会启动一个主Activity,然后Activity会创建出一个窗口系统PhoneWindow(每个Activity都会创建,是Android系统中最基本的窗口系统,也是Activity与View进行交互的接口)。每个PhoneWindowd都有一个DecorView,它是每个Activity的根布局,即为每个界面的顶级View,本质上是一个FramLayout。

View的绘制流程:

View的绘制过程是从ViewRoot的performTraversals方法开始的,在其内部依次调用View的performMeasure,performLayout,performDraw三个方法。这三个方法分别完成顶级View的measure,layout,draw过程。其中,performMeasure中会调用measure方法,而在measure方法中又会调用onMeausre()方法,然后在onMeaure方法中会对所有的子元素进行measure过程,这时measure流程就从父容器传递到了子元素中,子元素会继续重复父容器的measure过程,如此反复即完成了整个View树结构的遍历,最终 完成View的测量过程。

同理,performLayout和performDraw方法的传递流程和performMeasure类似,但不同的是,performDraw的传递是在draw方法中通过dispatchDraw方法来下发的,不过本质上原理还是一样的。

流程图:

image.png

View绘制三部曲

1. onMeasure()

测量单一 view 大小的入口方法是 View 类的measure方法,在该方法中会调用 View 类的onMeasure()方法:

image.png

onMeasure的流程:

image.png

getDefaultSize()的逻辑:


image.png

setMeasuredDimension()的作用: 存储测量后的大小(宽/高)

测量的三种模式:

EXACTLY

精确值模式,即当我们在布局文件中为View指定了具体的大小

例如:android:layout_width="100dp",或者当我们将View的大小指定为充满父布局,即为match_parent时,此时,该View的测量模式即为EXACTLY模式。

(View的默认测量模式为EXACTLY模式)

AT_MOST

最大值模式,此时View的尺寸不得大于父控件允许的最大尺寸即可。即对应我们给View的宽或高指定为wrap_content时。

UPSPECIFIED

不指定测量模式,即父视图没有限制其大小,子View可以是任何尺寸。该模式一般用于系统内部,平时的Android开发基本用不到。

需要注意的是,在setMeasuredDimension()方法调用之后,我们才能使用getMeasuredWidth()和getMeasuredHeight()来获取视图测量出的宽高,以此之前调用这两个方法得到的值都会是0。一般情况下我们都在onLayout方法中调用两方法来获取测量的宽和高。

2.View的位置确定——onLayout()

image.png

left: View左边界距离父容器的左边界的距离

top: View上边界距离父容器上边界的距离

right: View右边界距离父容器左边界的距离

bottom: View下边界距离父容器上边界的距离

image.png

在layout方法中:

image.png

在layout方法中,首先会通过setFrame方法对View的四个顶点的值进行赋值,即mLeft, mRight, mTop, mBottom。当各个顶点的坐标确定以后,View在ViewGroup中的位置也就确定了。接着就要调用onLayout方法用来确定子元素的位置了。而对于View的onLayout方法,这里要说的是,它是一个空方法,至于为什么,估计大家应该也能想的通,因为onLayouta方法就是为了确定子元素在ViewGroup中的位置,这个功能方然要有ViewGroup去实现了啊。而我们点击进入ViewGroup的onLayout方法,如下:

image.png

我们可以看到他是一个抽象方法:

我们就可以通过getWidth和getHeight方法来获取View的宽和高了。

注意:

getMeasuredWidth和getWidth的区别

①getMeasuredWidth方法获得的值是setMeasuredDimension方法设置的值

它的值在measure方法运行后就会确定

②getWidth方法获得是layout方法中传递的四个参数中的mRight-mLeft

它的值是在layout方法运行后确定的

如果有时我们刻意去重写layout方法,并修改方法中的参数,那么就会造成二者的值不相同。

③一般情况下在onLayout方法中使用getMeasuredWidth方法

而在除onLayout方法之外的地方用getWidth方法。

3.View的绘制——onDraw()

完成了测量和位置确立,那就差把View绘制出来以让我们看到了。这是就要开始进入我们的绘制流程了。在调用了layout方法后,接着ViewRoot会创建一个Canvas对象,接着调用View的draw方法来执行具体的绘制流程。

1.第一步: 绘制背景

image.png

这一步先先判断是否设置了背景,然后再进行背景的绘制。而这个背景其实就是我们在XML布局中设置的backgroud属性,可以使图片或者是颜色。

之后我们可以看到这个注解:skip step 2 & 5 if possible (common case)

意思就是:如果可能,跳过第2步和第5步(常见情况)

跳过第二步

2.第三步:绘制内容

这时会调用view的onDraw方法,来进行具体的绘制。而View的onDraw方法点进去会发现其实是一个空方法,它需要具体的子类自己去实现。到底是画圆还是画方那就看具体的View了。

3.第四步:对所有的子View进行绘制(dispatchDraw)

这一步是调用dispatchDraw方法对其包含的所有的子View进行绘制。通过调用drawChild方法来调用View的draw方法来绘制子View。而如果是单纯的一个子View来说,其dispatchDraw方法是一个空方法。

跳过第五步

4.以上都执行完后就会进入到第六步,也是最后一步,这一步的作用是对视图的滚动条进行绘制。那么你可能会奇怪,当前的视图又不一定是ListView或者ScrollView,为什么要绘制滚动条呢?其实不管是Button也好,TextView也好,任何一个视图都是有滚动条的,只是一般情况下我们都没有让它显示出来而已。

通过以上流程分析,相信大家已经知道,View是不会帮我们绘制内容部分的,因此需要每个视图根据想要展示的内容来自行绘制。如果你去观察TextView、ImageView等类的源码,你会发现它们都有重写onDraw()这个方法,并且在里面执行了相当不少的绘制逻辑。绘制的方式主要是借助Canvas这个类,它会作为参数传入到onDraw()方法中,供给每个视图使用。

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