UI编辑器案例：GUI形式输出矩阵

1. 需求

1. 通过UI编辑器的文字输入框，实现矩阵的字符串解析；
2. 界面中，通过下拉列表的形式展示当前已经声明过的矩阵；
3. 选中某个矩阵后，即可直接在界面上查看这个矩阵；

2. 拼界面

我们首先需要拼好这个需求所对应的界面。

2.1 底板`spt_bg`

首先要先配个底板，用一个九宫图片即可，尺寸可以稍微调大一点保证能铺满。



2.2 输入框

首先要先用一个层把所有的子节点包起来，方便管理。然后在文字输入框的上面套一个图片的底板，输入框的左边是一个输入tips按钮，输入框的右边是一个输入确认按钮。



2.3 矩阵下拉菜单

最上方是一个弹出下拉菜单的多选按钮，`false`隐藏下拉菜单，`true`弹出下拉菜单。

下面是一个按钮的垂直滚动列表，列表项就是一个一个的按钮，列表的父节点是列表的底板。

需要注意，按钮列表的底板初始要隐藏。（配图中没有隐藏，但是是需要隐藏掉的）



2.4 矩阵显示区

矩阵显示区就最简单了，里面只有一个列表，列表项用一个文本就可以了。



2.5 tips界面

tips界面也比较简单，也是用一个图片底板，上面是标题、下面是tips内容。

需要注意加吞噬触摸的层，以实现点空白处关闭tips界面的功能。



3. tips界面的实现

tips界面比较简单，就先实现tips界面吧。

步骤很简单，就不贴图了：

1. 注册问号按钮的点击事件，点击的时候显示tips界面；
2. 注册tips界面的初始化时间，修改tips的内容；
3. 注册tips界面layer的点击事件，点击的时候关闭tips界面；

4. 文字输入框的实现

首先，我们在输入内容确定的时候，获取输入框内输入的内容。



然后，点击确认按钮时，用我们写好的逻辑解析输入的字符串。



最后，在矩阵构造时，将构造好的矩阵加入下拉菜单的列表中。

5. 矩阵下拉菜单的实现

5.1 下拉菜单激活按钮

首先需要是实现下拉菜单的激活按钮，注册这个按钮的『多选状态改变』事件，并根据触发控件的多选状态来实现相关逻辑即可。





5.2 列表矩阵按钮功能的实现

然后实现列表矩阵按钮的功能就可以了。