UI编辑器案例：自动切换的广告位 - 天工维度魔兽争霸开发者社区-全国最大的TJ集中营-原提百万联盟

今天，我要做一个能自动切换的广告位，先分析需求：

这个界面比较简单，一个界面就可以搞定，这个界面包括了：背景、关闭按钮、图片显示区域（重点区域，后面详细讲）、调试文本、5个小点标志广告位置

其中比较复杂的是广告图片显示区域，首先，我放置了一个层（layer_img）用来响应点击、拖拽这些操作，然后给这个层里放置了一个列表img_list，用这个水平滚动列表来模拟图片拖拽的效果。

那么img_list这个列表中包含的列表项是什么呢？三张图，中间的（img）、前一张（img_1）、后一张（img_2)，我只要用触发器把这三张图管理显示好，就能在拖拽时模拟出带着前一张、后一张图拖拽的效果了。

界面比较简单，拼到这里就结束了。下面开始写逻辑。

分析了需求后，我决定先实现最主要的功能：滑动切换图片。

为了滑动图片，我首先要知道的是手指是在向左滑（后一页），还是向右滑（前一页）？

为了知道手指的动作，我要知道手指按下和手指松开的坐标，就像这样，在layer_img这个控件上注册事件

点击开始，这个触发器的动作很简单，就是把全局变量“开始点”设置成触发界面坐标。

点击结束这个触发器稍微麻烦一点，把全局变量“结束点”设置成触发界面坐标后，

运算结束点和开始点的差值，然后看差值的横坐标（因为这里只能横向滑动，我并不关心手指的纵向移动）

如果横坐标差值在300以上，我认为手指已经移动的够远了，应该响应图片变化，因此这里做数值判断，然后，根据是+300，还是-300去分别调用“向前一页”或“向后一页”的触发器。

这里为什么不直接写逻辑，而要调用另一个触发器呢？把功能尽可能的分拆开，方便后面的复用，比如说，定时器到期的自动滚动，完全就可以复用“向后一页”这个触发器。

这两个触发器的功能是类似的，就是把全局变量“当前位置”记录的整数-1或+1.

界面刚显示的时候，当前位置显然是1.如果向前一页，我就把当前位置-1.

然而，当当前位置为0时，我并不想拖动不了，我想要显示的就是最后一张图（比如说，一共有5张图，那就显示第5张图），

那么就需要做一下修正，当当前位置＜1时，就让当前位置=当前位置+图片总数

同理，当当前位置>图片总数时，当前位置= 当前位置-图片总数

这样，我们的广告图就可以首尾连接无限循环了。

这两个触发器的作用就是用来改“当前位置”这个全局变量，改好之后，直接运行触发器“显示图片”

显示图片要把图片正确的显示出来，包括当前图片、上一张、下一张图片。

那么首先，我们应该有一个图片数组，这个图片数组在游戏开始时我去定义了。例如广告图片组[1]=图片1……依次类推

所以知道“当前位置”，就能计算出当前图片、上一张、下一张图片分别是广告图片组中的哪一张。

这个动作我使用的时候绕了好久才想清楚，因为很难理解列表和列表项之间的关系。如下图，是一个错误的写法，错在哪？你发现了吗？

答案揭晓，因为我们只能对“列表项”的子控件改图片，不能对“列表”的子控件改图片。因为程序不知道你要对列表中的哪个列表项的子控件改图片。

你要告诉Uni你要改变哪只象的图片（误），Uni才能改，你直接丢个列表那程序是不能理解的。

那么如何获得这只象呢？用这个参数“获取列表项”

之所以我这里做了这么多图……是因为真的很难找，我相信你（我）看（做）完这些图后，一定能区分出表和象了吧？

好的，做到这里，最主要的功能，“滑动切换图片”就完成了。

游戏开始后，创建一个一次性的计时器“自动后滚计时器”，到时间后去触发触发器“向后一页”

一旦切换了图片（运行了触发器“显示图片”），就删除掉timer计时器，然后重新创建一个计时器。

由于前面的触发器功能区分比较好，加这个定时切换只要简单的一个触发器，并且在“显示图片”触发器后面加2句：删除timer，运行“自动后滚计时器”