轮播图实例讲解

作者：创世魂

一、轮播图

界面如下图：

打开启动类界面设计器，设计如下界面。

依次是“按钮1”和“轮播图1”，并设置轮播图的高度和宽度。

注意：本组件位于“轮播图窗口组件”模块中。

“设置数据”帮助文档：

顾名思义，通过本方法可设置“轮播图”数据。

本方法会发送“加载项目视图”事件，通过本事件来载入具体数据。

参数1：用于存储图片地址列表数据，可以是“网络地址”也可以是“本地存储卡”路径。

参数2：用于存储轮播图的提示文本，不提供文本填写“空对象”即可。

“加载项目视图(事件)”帮助文档：

调用“设置数据”方法会发送本事件。

参数1：通过本参数可取出“设置数据”方法中的“图片地址列表”数据。

参数2：要设置图片数据的图片框。

参数3：当前载入的索引。

代码编写如下图：

1、定义两个“文本列表类”，名称分别为“图片列表”和“提示列表”。

2、通过“文本数组类”创建列表对象。

3、通过列表对象添加成员方法，添加“图片地址”和“提示文本”。

4、调用“设置数据”方法，将两个变量依次写入参数即可。

 

5、添加“轮播图_加载项目视图”事件。

6、利用“对象到文本”方法，将“数据对象”转换为文本型。

7、使用“图像加载工具类.载入图片”方法，载入轮播图数据。

参数1：填写“本对象”

参数2：填写“图片地址”变量。

参数3：填写“组件对象”即可。

运行效果如下图（GIF）：

注意：轮播图默认自动切换。

“开始自动轮播”帮助文档：

顾名思义，调用本方法可进行自动轮播。

“结束自动轮播”帮助文档：

顾名思义，调用本方法可停止轮播。

“自动切换间隔(写)”帮助文档：

通过本写属性，可设置自动切换时间间隔，单位毫秒。

界面准备如下图：

在原界面的基础上增加一个按钮。

代码编写如下图：

在“通知_被创建”方法下，调用“设置数据”方法，设置要轮播数据。

 

在“轮播图1”属性栏，增加“自动切换间隔”属性，属性值填写“500”毫秒。

“按钮1”被点击执行“开始自动轮播”方法。

“按钮2”被点击执行“结束自动轮播”方法。

运行效果如下图(GIF)：

帮助文档如下图：

顾名思义，本读属性可读取当前轮播图数量，返回值为整数。

代码编写如下图：

“按钮1”被点击后，调用本属性显示在提示信息框中。

运行效果如下图：

帮助文档如下图：

通过本属性可设置当前组件是否支持手动切换页面。

如果不设置本属性，默认为真。

代码编写如下图：

“按钮1”被点击后设置本属性值为“真”。

“按钮2”被点击后设置本属性值为“真”。

运行效果如下图（GIF）：

帮助文档如下图：

通过本属性可将轮播图的指示器设置到顶部。

代码编写如下图：

设置本属性值为假，指示器就会显示在顶部的位置。

运行效果如下图（GIF）：

帮助文档如下图：

通过本属性可设置轮播图的指示点位置。

属性值调用方式：“轮播指示点位置.XXX”。

代码编写如下图：

调用本属性，设置属性值“左对齐”。

运行效果如下图（GIF）：

“按钮1”被点击后，可看到两个指示点位于左侧。

帮助文档如下图：

顾名思义，通过本属性可设置指示点是否可见。

属性值为真可见，否则相反。

代码编写如下图：

“按钮1”被点击后，调用本属性，设置属性值为假。

运行效果如下图（GIF）：

“支持轮播单击(写)”帮助文档：

顾名思义，本方法用来设置当前轮播组件是否支持单击。

属性值为真则支持单击，否则相反。

“轮播被单击(事件)”帮助文档：

想要让本事件生效，务必设置“支持轮播单击”属性值为真。

本事件共返回三个参数。

参数1：返回的数据对象，通过“对象到文本”方法可取出图片地址。

参数2：取出被单击的窗口组件。

参数3：取出被单击的索引。

代码编写如下图：

“按钮1”被点击后，设置“支持轮播点击”属性值为真。

添加“轮播被点击”事件，弹出“图片地址”和“当前索引”。

运行效果如下图（GIF）：

“支持页面改变监听(写)”帮助文档：

顾名思义，通过本属性可设置页面被改变监听。

属性值为真则监听，否则相反。

“页面被选中(事件)”帮助文档：

当轮播图切换完毕后触发本事件，参数返回当前轮播图的索引值。

代码编写如下图：

“按钮1”被点击，设置监听。

添加“页面被选择”事件，弹出切换完毕后的索引值。

运行效果如下图（GIF）：

在未点击“按钮1”前切换轮播图，并不会触发当前事件。

点击后，可看到当前事件被触发。

帮助文档如下图：

本属性用来设置轮播图切换的速度，属性值单位为毫秒。

代码编写如下图：

“按钮1”被点击设置属性值为“2000毫秒”。

“按钮2”被点击设置属性值为“100毫秒”。

运行效果如下图（GIF）：

注意观察切换速度。

帮助文档如下图：

本属性用来设置两个轮播图页面之间的间距，属性值单位像素。

代码编写如下图：

“按钮1”被点击设置当前属性值为“100像素”。

运行效果如下图（GIF）：

注意观察两个轮播图之间的间距变化。

帮助文档如下图：

务必设置“支持页面改变监听”属性值为真，本事件才能被发送。

参数1：返回当前索引。

参数2：返回距离原页面偏移距离，数值范围“0-1”。

参数3：返回位置偏移，单位像素。

代码编写如下图：

1、设置“支持页面改变监听”属性值为真。

2、添加“页面开始滚动”事件，在“按钮2”上显示返回的参数信息。

运行效果如下图（GIF）：

帮助文档如下图：

务必设置“支持页面改变监听”属性值为真，本事件才能被发送。

参数值将返回三个状态，调用方式：“视图容器.XXX”。

代码编写如下图：

1、设置“支持页面改变监听”属性值为真。

2、添加“页面滚动状态改变”事件，分别判断三个状态值即可。

运行效果如下图（GIF）：

二、设计器属性

顾名思义，只能在界面设计器里面看到的属性，通过此属性可以让轮播图拥有更多效果。

界面属性如下图：

打开界面设计器，选中要修改属性的“轮播图”组件，在右侧可看到本属性。

在设计器下方位置，可看到当前属性的注释等信息，可以得知当前属性是逻辑型。

运行效果如下图（GIF）：

将当前属性设置为真后，如果轮播图的提示文本过长会自动出现文字跑马灯效果。

以上两个属性用于自定义指示器显示图片。

界面设置如图：

打开界面设计器，分别给这两个属性选择不同的图片。

注意：此处要注意图片尺寸，不能太大，否则指示器图片会遮盖轮播图组件。

运行效果如下图（GIF）：

可以看到轮播图指示器图片被修改。

界面设置如图：

打开界面设计器，选中轮播图后即可看到当前属性，点击可选择想要修改的颜色。

也可以直接输入十六进制文本的颜色值。

运行效果如下图：

指示器所处的背景色将会被修改成红色，默认为透明色。

界面设置如下图：

本属性共有三个选项，分别是“无”，“顶部”和“底部”。

如果不设置，默认显示在底部。

运行效果如下图：

选择顶部后，指示器包含指示器文本都将显示在顶部位置。

界面设置如下图：

本属性类型为小数，可输入小数值，用于设置指示点容器的左右边距。

运行效果如下图：

因轮播图的提示文本也在指示点容器内，所以文本左侧会产生间距。

界面设置如下图：

在界面设计器中选中组件就可以看到当前属性，属性值为小数。

运行效果如下图：

最终指示点左右都会有边距产生。

界面设置如下图：

打开界面设计器，选中轮播图组件后就可看到本属性，属性值为小数。

运行效果如下图：

最终指示点上下都有产生边距。

界面设置如下图：

打开界面设计器，选中组件后就可看到本属性，属性值为文本型。

可以直接下拉选择颜色，或者输入十六进制文本颜色值。

运行效果如下图：

运行后提示文本颜色将会修改成红色。

界面设置如下图：

打开界面设计器，选中组件后就可以看到本属性，属性值为小数值。

运行效果如下图：

软件运行后，文本尺寸会发生变化。

界面设置如下图：

打开界面设计器，选中组件后可以看到本属性，属性值为逻辑型。

选择真后，轮播图指示点将会变成数字显示。

运行效果如下图：

数字显示效果为“当前页/总页数”。

界面设置如下图：

打开界面设计器，选中组件后将会看到本属性，属性值为可绘制资源。

想要使用本属性，必须同时设置显示数字指示器为真。

运行效果如下图：

运行后，数字指示器将会显示引用的背景图。

界面设置如下图：

打开界面设计器，选中组件后就可以看到本属性，属性值为可绘制资源。

本属性的作用，在轮播图无数据或数据无效时，将会显示引用的图来占位。

代码编写如下图：

在代码中屏蔽“设置数据()”方法，模拟无数据情况。

运行效果如下图：

最终整个轮播图的区域会显示引用的图片。

代码编写如下图：

顾名思义，通过本属性可让轮播图单屏显示多张图片。

本属性值为逻辑型，共有三个选项。

运行效果如下图：

当本属性设置为真后，单屏将会显示三张图片。

界面设置如下图：

本属性的属性值为小数，单位DP。

欲设置本属性，必须同时设置“单屏显示多个”属性为真。

运行效果如下图：

设置左右间距后，左右的图片会显示更多的内容。

代码编写如下图：

本属性可设置轮播图上下边距，属性值为小数，单位DP。

欲设置本属性必须将“单屏显示多个”设置为真才有效。

运行效果如下图：

最终可看到轮播图上下都会产生边距。

代码编写如下图：

本属性可设置页面左右边距，属性值为小数，单位DP。

欲设置本属性必须将“单屏显示多个”设置为真才有效。

运行效果如下图：

最终可看到轮播图左右会有间距产生。