导图社区 控件知识梳理
控件知识梳理，一张图带你完全了解相关内容，通过思维导图帮你提高效率，赶紧来试一试吧~
这是一篇关于番茄工作法花树图，间歇工作的总体效率高于连续工作，休息和工作交替进行。希望对你的工作效率有所帮助！
关于TK类电机设计审核思维导图，MacTK类电机的设计审核是一个全面评估电机性能、可靠性、成本等各方面要求的过程。
这是一篇关于设计心理学思维导图，包含日用品中的设计问题、日常操作心理学、设计中的挑战等。
社区模板帮助中心，点此进入>>
论语孔子简单思维导图
《傅雷家书》思维导图
《童年》读书笔记
《茶馆》思维导图
《朝花夕拾》篇目思维导图
《昆虫记》思维导图
《安徒生童话》思维导图
《鲁滨逊漂流记》读书笔记
《这样读书就够了》读书笔记
妈妈必读：一张0-1岁孩子认知发展的精确时间表
控件
控件栏
添加控件
添加到根节点
添加到已有控件
撤销、回退
操作后需要验证结构树、渲染区、属性区是否有实时刷新
UI界面
高清、普清图标
控件栏UI样式
对照效果图测试
属性区
该部分内容需要结合导入、导出功能进行测试
属性项
属性项测试
常规属性
尺寸和模式
Auto
Auto模式下控件尺寸为控件渲染资源的实际尺寸（像素），Auto模式下控件大小不可修改。
测试替换资源后控件大小是否正确
重点测试数字标签及自定义字体替换资源后控件大小是否正确。
Custom
尺寸
W
H
百分比（大小）
勾选百分比后控件的大小与父级控件大小的比例始终保持不变，所以当父级控件大小发生变化时勾选了百分比选项的子级控件会随着父级控件大小的变化而变化。 跨平台版本根节点是一个node，所以根节点下的控件没有百分比选项，只有挂在其他控件下作为子级之后才会有百分比选项。
比例
X
子控件W（尺寸）／父控件W（尺寸）
Y
子控件H（尺寸）／父控件H（尺寸）
九宫格
九宫格的尺寸不能小于图片的尺寸
原点
常规
○ 是否可见
此处的是否可见与结构树的显示/隐藏并不是同一个功能。属性区的是否可见是指该控件在当前帧的属性，而结构树的显示／隐藏的权重是最高。若结构树的显示／隐藏与属性区的显示／隐藏冲突时，以结构树的显示／隐藏为准。
动画单帧隐藏功能
○ Tag
设置控件的Tag，程序中可以通过该Tag值获取该控件。 新添加的控件会在当前最高tag值的基础上加1.
测试tag值数据保存是否正确
交互模块，保存、另存为、导出、导入
○ 交互
控制控件是否接受用户事件，如果该控件需要接受用户事件（如按钮），则需勾选。 Button、CheckBox、Slider、TextField、ScrollView、ListView、PageView默认开启交互。这些控件开启交互后在模拟器中可以接收鼠标的点击事件或键盘的输入事件。
模拟器中测试交互效果
○ 名字
Cocos2d－X对名字的格式没有限制可以输入任何字符， 测试时应注意同级结构下不应该存在同名控件（从结构 树改变父子关系，使得两个不同级控件成为同级控件时 有可能会出现这种情况）
○ 渲染层级
渲染层级决定了同级控件在渲染区的显示层级。渲染层级越大的控件显示的层级越高，渲染层级最大的控件显示在最上层。 这里需要注意测试渲染层级与点击层级是否一致。
做有父子关系的动画（精灵）
子控件的渲染层级为负数时可以显示在父控件的下面。
○ 透明度
○ 颜色混合
跨品台版本取色器有问题，需要注意测试
输入颜色值
取色板
取色吸管
子控件布局
绝对布局
控件布局（子控件）
百分比（位置）
控件X坐标／父控件W
控件Y坐标／父控件H
坐标
缩放
旋转
缩放和旋转都是围绕锚点来做的，需要结合锚点功能测试
翻转
锚点
测试时注意结合九宫格功能进行测试
控件在Custom模式下，替换渲染资源后改变锚点值，再进行翻转，渲染资源和控件之间会存在偏移，且翻转的效果不正确，测试时注意复制粘贴的控件也要正常。
相对布局
停靠
父控件
横向布局
左边
居中
右边
纵向布局
上边
下边
同级控件
停靠边界
边缘
扩充控件区域（调整与相邻控件间的间隔）
上
下
左
右
线性横向
线性纵向
特性
button
○ 正常状态
资源配置
测试资源配置时需要结合九宫格及翻转功能进行测试。
资源区文件拖拽到属性区
资源区文件直接拖拽到渲染区
拖拽到画布
拖拽到控件
外部资源直接拖拽到渲染区
重置为默认值
在正常状态属性栏的右键菜单中选择重置为默认值之后，控件的渲染资源会重置为默认资源
状态更新
资源区重命名
资源重新编辑
资源被删除
○ 按下状态
○ 禁用状态
○ 字体
支持ttf格式的字体文件，但是由于cocos引擎无法解析中文路径。所以配置的中文名称的ttf字体文件在模拟器中无法正常显示。
○ 字号
曾出现过调整button字号编辑器崩溃的问题，注意回归
○ 文本
○ 文本颜色
CheckBox
• 底图资源
• 按下底图
• 禁用底图
• 标识图选中
• 标识图未选中
选中/取消
鼠标点击选中／取消时CheckBox在渲染区会切换选中／取消的状态。由于CheckBox需要由点击来触发事件切换状态，所以在模拟器中CheckBox默认位取消状态。
ImageView
• 文件
LabelAtlas
• 标签图片
数字标签图片有以下几点要求： 数字标签中的字符必须按照ASCII码顺序来排列。 且字符只能线性横向排列即字符在图片中只能由左向右排列不能由上到下排列。 标签中的每一个字符的宽度都是一致的。
• 标签首字母
标签首字母是指标签图片资源中的第一个字符，如：默认的数字标签的标签图片中的字符为0123456789，则标签首字母为0.
注意：首字母只能输入一个字符
• 标签字符宽
标签字符宽
• 标签字符高
标签字符高默认为标签图片的高度。
需要注意替换资源后是否有自适应图片大小
• 文本
编辑器只能显示标签图片中存在的字符，标签图片中不存在的字符在编辑器中无法显示。
LabelBMFont
• FNT字体文件
自定义字体是由fnt文件及与fnt文件所对应的png文件所组成的，且fnt文件必须与png文件的命名一致时才可以在编辑器中正常使用。
只能显示png图片中存在的字符
注意测试中文及特殊符号
LoadingBar
• 图片资源
• 进度
• 类型
left_to_right
right_to_left
Slider
• 节点正常状态
• 节点按下状态
• 节点禁用状态
• 内部进度条
滑动进度
Label
• 交互动画
勾选交互动画后在模拟器中点击label时会有缩放效果
• 字体
• 字号
• 水平对齐
文本在文本框中水平方向的对其方式，由于Auto模式下文本框的大小是随着文本框中的字符数的变化而变化的。所以对齐方式的效果只有在custom模式下才看得到。
垂直对齐
文本在文本框中垂直方向的对齐方式，同样在custom模式才可以看到效果
TextFiled
字号
字体
文本
• 占位文本
• 开启密码
密码样式
长度限制
长度
Panel
• 裁切
渲染文件的渲染层级高于容器背景色的渲染层级，低于容器子控件的渲染层级
• 背景色透明度
• 填充颜色
无颜色
单色
渐变色
ScrollView
• 滚动区域
滚动区域大于显示区域后滚动层才会有滑动的效果
• 滑动方向
None
Vertical
Horizontal
Vertical_horizontal
• 开启回弹
开启回弹后在滑动层的显示区域滑动到滚动区域之外时会回弹到滚动区域的边缘位置，如果不开启回弹则显示区域无法滑动到滚动区域之外。
ListView
控件布局：
• 子控件间隔
• 子控件布局
○ 滑动方向
横向对齐
HORIZONTAL_LEFT
HORIZONTAL_RIGHT
HORIZONTAL_CENTER
纵向对齐
VERTICAL_TOP
VERTICAL_BOTTOM
VERTICAL_CENTER
PageView
PageView只能添加层容器作为子控件，PageView控件自带线性横向布局所以不可以设置子控件布局属性。
添加子页面
PageView的子页面必须与PageView大小一致，所以PageView子页面不可以设置尺寸和模式相关的属性。
属性项排序是否正确
属性区样式
属性项文本
有效值
输入格式
边界值
有效小数
属性值刷新
受TimeLine影响
受渲染区影响
受资源区影响
渲染区
新建
添加子控件
平移
复制、粘贴
删除
单选、多选
1、注意测试多选不同控件旋转、缩放的比例；2、一个控件的缩放值为负时，与其他控件一起框选进行缩放、旋转；
对齐
右键菜单
工具栏
UI动画
受属性区影响
渲染区操作
实时刷新
修改属性
属性区撤销回退
注意属性区改变时做撤销操作时渲染区也应该实时刷新
替换资源
资源重命名
删除资源
受结构树影响
注意当在渲染区给已有控件添加子控件后，复制已有控件后，结构树要实时刷新。
撤销回退
资源区
导入资源
导入文件按钮
导入文件夹按钮
将本地文件拖拽到资源区
将本地文件拖拽到渲染区
资源预览
导出碎图（plist）
打开文件位置
资源搜索
资源刷新
在资源管理器中编辑已导入工程中的资源
资源区预览及时刷新
渲染区及时刷新
在资源管理其中编辑工程中正在被使用的资源
属性区及时刷新
资源区及时刷新
将资源拖动到资源属性区
将资源由资源区拖动到渲染区
删除闲置的资源
删除正在被使用的资源
结构树
根节点下添加控件
已有控件下添加子结点
复制粘贴
改变父子关系
控件的坐标、缩放值、旋转值都是相对与父控件的。所以改变父子关系后控件的坐标位置、旋转角度及大小有可能会发生变化。
控件的布局属性需要随着父级控件发生变化而变化
隐藏／显示
锁定／解锁
