EUI库 - 自动布局
| 自适应流式布局 |
width="100%"
top left right
horizontalCenter=0
|
| 失效验证机制 |
这些异步过程都封装好了,我们只需要关注那一对方法:
invalidateProperties() 和 commitProperties() ,前者标记属性失效,后者应用失效的属性 |
|
一个是测量验证
invalidateSize() 和 measure()一个是布局验证。
invalidateDisplayList() 和 updateDisplayList()这两组什么时候用呢
|
|
![]() |
|
| 如果你希望你自定义的组件像框架里的标准组件一样,能加入自动布局体系,就必须要同时复写measure()和updateDisplayList()这两个方法 | |
| Group把自己的measure()方法交给了layout.measure()去实现,updateDisplayList()交给了layout.updateDisplayList()去实现。也就是把具体的布局方式解耦了出来,成了独立的一个LayoutBase类。这样所有的容器都可以采用Group+LayoutBase的组合的方式,为自己设置任意的布局。 | |
| 解决异步问题 |
失效验证机制能够很好的确保自动布局的性能,但是却会带来新的异步问题,大部分情况下我们并不会感受到失效验证的异步存在,因为它总是在本帧屏幕刷新前验证失效列表的,只有小部分在验证失效过程中又产生了新失效的情况,才会延迟到下一帧去处理。这种情况会导致的结果通常就是在初始化面板时会闪一下。解决这个问题有好几种方案,可以一开始将面板添加到显示列表时设置visible为false,延迟一段时间后再显示它。我们这里再讨论另一种方案,提前处理失效验证:
还有一种使用情景,不过很少会遇到,就是我们给一个组件设置了自动布局属性,比如
2.调用组件父级容器的
validateNow() 方法,这里请务必注意是"父级容器"的validateNow()方法,不是自身的,因为组件的布局是由父级容器决定的。 |
| 自动布局调试 | includeInLayout 指定此组件是否包含在父容器的布局中 |
| explicitWidth,explicitHeight | 所以这两个属性的作用就是保存你显式设置的值 |
| )maxWidth,minWidth,maxHeight,minHeight | )maxWidth,minWidth,maxHeight,minHeight:最大和最小尺寸。这里要注意:它们同时影响测量和布局的结果。measure()方法执行完会对measuredWidth,measuredHeight赋值一次。然后交给UIComponent里的validteSize()方法,再次规范测量结果。这时候就根据这四个值来规范的。最终确定measuredWidth,measuredHeight的值。布局时同理。 |
| width height | 布局设置的值 > 显式设置的值 > 测量的值 |
| measuredWidth,measuredHeight |
每个组件measure()方法执行的最终结果就是对这两个属性赋值
它们只记录测量结果
|
| )preferredWidth,preferredHeight | 首选宽高,这两个值通常在measure()方法中被调用。只是个便捷属性,按照explicitWidth,explicitHeight > measuredWidth,measuredHeight的优先级返回值。布局类在measure()方法中,调用子项的这个属性,来获取子项的测量结果。累加到自身的测量结果上。注意这个值已经包含旋转和缩放的值,且返回值永远为正数。 |
| )layoutBoundsWidth,layoutBoundsHeight: | 布局宽高,这两个值通常在updateDisplayList()方法中被调用。也是个便捷属性。按照 布局设置的宽高 > explicitWidth,explicitHeight > measuredWidth,measuredHeight的优先级返回值。注意这个值已经包含旋转和缩放的值,且返回值永远为正数 |
| preferredX,preferredY,layoutBoundsX,layoutBoundsY | 这四个属性,通常情况下就是xy的值。但是当组件含有旋转缩放时。他们为组件旋转缩放后在父级容器里实际显示的起点。 |
| 调试技巧 |
(1)自身是否被显式设置了尺寸?查看explicitWidth,explicitHeight。如果显式设置了,设置的对吗?不对找到问题。没有显式设置就继续。
(2)测量的尺寸对不对?查看measuredWidth,measuredHeight。不对,继续。对,跳到(5)
(3)查看top,left,right,bottom,horizontalCenter,verticalCenter,percentWidth,percentHeight这些布局属性对不对。注意:只有BasicLayout下这些属性才全部有效。
(4)布局类对吗?查看layout属性。以上都查过了,找不出问题,继续按(5)和(6)在显示列表向上或向下开始找。
(5)向上查看父级以及父级的父级容器的相关属性,是否正确。是否是父级容器强制设置了我们的尺寸。
(6)查看子项以及子项的子项的测量尺寸。找到第一个开始不对的节点
|
EUI库 - 自动布局的更多相关文章
- EUI库 - 容器
eui.UILayer UILayer是Group的子类它只有一个功能,到放到场景上后,宽高永远和场景宽度一致 Group Group 是自动布局的容器基类.如果包含的子项内容太大需要滚动显示 ...
- EUI库 - 9 - 数据集合 - 列表
List 和DataGroup的区别 1 选中一项 会触发 eui.ItemEvent.ITEM_TAP 事件, 2 有选中项的概念,可以设置 List 里的默认选中项 selectedIn ...
- EUI库 - 9 - 数据集合 - 数组集合
ArrayCollection 当数组内的数据被修改了(增删改),组件能有效的获知 myCollection.addEventListener(eui.CollectionEvent.COLLE ...
- EUI库 - 9 - 数据集合 - 数据容器
DataGroup 设置一个数据源 自动创建内部所需的对象 来完成数据展示 还要设置单条数据的模板 叫ItemRenderer 继承关系 eui.List eui.ListBase e ...
- EUI库 - 皮肤
皮肤分离机制 皮肤分离机制对制作可复用的外观比较有优势 那对于只使用一次的皮肤呢?如果也拆分出两个文件,显然不太方便.这里我们针对单次使用的皮肤定制了内部类的功能 每个组件都有一个chi ...
- EUI库 - EXML
EXML是可以运行时加载解析的 <e:Skin class="skins.ButtonSkin" states="up,down,disabled&qu ...
- EUI库 - 概述
新特性 36k 访问EUI组件宽高时,也会跟原生显示对象的表现一致,立即能得到包含子项的宽高值 统一的显示列表 普通对象和eui对象都可用addChild来添加 一个逻辑组件只管 ...
- EUI库 - 10 - 使用自定义组件
步骤 1 在根节点,添加一个自定义的命名空间 2 可以设置skinName 自定义组件规范 1 不复用的不要用自定义组件 2 属性必须要有默认值(赋值为null也可以),因为TS编译器会把没有默 ...
- EUI库 - 快速入口之项目配置
egretProperties.json exmlRoot 指定exml文件存放根目录,该路径必须为相对路径,目录内只能有exml文件 themes 主题文件数组,配置所有主题文件路径,该 ...
随机推荐
- JavaScript之bind方法实现代码分析
我们来分析一下bind方法的实现代码,下图的bind方法的实现为MDN(开发者社区)中的代码. 由上图可得:bind方法实现了两个功能:绑定this和科里化.
- 「CF741D」Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths
传送门 Luogu 解题思路 考虑把22个字符状压下来,易知合法情况就是状态中之多有一个1,这个可以暴力一点判断23次. 然后后就是 dsu on the tree 了. 细节注意事项 咕咕咕 参考代 ...
- Redis散列表类型
散列类型(hash)的键值也是一种字典结构,其存储了字段(field)和字段值的映射,但字段值只能是字符串,不支持其他的数据类型. 一个散列类型键可以包含至多2^32 -1个字段. 命令 赋值 HSE ...
- js隐藏button
$("#plshbtn").attr("style","display:none;");
- Lesson 2 Spare that spider
How much of each year do spiders killing insects? Why, you may wonder, should spiders be our friends ...
- NO17 第二关考试: 返回上次目录和ls -lrt倒序看文件--删除7天前的日志--查看日志更新--记录行号
第二题:不用cd /ildboy命令如何回到上一次的目录: 假如当前目录是: [root@localhost oldboy]# pwd/oldboy现在因为需要进入到了/tmp目录下进行操作,执行的命 ...
- PAT (Advanced Level) 1128~1131:1128N皇后 1129 模拟推荐系统(set<Node>优化) 1130 中缀表达式
1128 N Queens Puzzle(20 分) 题意:N皇后问题.按列依次给定N个皇后的行号,问N个皇后是否能同时不存在行冲突.列冲突和主副对角线冲突. 分析: 1.根据题意一定不存在列冲突,所 ...
- 结题报告:luogu P2014
题目链接:P2014 选课 简单的树形\(dp\),借助\(dfs\)实现. 一般的树形\(dp\)数组是需要二维的,其中一维记录节点(编号或父/子节点的状态(有时三维)),另一维记录权值或计数. 重 ...
- uboot的环境变量
https://www.cnblogs.com/biaohc/p/6398515.html uboot 环境变量实现原理: 首先我们先要搞清楚uboot中环境变量的作用,uboot中环境变量的作用就是 ...
- 01.swoole学习笔记--TCP服务器
1.安装swoole扩展 2.网络调试助手进行调试 <?php //创建服务器 $host='192.168.10.31'; $port=; //$model='SWOOLE_PROCESS'; ...
