侧滑容器组件实例讲解

作者:创世魂

 

● 辅助说明

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

 

● 准备工作

 

打开“侧滑容器”的帮助页,仔细阅读以下内容。

务必注意第1、2条的信息。

打开界面设计器,设计如下信息。

1、在“扩展容器组件”里面找到侧滑容器,拖放到设计器中,并设置其组件的高度宽度为“匹配父”

2、在此组件内拖放一个“线性布局器”同样设置其组件的高度宽度为“匹配父”

3、修改布局器的名字为“首页布局”

4、此时可开始设计首页布局,例如:放置一个按钮。

5、设计完首页布局后,将其宽度随意设置一个数值,保留右侧空白区域。

6、放置两个线性布局器,分别起名“左侧布局”“右侧布局”,并设置“子布局侧滑方向”属性,以及其宽度尺寸。

7、设置完成后,就可以开始设计“左侧布局”“右侧布局”的内容。

8、最后保存布局,修改布局颜色以便区分。

9、运行效果如下图(GIF)

设计完毕后的布局,默认就直接支持从屏幕最左侧或最后侧滑出布局内容。

注意:部分全面屏手机因设置全面屏手势的缘故,可能侧滑位置有所不同。

以小米手机为例,想要侧滑出以下内容,必须要在屏幕上半部分的左侧进行侧滑。

没有开启全面屏手势的手机,只要是屏幕最左/右侧的位置都可以侧滑出来。

 

● 主页淡出颜色(写)

 

帮助文档如下图:

通过本属性可设置布局侧滑时,主页布局被什么颜色覆盖,默认为一种带有透明度的黑色。

 

代码编写如下图:

“按钮1”被点击后调用本属性,设置颜色为白色。

 

运行效果如下图(GIF):

侧滑后首页就会呈现白色。

 

● 锁定模式(写)

 

帮助文档如下图:

设置本属性后,可以将侧滑容器的侧滑方式锁定。

如果两种侧滑布局都存在,则都会锁定。

调用方式:“侧滑容器锁定模式.XXX”

 

代码编写如下图:

“按钮1”被点击后执行本属性设置属性值为“侧滑容器锁定模式.锁定关闭”

设置此属性后,将无法通过手势开启侧滑,只能调用“展开()”方法展开侧滑。

 

运行效果如下图(GIF):

最终可看到,通过手势侧滑无法打开侧滑布局。

 

● 展开
● 关闭

 

“展开”帮助文档:

顾名思义,调用本方法可直接展开侧滑容器,展开方向有参数1决定。

参数1:调用方式“侧滑容器滑动方向.XX”

参数2:是否执行动画,默认为真,可忽略。

 

“关闭”帮助文档:

顾名思义,调用本方法课关闭侧滑容器,关闭方向由参数1决定。

参数1:调用方式“侧滑容器滑动方向.XX”

参数2:是否带关闭动画,默认为真可忽略。

 

代码编写如下图:

“按钮1”被点击后调用“展开()”方法展开左侧布局。

“按钮2”被点击后调用“关闭()”方法关闭左侧布局。

 

运行效果如下图(GIF):

可以看到当“按钮1”被点击后左侧布局会被打开。

“左侧布局”中的按钮被点击后,左侧布局会关闭。

 

● 展开布局
● 关闭布局
● 被展开(事件)
● 被关闭(事件)

 

“展开布局”帮助文档:

本方法和“展开()”不同之处在于,本方法操作的参数是“线性布局器”

 

“关闭布局”帮助文档:

本方法和“关闭()”不同之处在于,本方法操作的参数是“线性布局器”

 

“被展开(事件)”帮助文档:

当侧滑容器被展开后会触发本事件,返回被展开的布局器组件。

 

“被关闭(事件)”帮助文档:

当侧滑容器被关闭后会触发本事件,返回被关闭后的布局器组件。

 

代码编写如下图:

1、“按钮1”被点击后,调用“展开布局()”方法展开右侧布局。

2、“按钮3”被点击后,调用“关闭布局()”方法关闭。

3、分别添加“被展开”“被关闭”事件,在事件下判断布局对象并弹出对应提示。

 

运行效果如下图(GIF):

可以看到当布局被展开和关闭的时候,对应的提示也弹出。

 

● 关闭所有布局

 

帮助文档如下图:

调用本方法,无论左侧布局还是右侧布局都可以进行关闭,此方法适合不知道哪个布局被打开时使用。

 

代码编写如下图:

“按钮2”“按钮3”被点击后分别调用本方法,进行关闭操作。

 

运行效果如下图(GIF):

最后可以看到,两个布局都被正常关闭。

 

● 是否已展开

 

帮助文档如下图:

通过本方法可判断指定方向的侧滑容器是否被打开。

参数1:调用方式“侧滑容器滑动方向.XX”

 

代码编写如下图:

“按钮1”被点击后调用本方法判断左侧布局。

 

运行效果如下图(GIF):

最后可看到左侧布局提示被关闭。

 

● 取布局锁定模式
● 置布局锁定模式

 

“取布局锁定模式”帮助文档:

通过本方法可取出指定布局的锁定模式。

注意:参数只能填写左侧布局或者右侧布局。

 

“置布局锁定模式”帮助文档:

通过本方法可设置指定布局的侧滑锁定模式。

参数1:填写要锁定的布局,只能是左侧或者右侧布局。

参数2:调用方式“侧滑容器锁定模式.XXX”

 

代码编写如下图:

“按钮1”被点击后,调用“置布局锁定模式()”方法锁定左侧布局,并随后调用“取布局锁定模式()”方法判断左侧布局。

 

运行效果如下图(GIF):

最后可看到弹出提示“已经锁定关闭,用户无法通过滑动来展开”,证明锁定成功。

 

● 置方向锁定模式
● 取方向锁定模式

 

“置方向锁定模式”帮助文档:

本方法和“置布局锁定模式()”方法不同之处在于,本方法是通过“侧滑容器滑动方向”来进行锁定。

参数1:调用方式“侧滑容器锁定模式.XX”

参数2:调用方式“侧滑容器滑动方向.XX”

 

“取方向锁定模式”帮助文档:

调用本方法可判断指定侧滑方向的锁定模式。

返回值为“侧滑容器锁定模式”类。

 

代码编写如下图:

“按钮1”被点击后,锁定左侧布局为展开,随后调用“取方向锁定模式()”判断其锁定模式。

 

运行效果如下图(GIF):

最终设置锁定模式为展开后首先会展开左侧布局,并弹出“已锁定展开,无法通过滑动来关闭”

 

● 是否已展开布局

 

帮助文档如下图:

本方法和“是否已展开”方法不同之处在于,本方法的参数是“线性布局器”

参数1:提供左侧或者右侧容器的布局器名称。

 

代码编写如下图:

“按钮1”被点击后调用本方法判断“左侧布局”,并弹出对应提示。

 

运行效果如下图(GIF):

最终弹出“没有展开”

 

● 加入侧滑布局

 

帮助文档如下图:

顾名思义,通过本方法可动态添加侧滑容器。

如果已经在设计器里面添加过,则不能使用本方法,否则会引起软件崩溃。

所以想要使用本方法务必保证界面设计器里面没有添加过侧滑组件。

参数1:要添加的侧滑容器组件,必须为线性布局器。

参数2:调用方式“侧滑容器滑动方向.XXX”

 

代码编写如下图:

1、新建一个方法(Ctrl+M),起名为“创建左侧布局”,并填写返回值“线性布局器”

2、定义一个类型为“线性布局器”“文本框”的变量,用作侧滑容器的组件,并设置文本框的属性信息。

3、设置“左侧布局”的尺寸,将文本框添加到左侧布局中。

4、最后设置文本框的尺寸,并返回“左侧布局”

5、添加“通知_被创建”虚拟方法,调用“加入侧滑布局()”方法,填写对应参数,创建左侧侧滑容器。

6、“按钮1”被点击后展开左侧容器。

 

运行效果如下图(GIF):

最终可以看到动态创建的左侧布局被弹出。

 

● 被滑动(事件)

 

帮助文档如下图:

顾名思义,当侧滑容器开始滑动的时候会不断触发本事件,直到滑动结束才会停止。

 

代码编写如下图:

1、调用“展开()”方法展开左侧容器。

2、调添加“被滑动”事件后首先取出“屏幕度量信息类”对象,通过此对象来获取屏幕宽度高度信息。

3、通过“首页布局”调用“置布局位置()”方法,在滑动过程中实时设置首页布局位置。

置布局位置共四个参数,说明如下:

参数1:提供移动后的左边位置。

参数2:提供移动后的顶边位置

参数3:提供移动后的右边位置。

参数4:提供移动后的下面位置。

因本事件会不断触发直到侧滑完毕,所以以上参数会不断更新,以实现不同的移动效果。

 

运行效果如下图(GIF):

最终可看到,在侧滑容器被展开后,首页布局整体跟随向右移动。