UI组件详解
Author: Charley
UI组件是2D编辑中的基础组件，我们日常开发的2D UI界面的编辑，都是基于UI组件。
一、什么是UI组件
从引擎类的结构上看，UIComponent类是UI组件的基类，也就是说UI组件有一个共性，都是继承于UIComponent类而实现的组件。
UI组件，又分成基础UI组件和容器UI组件。比较容易理解和识别的方式为，Box和继承于Box的都属于容器类组件。其它的都是基础UI组件。
1.1 基础UI组件
基础UI组件显示对象，一共有17个，直接或间接继承于UIComponent，如图1-1的高亮部分所示。
（图1-1）
1.2 容器组件
继承于Box的组件，加上Box容器本身，容器对象一共有9个。如图1-2的高亮部分所示。
(图1-2)
这些容器单单自己是没有意义的，必须要包括基础的UI组件作为子节点，才能使得组件功能完整。
例如，List必须要有基础UI组件作为列表的渲染单元，单选框组（RadioGroup）是多个单选框（Radio）组件的容器。
1.3 弹窗视图组件
从引擎类的结构上看，弹窗视图组件Dialog并不属于UI组件，它的继承关系如图1-3所示。
（图1-3）
该组件一般用于弹窗面板，与场景的管理息息相关，是UI小部件的一部分，所以不再单独列出一类，只在这里做一个说明。
二、UI组件的创建
UI组件的创建有三种方式：分别是从小部件（Widgets）面板里拖拽UI组件使用、从层级管理（Hierarchy）面板的右键菜单里创建、通过组件资源命名规则为资源命名，然后直接被IDE识别。
2.1 直接使用组件
小部件（Widgets）面板里包括了基础节点，也包括了UI组件，使用时直接拖拽到层级面板或场景编辑窗口内即可。效果如动图2-1所示。
(动图2-1)
2.2 右键菜单
层级管理（Hierarchy）面板的2D节点下，右键菜单里也可以直接创建UI组件，效果如图2-2所示。
(图2-2)
2.3 通过组件资源命名规则，直接被IDE识别
对于一些常用的UI组件，LayaAir引擎与IDE，提供了资源命名的规则。
当图像资源文件按照LayaAir引擎UI组件命名规则命名时，会直接被IDE识别为基础UI组件。
组件资源的命名有两类，
一类是，一个资源就对应一个UI组件的常规资源，例如，img_layabox.png，会被识别为Image组件。
另一类是，多个资源对应一个UI组件的组合资源，例如，progress_loading.png与progress_loading$bar.png组合形成一个progress组件，progress_loading.png为组件名是进度条的背景资源，另一个在progress_loading后面带了一个$bar的是进度条的进度资源。
总结以上，我们会发现两点规律：
- 无论是哪种资源，下划线
_之前是组件规则名称，并且必须要放到文件名的开头。 - 组合资源，在主资源名称的后面，再通过美元符号
$相隔，带一个辅助标识名，方便IDE与引擎识别。
常规资源命名规则如下：
| 组件名 | 中文组件名 | 资源文件名前缀 | 资源文件名前缀缩写 |
|---|---|---|---|
| Image | 图像 | image_ | img_ |
| Button | 按钮 | button_ | btn_ |
| ComboBox | 下拉框 | comboBox_ | combo_ |
| TextInput | 文本输入 | textInput_ | input_ |
| TextArea | 文本域 | textArea_ | area_ |
| CheckBox | 多选框 | checkBox_ | check_ |
| Label | 显示文本 | label_ | 无缩写 |
| RadioGroup | 单选框组 | radioGroup_ | 无缩写 |
| Radio | 单选框 | radio_ | 无缩写 |
| Tab | 导航标签组 | tab_ | 无缩写 |
| Clip | 位图切片 | clip_ | 无缩写 |
| FontClip | 位图字体切片 | fontClip_ | 无缩写 |
资源前缀不区分大小写
组合资源命名规则如下：
| 组件名 | 中文组件名 | 资源文件名前缀 | 资源文件名前缀缩写 | 辅助标识名 |
|---|---|---|---|---|
| VScrollBar | 垂直滚动条 | vscrollbar_ | vscroll_ | 垂直划动条$bar、上点击按钮$up 、下点击按钮$down |
| HScrollBar | 水平滚动条 | hscrollbar_ | hscroll_ | 水平划动条$bar、左点击按钮$up 、右点击按钮$down |
| ProgressBar | 进度条 | progressbar_ | progress_ | 进度条$bar |
| VSlider | 垂直划动条 | vslider_ | 无缩写 | 垂直划动按钮$bar、进度条资源$progress（可选） |
| HSlider | 水平划动条 | hslider_ | 无缩写 | 水平划动按钮$bar、进度条资源$progress（可选） |
资源前缀不区分大小写
示例说明：
- 垂直滚动条aa，由四个资源文件构成。分别是
vscroll_aa.png、vscroll_aa$bar.png、vscroll_aa$up.png、vscroll_aa$down.png。 - 进度条bb，由两个资源文件构成。分别是
progress_bb.png、progress_bb$bar.png。 - 水平划动条cc，由两个或三个资源文件构成。分别是
hslider_cc.png、hslider_cc$bar.png、hslider_cc$progress.png（可选），若缺少了进度条资源hslider_cc$progress.png不会报错，只是不显示进度。
2.4 容器组件的创建与解除
了解完资源命名规则后发现，除了继承于UI组(UIGroup)的RadioGroup与Tab组件，是可以通过资源前缀规则命名识别的。其它的容器组件均不支持通过资源名称直接识别创建。
除了采用2.1与2.2的方式创建外，还可以在IDE里将一个或多个选中的基础组件通过Ctrl+B快捷键转化为容器组件。如果不想要容器组件了，也可以通过Ctrl+U解除当前选中的容器。
此处有个印象即可，在介绍具体的容器组件时，还会详细描述创建方法与流程。
三、相对布局
相对布局是UI组件的特有属性，如图3-1所示，每一个UI组件都有这样的相对布局属性。而基础显示对象Sprite等就没有相对布局，只有绝对布局。
（图3-1）
在相对布局中，UI组件（如按钮，文本框等）的位置是相对于它们的父节点来确定的。这种布局带来了极大的灵活性，并且可以在不同的屏幕大小和方向下保证 UI 布局的一致性。
至此，我们对UI组件已有了基础的了解，我们将开始对全部的UI组件进行详细介绍。为避免文档的标题过长，对UI组件根据使用的特点进行分类介绍，并不按组件类的继承关系。
下面，通过左侧导航点开UI组件文档了解更多吧~