[译]Android view 测量布局和绘制的流程
创造优秀的用户体验是我们开发者的主要目标之一.为此, 我们首先要了解系统是如何工作的, 这样我们才可以更好的与系统配合, 从它的优点中获益, 规避它的缺陷.
这次我们主要关注Measure/Layout(测量和布局)的阶段, 这些阶段决定了视图的大小和位置, 以便于我们能够绘制它.
Step 1: Measure 测量
目标: 确定是图的大小
视图的大小包含其子视图的大小, 且必须符合其父视图的要求
视图的大小由2个方面决定:
- 测量宽度与测量高度 - 视图在其父视图中想要占据多大空间.这是此阶段我们需要的大小.
- 宽度与高度(也就是绘制高度与绘制宽度) - 在绘制和布局阶段, 视图在屏幕上视图的大小. 这个大小会在step2中算出.
How does it work?
- 自顶向下递归的遍历view树.
- 每个视图将规格传递给子视图.
如何实现?父视图通过MeasureSpec
类的三种选项之一来决定子视图的宽高:
UNSPECIFIED
- 未指定, 子视图可以获得任意大小EXACTLY
- 指定, 子视图应该有指定大小AT_MOST
- 最大, 子视图最大可达到某个值
每个视图的宽高设置由ViewGroup.LayoutParams
的3种选项决定:
- 一个明确的数字
MATCH_PARENT
子视图想要和父视图一样大WRAP_CONTENT
子视图想要和自身的内容一样大
测量过程在
onMeasure(int widthMeasureSpec, int heightMeasureSpec)
函数中完成当这个函数返回时, 每个视图都必须有
measuredWidth
和measuredHeight
(可由调用super()
完成), 否则会抛出IllegalStateException
.
Notice that this process sometimes a negotiation between a view and its children, and so measure() may be called more than once. More on that on a later post.
- 注意这个过程有时需要视图和其子视图互相协商, 因此
measure()
方法可能会被调用不止一次.
Since the traversal is top down, and each parent tells its children the requirements, we end up with our goal achieved:
Each view’s measured size includes its children size, and fit its parent requirements.
因为遍历是自顶向下的, 并且没个父视图告诉子视图其需求, 我们最终的目标是:
每个视图的计算大小包含了子视图的大小, 并符合其父视图的要求
Step 2: Layout 布局
目标: 卫士图及其子视图设定位置和大小(绘制宽度和绘制高度)
- 与step1类似: 自顶向下递归遍历视图树.
- 每个父视图通过上一个计算的大小定位其所有子视图的位置.
- 定位由
onLayout(boolean changed, int left, int top, int right, int bottom)
方法完成, 其中left, top, right, bottom
是相对于其父视图的. - 当重写
onLayout()
方法时, 必须调用每个子视图的layout()
方法.
Step 3: Draw 绘制
- 当大小和位置都确定之后, 视图可以据此绘制自己.
- 在
onDraw(Canvas)
方法中Canvas
对象生成(或者是更新)一系列OpenGl-ES命令(displayList)发送给GPU.
这就是绘制的过程! 但是当我们改变了视图的属性时发生了什么呢? 由动画, 用户输入, 或者我们决定改变他们的时候.
When things change… 当发生改变时
当视图属性改变是, 视图会通知系统. 取决于改变的属性, 视图调用下列之一:
invalidate
- 此时只会调用视图的onDraw()
requestLayout()
- 会传递到根视图, 然后调用整个过程(测量->布局->绘制)
对于需要布局的情况有一个经典的小例子: 我们在一个
RelativeLayout
中有两个关系相对的视图. 如果其中一个改变了大小 - 一定会导致另一个重新定位, 也可能导致父视图改变大小.所以我们改变了一个视图的属性, 导致了整个布局都过期了.
这种情况提醒我们高效的布局是很重要的, 这样布局才能流程的执行并且不会导致跳帧.
[译]Android view 测量布局和绘制的流程的更多相关文章
- Android View 测量流程(Measure)完全解析
前言 上一篇文章,笔者主要讲述了DecorView以及ViewRootImpl相关的作用,这里回顾一下上一章所说的内容:DecorView是视图的顶级View,我们添加的布局文件是它的一个子布局,而V ...
- android View页面布局总结 最全总结(转)
下面是我在工作中总结的内容,希望对大家有帮助. 一.布局 View的几种布局显示方式有下面几种:线性布局(LinearLayout).相对布局(RelativeLayout).表格布局(TableLa ...
- Android View之布局加载流程
1.引言 最近准备重新学习下Android,加深理解,快速形成自己的知识结构体系.最先学习的就算View部分,从自定义View到Activty层次结构,到layout加载过程.等等都会看一遍,在此记录 ...
- android view:布局优化
今天在图书馆看了一个android性能优化. 关于布局优化有几个小技巧: 1.尽量减少布局的嵌套,而使用相对布局,这样的话会减少布局对象的创建,并且可以再事件传递的时候减少传递嵌套. 2.使用incl ...
- Android View 绘制流程(Draw) 完全解析
前言 前几篇文章,笔者分别讲述了DecorView,measure,layout流程等,接下来将详细分析三大工作流程的最后一个流程——绘制流程.测量流程决定了View的大小,布局流程决定了View的位 ...
- Android View 布局流程(Layout)完全解析
前言 上一篇文章,笔者详细讲述了View三大工作流程的第一个,Measure流程,如果对测量流程还不熟悉的读者可以参考一下上一篇文章.测量流程主要是对View树进行测量,获取每一个View的测量宽高, ...
- Android面试收集录12 View测量、布局及绘制原理
一.View绘制的流程框架 View的绘制是从上往下一层层迭代下来的.DecorView-->ViewGroup(--->ViewGroup)-->View ,按照这个流程从上往下, ...
- 简单研究Android View绘制三 布局过程
2015-07-28 17:29:19 这一篇主要看看布局过程 一.布局过程肯定要不可避免的涉及到layout()和onLayout()方法,这两个方法都是定义在View.java中,源码如下: /* ...
- Android view的测量及绘制
讲真,自我感觉,我的水平真的是渣的一匹,好多东西都只停留在知道和会用的阶段,也想去研究原理和底层的实现,可是一看到代码就懵逼了,然后就看不下去了, 说自己不着急都是骗人的,我自己都不信,前两天买了本& ...
随机推荐
- filebeat.yml(中文配置详解)
################### Filebeat Configuration Example ######################### ####################### ...
- http缓存(http caching)
通过使用缓存web网站和web应用的性能能够得到显著的提升.Web caches能够减小延迟和网络流量,从而缩短展示资源所花费的时间. 在http中控制缓存行为的首部字段是Cache-Control, ...
- caffe+GAN︱PPGN生成模型5则官方案例(caffe版)
一.效果与架构 PPGN 整合了对抗训练.cnn特征匹配.降噪自编码.Langevin采样:在NIPS2016得到了Ian Goodfellow的介绍. PPGN生成的图像同类差异化大,可根据指定生成 ...
- AFDX总线协议规范
AFDX总线协议规范 1.概述 2. AFDX简介 3.AFDX的在数据传输性能的改进 3.1 AFDX以太网帧格式 3.2 AFDX以太网冗余备份 3.3 虚拟连接 3.4 数据交换处理 4.航空计 ...
- 蜻蜓FM 涉嫌诈骗投资人和广告主源代码剖析
本文主要内容,引用自知乎的这篇文章:如何评价蜻蜓 FM 伪造用户活跃度等数据 感谢"左莫"."任正"等热心正义的网友--左莫,任正的最早的回答猜测已经被蜻蜓FM ...
- svnserve.conf: Option expected的问题解决方法
经常有新手配置基于svnserve的subversion服务器后,在客户端访问subversion版本库时出现这个错误:svnserve.conf:12: Option expected为什么会出现这 ...
- Ext Designer生成表格
1.生成表格代码 Ext.MyPanel=Ext.extend(Ext.Panel ,{ xtype:"panel", title:"我的面板", width: ...
- Netty未来展望
作为<Netty权威指南(第2版)>的结尾章节,和读者朋友们一起展望下Netty的未来. 1应用范围 随着大数据.互联网和云计算的发展,传统的垂直架构逐渐将被分布式.弹性伸缩的新架构替代. ...
- Caused by: java.net.SocketException: Software caused connection abort: socket write error
1.错误描述 [ERROR:]2015-05-06 10:54:18,967 [异常拦截] ClientAbortException: java.net.SocketException: Softwa ...
- JavaScript的几种常见的创建方式
1.通过Object构造函数或者对象字面量创建单个对象 使用字面量方法创建对象:var stut = {name: "张三"}; 使用内置构造函数创建对象:var stu = ne ...