UI编辑器案例：队友信息界面

1. 需求 1. 界面中可以显示队友的信息； 2. 每名队友的信息包括主控单位头像、队友名称、交互信息； 3. 交互信息包括点赞、修改备注名； 2. 拼界面 按照惯例，还是先把这个需求的界面拼好。 2.1 入口按钮界面 队友信息界面并不是一个常驻界面，所以我们先来做一个入口按钮。 入口按钮很简单，就是一个普通的按钮，比较难在如何定位这个按钮的位置。这里我设计的是将按钮显示在小地图右边、网络延迟信息的下方，难点在于我们现在不知道官方的小地图是如何适配的（即不知道小地图的控件大小是多少）。我这里用的方法是：在设计分辨率(1334 * 750)下进入战斗，用截图工具量出我需要定位的点到客户端左下角的距离，并将这个距离写在入口按钮的定位属性中。 这个方法在大多数情况下都是稳的，之后我们也会提供官方的战斗一级界面的具体定位信息，帮助大家通过UI编辑器拓展战斗中的一级界面。 2.2 队友信息主界面 接下来我们来拼队友信息的主界面。 2.2.1 吞噬点击事件的阻挡层`lyr_forbid_touch` 队友信息界面并不是一个全屏界面，因此非界面区域需要有一个阻挡层吞噬点击事件，避免该界面下方的对象响应点击事件。 2.2.2 界面区域`lyr_panel_area` 然后拼一个界面区域的层放在**，之后的节点都放在这个界面区域中。 2.2.3 背景图片`spt_bg` 同样的，给界面来个背景图片，用一个九宫缩放的图片即可。 2.2.4 关闭界面按钮`btn_close` 这个界面打开后还需要可以被关闭，要拼一个关闭界面的按钮。 2.2.5 空状态提示`lb_default_tips` 玩家可能没有队友，所以要拼一个空状态的提示，默认隐藏。 2.2.6 队友信息列表及其列表项 终于到了这次的重点：列表和列表项。 列表UI编辑器中一种相对复杂的控件，类比到触发器的话，列表就是一个数组。数组大家应该比较熟悉，数组是由多个对象按某种顺序排列起来的，我们可以获取整个数组，也可以获取数组中的某一项，改变数组的大小等等。同样的，列表就是有多个列表项所构成的，列表也有大小、其大小也可以被改变，列表中的每一项就是一个列表项。列表项可以很简单（比如一个按钮、一张图片），也可以很复杂（本文示例）。 无论列表还是列表项，在UI编辑器中都是一种控件。 在这个需求中，玩家的队友可能有多个，但是每个队友需要显示的信息又是类似的，因此我们就用到了列表和列表项。 这里，我们拼一个垂直滚动列表，作为队友的信息显示列表。 然后开始列表项的拼接。我们这里的列表项相对复杂，每一个列表项需要显示如下信息： 1. 主控单位头像； 2. 队友名字； 3. 队友备注名； 4. 点赞按钮； 5. 修改备注名按钮； 由于列表项比较复杂，因此列表项根节点的配置非常关键。列表项根节点的配置决定了列表项在列表中的显示大小。对于垂直列表，列表的『尺寸x』是不能编辑的，因为垂直列表的『尺寸x』是由列表项的尺寸x、列数、水平边距、水平间距这4个因素共同决定的；对于水平列表，列表的『尺寸y』是不能编辑的，因为水平列表的『尺寸y』是由列表项的尺寸y、行数、垂直边距、垂直间距这4个因素共同决定的。 由于我们的列表占满了整个界面，所以我们的列表项根节点也需要配置对应的尺寸。 同样的，我们给列表项来个底板，用九宫图片。 然后是主控单位头像部分，由于单位头像的资源没有边框不好看，所以我们采用一个边框底板套单位头像的拼接方式。 接下来的就是两个文本和两个按钮分别对应队友名字、队友备注名、点赞按钮、修改备注名按钮，这些都很简单，就不再赘述了～ 2.3 修改队友备注名界面 最后是修改队友备注名的界面，整体拼法挺简单的，思路和上面的类似，这里就不在详述了，这里就展示一下控件树吧～ 3. 界面逻辑实现 这个界面整体逻辑挺好实现的，比较复杂的在于列表和列表项的部分，因此本文着重说明列表和列表项在触发器中的使用方法。 3.1 使用触发器设置列表项数 通过触发器动作：控件-设置列表项数，完成列表项数的设置，将列表的大小设置成我们需要的大小。例如本文的示例中，我们需要将列表的大小设置为触发玩家的队友的个数。 3.2 遍历列表 在触发器中遍历列表可以有很多种方法，例如： - 通过触发器函数：整数-列表大小，获取列表的大小，然后用整数循环1到列表大小，完成列表遍历； - 通过触发器函数：数组-列表内的所有列表项，获取列表中的所有列表项，得到一个控件的数组，然后遍历这个数组，完成列表遍历； 遍历数组有很多种方法，通常在遍历列表项时，我们可以使用触发器动作：循环-枚举遍历数组，完成控件数组的遍历。因为在遍历列表时，通常都会想要直接获取到这个列表项及其索引值，而这个枚举遍历数组的动作，恰恰可以满足这个需求。 注意，在上面的这个循环中，`teammate_info`这个控件，我们获取到的是每个列表项的根节点。 如果采用整数循环的形式遍历列表，可以通过触发器函数：控件-获取列表项，获取对应索引值的列表项，如下图所示。 注意，在上面的这个函数中，第一个参数必须是一个列表，不能是其他类型的控件，否则属于错误的使用。同样的，这个函数的返回值是列表项的根节点。 3.3 获取列表项的子节点 在遍历列表项的过程中，我们获取到的是列表项的根节点，但我们需要操作的一般都是列表项的子节点，例如本文示例中，我们要修改每个列表项的图标时，需要获取的是每个列表项的`spt_unit_icon`节点，获取到该节点后设置其图片。 此时，我们可以使用触发器函数：控件-列表项指定名字子控件，如下图所示。 使用这个函数时，需要注意以下几点： 1. 第一个参数必须是列表项，或者说第一个参数必须是列表项的根节点，否则属于错误的使用； 2. 这个函数的返回值是某个列表的某一项的某一个子节点； 根据我们的经验，这个函数经常会出现以下这种错误的使用： 这种错误常常出现在这种情况下：在非遍历列表时，想要直接获取某个列表项的子控件的时候。 初学者通常很难发现这个错误，这里介绍一种简单的方法来帮助初学者排查这个错误。如果你在使用这个函数的过程中遇到了触发器报错：『列表项指定名字子控件』中的控件参数不是列表项，那么你可以参照以下3点对着你的函数进行检查： 1. 函数中是否包含列表信息； 2. 函数中是否包含索引值信息； 3. 函数中是否包含子控件名信息； 要获取列表项中的子控件，以上3条信息缺一不可（列表项的子节点是：某个列表的某一项的某一个子节点，3个『某』）。在这个错误的示例中，显然我们缺少了索引值信息，所以找不到对应的子控件。正确的获取方法如下图所示。 3.4 获取列表项在列表中的索引值 在列表的实际实现过程中，我们也会遇到这样的问题：想要直接获取列表项在列表中的索引值。 例如本文示例中，在实现『点赞』按钮的功能时。点赞功能中，点击按钮事件触发时，我们可以获得发起事件的按钮，即『触发控件』，此时我们需要知道触发玩家是给哪个队友点的赞，因此我们需要知道这个触发控件具体是在列表的第几个列表项中，即列表项在列表中的索引值。 此时，我们可以使用触发器函数：整数-列表项在列表中的索引值，如下图所示。 使用这个函数时，需要注意以下几点： 1. 第一个参数必须是列表项，或者说第一个参数必须是列表项的根节点，否则属于错误的使用； 2. 这个函数的返回值是某个列表项的索引值； 在本文示例中，我们的『触发控件』是列表项的一个子控件，因此我们需要使用另一个触发器函数：控件-控件的父控件，获取触发控件所在的列表项。在这个例子中，控件的父控件是列表项的根节点，也就是列表项本身了。 如果你的触发控件在列表项中的嵌套结构比较深，可以多用几次控件的父控件，直到找到你的列表项根节点为止。