高级选择夹实例讲解

作者:创世魂

 

● 辅助说明

注意:本类位于“杂类窗口组件1”模块中,必须添加此模块才能使用。

 

一、高级选择夹

 

● 准备工作

 

界面准备:

打开启动类“界面设计器”,设计如下界面。

组件依次为“按钮1”“高级选择夹1”“视图容器1”

设置高级选择夹1“宽度”“匹配父组件宽度”

设置视图容器1“高/宽度”“匹配父组件高/宽度”

注意:高级选择夹必须配合视图容器使用。

本组件还继承了“横向滚动容器”“帧布局器”的所有方法。

注意:本组件位于“杂类窗口组件1”模块中。

 

 

● 标签内边距(写)
● 标签宽度(写)
● 标签空间平等(写)
● 关联视图容器

 

“标签内边距(写)”帮助文档:

顾名思义,设置高级选择夹标签内边距。

 

“标签宽度(写)”帮助文档:

高级选择夹可设置一个或多个标签,此方法可用于设置标签的宽度。

注意:如果使用了“标签空间平等”属性,则不要使用本属性。

 

“标签空间平等(写)”帮助文档:

本写属性的作用,用于是否让标签平分所有可布局空间。

 

“关联视图容器”帮助文档:

“高级选择夹”无法单独使用,必须配合“视图容器”

此方法的作用就是用来关联“视图容器”并设置高级选择夹“标题”

注意:标题数组成员数必须等于视图容器的页面数量。

 

代码编写(1):

给高级选择夹“属性名”一栏,增加“标签空间平等”“标签内边距”属性。

注意:因使用了“标签空间平等”,所以此处不适用“标签宽度”属性。

 

代码编写(2):

1、添加“通知_被创建”虚拟方法。

2、定义“标题数组”和三个“线性布局器”,用于选择夹所需页面和标题。

3、定义“窗口容器组件列表类”“窗口容器组件数组类”变量,用于创建“视图容器”页面。

4、将定义的“线性布局器”全部添加到“布局列表”内,调用“视图容器1.初始化视图容器”方法,创建视图容器。

5、 调用“关联视图容器”方法,将“视图容器”“选择夹标题”结合。

6、定义三个“文本框”,分别设置“内容”“文本字体尺寸”属性。

7、分别将这三个文本框添加到三个线性布局器内。

8、至此高级选择夹和视图容器全部初始化完毕,可正常使用。


 

运行效果如下图(GIF):

可看到有两种切换页面模式。

1、点击标签可切换。

2、左右滑动可切换。

注意:标题下面的白色线条在火山中叫“指示器”

 

 

● 取指定标签组件

 

帮助文档如下图:

取出“高级选择夹”标题中取出指定索引的文本框。

注意:索引从0开始。

 

代码编写如下图:

在源代码的基础上,增加“按钮_被单击”事件。

定义“文本框1”变量,调用当前方法参数填写0,赋值给“文本框1”

就可以修改高级选择夹第一个标题的内容。

 

运行效果如下图(GIF):

点击“按钮1”后就可以看到“高级选择夹1”的第一个“标题”被修改。

 

 

● 标签选择监听
● 标签被选择(事件)
● 标签被重新选择(事件)

 

“标签选择监听”帮助文档:

通过本方法可监听标签被选择事件,参数值为真则监听,否则相反。

 

“标签被选择(事件)”帮助文档:

调用“标签选择监听(真)”后,当选择标签时,会触发本事件。

参数返回被选择的标签索引,索引从0开始。

 

“标签被重新选择(事件)”帮助文档:

当某个标签被选中后,再次选择时会触发本事件。

 

代码编写如下图:

“按钮1”被点击后,调用当前方法设置参数为真即可。

依次添加“标签被选择”事件和“标签被重新选择”事件,然后弹出被选择的标签索引。

 

运行效果如下图(GIF):

 

 

● 设置指示器外边距

 

帮助文档如下图:

本方法可用来设置“指示器”的外边距。

共有四个参数,分别设置上下左右的外边距,单位为DP。

注意:本外边距并不是距离标题文本的外边距,而是针对高级选择夹的外边距。

 

代码编写如下图:

“按钮1”被点击后,调用本方法分别设置外边距10DP。

 

运行效果如下图(GIF):

可看到指示器覆盖了标题,证明本方法的“上外边距”并不是以标签底部为准。

 

 

● 设置现行选中项

 

帮助文档如下图:

本方法可跳转到指定选择夹。

参数1:填写要跳转的选择夹索引,索引从0开始。

参数2:是否设置过度动画。

 

代码编写如下图:

调用本方法,设置相关参数即可。

 

运行效果如下图(GIF):

“按钮1”被点击后可看到跳转到了第三个选择夹。

 

 

● 更新数据

 

帮助文档如下图:

当动态添加选择夹后,可调用本方法更新数据。

 

代码编写(1):

“通知_被创建”方法下定义的“布局列表”“布局数组列表”剪切到成员变量中。

 

代码编写(2):

1、定义“新标题”“线性布局器”“文本框”变量。

2、调用“布局列表.添加成员”方法,添加“线性布局4”

3、重新调用“初始化视图容器”“关联视图容器”方法。

4、给“线性布局4”添加内容,最后调用“更新数据”方法。

 

运行效果如下图(GIF):

 

 

● 下划线顶对齐(写)
● 下划线颜色(写)
● 下划线高度(写)

 

“下划线顶对齐(写)”帮助文档:

给当前高级选择夹设置下划线对齐方式。

属性值提供真则顶对齐,否则底部对齐。

 

“下划线颜色(写)”帮助文档:

可使用颜色类中定义的颜色值。

 

“下划线高度(写)”帮助文档:

设置下划线高度,单位像素,建议不要设置太高,否则会覆盖标题文字。

 

代码编写如下图:

“按钮1”被点击后,分别设置三个属性值。

 

运行效果如下图(GIF):

可看到当前选择夹增加了红色下划线。

 

 

● 分割线内边距(写)
● 分割线颜色(写)
● 分割线宽度(写)

 

“分割线内边距(写)”帮助文档:

设置分割线内边距,建议属性值不要设置太大。

 

“分割线颜色(写)”帮助文档:

设置分割线颜色,可使用“颜色类”中定义的常量值。

 

“分割线宽度(写)”帮助文档:

设置分割线宽度,单位像素。

 

代码编写如下图:

“按钮1”被点击后,分别设置三个属性值。

 

运行效果如下图(GIF):

可看到当前选择夹增加了黄色分割线。

 

 

● 字体大小(写)
● 文字加粗(写)
● 未选中文本颜色(写)
● 现行选中文本颜色(写)

 

“字体大小(写)”帮助文档:

设置选择夹标签的字体大小。

 

“文字加粗(写)”帮助文档:

设置标题文本加粗风格,共有三种风格。

0:不加粗。

1:选中加粗。

2:加粗。

 

“未选中文本颜色(写)”帮助文档:

设置未选中的标签文本颜色,可使用“颜色类”中定义的常量值。

 

“现行选中文本颜色(写)”帮助文档:

设置被选中的标签文本颜色,可使用“颜色类”中定义的常量值。

 

代码编写如下图:

“按钮1”被点击后,分别设置四个属性值。

同时也可以给当前组件调整“背景色”

 

运行效果如下图(GIF):

可看到颜色全部被修改。

 

 

● 指示器圆角度数(写)
● 指示器宽度(写)
● 指示器对齐标签宽度(写)
● 指示器高度(写)
● 指示器顶对齐(写)
● 指示器颜色(写)

 

“指示器圆角度数(写)”帮助文档:

设置指示器的圆角度数,调整“指示器高度”后本属性才能有效果。

 

“指示器宽度(写)”帮助文档:

设置指示器宽度,如果使用了“指示器对齐标签宽度”,则不要使用本属性。

 

“指示器对齐标签宽度(写)”帮助文档:

设置指示器是否和标签宽度一致,如果属性值为真则宽度一致,否则相反。

 

“指示器高度(写)”帮助文档:

设置指示器高度,单位像素,建议不要设置太高,否则会覆盖标签。

 

“指示器顶对齐(写)”帮助文档:

设置指示器是否位于标签顶部,如果为真则会出现在标签顶部。

 

“指示器颜色(写)”帮助文档:

设置指示器颜色,可使用“颜色类”中定义的常量值。

 

代码编写如下图:

“按钮1”被点击后,分别设置这六个属性值。

注意:“指示器宽度”“指示器对齐标签宽度”属性二选一。

 

运行效果如下图(GIF):

最后可看到指示器从标签底部来到了标签顶部,并且颜色样式都发生了变化。

 

 

● 指示器上外边距(读)
● 指示器下外边距(读)
● 指示器右外边距(读)
● 指示器左外边距(读)

 

帮助说明:

以上四个读属性,分别读取指示器“上下左右”四个方向外边距。

注意:单位为像素。

 

代码编写如下图:

使用这四个读属性之前,务必保证设置了“外边距”,如果未设置读取时将返回0。

注意:设置的外边距单位为DP,读取时返回的是像素单位。

在不同设备下,设置的DP单位和返回的像素单位数值并不保证一致。

 

运行效果如下图(GIF):

在当前设备下设置10DP单位,返回15像素,不同设备下可能有所差异。

 

 

● 现行选中项(读写)

 

“现行选中项(写)”帮助文档:

设置当前选择夹的现行选中项,本属性会使用默认切换动画。

属性值为选择夹索引,从0开始。

同名读属性,即读取当前的现行选中项。

 

代码编写如下图:

“按钮1”被点击后,设置当前属性值,并将其读取出来。

 

运行效果如下图(GIF):

可看到跳转到了第三个容器。

 

 

● 标签数量(读)

 

帮助文档如下图:

本读属性,用来读取高级选择夹标签数量。

 

代码编写如下图:

调用当前读属性,直接读取后显示在提示信息框中。

 

运行效果如下图:

 

 

● 文本大写(写)

 

帮助文档如下图:

本写属性可将标题中的小写英文字母转换为大写。

属性值为真则转换大写,否则不进行转换。

 

代码编写如下图:

“通知_被创建”下设置本属性值为真。

修改“选择夹标题”数组,输入小写英文标题。

 

运行效果如下图(GIF):

可看到小写英文都变成了大写英文的。