UI编辑器案例：关卡选择界面

1. 需求

1. 关卡选择界面可以选择不同的关卡进入；
2. 每个关卡有不同的可选式神，需要选择式神才能进入，每个关卡最多选择4名式神；

2. 拼界面

按照惯例，先把界面拼好～

2.1 关卡列表`list_stage`

关卡列表用一个垂直滚动列表，因为需要使用多选按钮组的功能实现关卡切换，所以列表里面都放多选按钮即可。



2.2 可选式神列表`list_hero`

可选式神列表同样是一个垂直滚动列表。



列表项的内容会相对复杂些，首先相应点击的控件我们用一个按钮即可，无需多选按钮，因为按钮即可满足我们的需求，这里可以详见后续的具体实现。同时我们还需要一个底图`spt_bg`让每个列表项更好看一些。最后再拼一个外框，初始隐藏，如果这个外框显示了出来，则表示玩家选中了这个式神。



3. 界面功能实现

3.1 界面初始化

界面初始化时，最重要的是将左侧的关卡列表初始化完成。

首先我们根据关卡配置，设置列表的大小。



然后遍历`list_stage`，把每个`cbtn_stage`加到循环前创建的数组中，并设置每个`cbtn_stage`的文本内容为关卡名字。



最后设置多选按钮组，并选中第一个关卡。



3.2 选中关卡

选中关卡时，应当获取当前关卡的可选式神列表，并将`list_hero`中的式神按钮设置为对应的可选式神的图标。



接着，遍历`list_hero`，将里面的式神按钮`btn_hero`的图片设置为对应式神的图标。



3.3 点击式神按钮`btn_hero`

点击式神按钮时，首先我们需要获得式神按钮所在的列表项在列表中的索引值。




然后做这样的判断：

1. 如果这个式神已经被选中了，则取消选中；
2. 如果这个式神没有被选中，优先判断选择个数是否达到上限，如果达到上限了就tellme"所选式神数已达上限"，如果没有达到上限就选中这个式神；

这个判断很简单，触发器就不贴了～