全屏侧滑布局器实例讲解

作者:创世魂

 

● 辅助说明

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

 

● 准备工作

 

帮助文档如下图:

1、本组件只能两个容器,左边为“左侧布局”右边的为“首页布局”

2、本组件任意位置都可手势操作弹出侧滑。

 

界面设计如下图:

1、在“扩展容器组件”中找到“全屏侧滑布局器”,将其拖放到设计器中,设置组件高度宽度为匹配父。

2、嵌套一个线性布局器组件,并同样设置组件高度宽度为匹配父。

3、此时可开始布局首页。

4、首页布局完毕后,拖放一个线性布局器在“首页布局”的前面,起名“左侧布局”,并设置宽度。

5、此时可开始布局左侧布局。

6、最终布局完毕后,结构如下图所示。

 

代码编写如下图:

保存布局后,设置“左侧布局”的背景色,方便区分。

 

帮助文档如下图(GIF):

 

● 被展开(事件)
● 被关闭(事件)
● 被滑动(事件)

 

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

当布局被展开后会触发本事件,参数返回的是“首页布局”

 

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

当布局被关闭的时候触发本事件,参数所返回的布局为“首页布局”

 

“被滑动(事件)”帮助文档:

当侧滑容器处于被滑动状态的时候,会触发本事件。

参数1:返回首页布局。

参数2:偏移量0-1之间,被展开后数值为1,关闭后数值为0。

 

代码编写如下图:

分别添加以上三个事件,并执行操作。

 

运行效果如下图(GIF):

最终可看到当侧滑容器被展开和关闭时,首页布局颜色会发生变化,并且偏移量也会显示在窗口标题上。

 

 

● 主页淡出颜色(写)

 

帮助文档如下图:

通过本属性可设置主页布局的淡出颜色,默认为透明的白色。

注意:并非真个布局都会变色。

 

代码编写如下图:

“按钮1”被点击后,设置本属性为红色。

 

运行效果如下图:

最后可看到“按钮1”点击前后,主页布局发生变化。

 

 

● 视差距离(写)
● 左侧淡出颜色(写)

 

“视差距离(写)”帮助文档:

通过本属性可设置,当侧滑布局被关闭后,布局内容左侧的距离。

如果处于滑动过程中,可以看到左侧布局内容会有移动动画效果。

 

“左侧淡出颜色(写)”帮助文档:

本属性用来设置左侧布局淡出颜色。

注意:务必为“视差距离”设置一个值,本属性才有效。

 

代码编写如下图:

“按钮1”被点击后,设置“视差距离”属性值为“50”像素,并设置“左侧淡出颜色”为红色。

 

运行效果如下图(GIF):

最终可看到“按钮1”点击前后,左侧布局的状态发生变化。

 

 

● 可否滑动(读)

 

帮助文档如下图:

顾名思义,通过本属性可判断当前侧滑容器是否可以滑动。

返回真表示可以滑动,否则返回假。

 

代码编写如下图:

“按钮1”被点击后,调用本属性判断返回值即可。

 

运行效果如下图(GIF):

最终弹出“可滑动”证明侧滑容器可正常使用。

 

● 展开
● 关闭
● 是否被展开

 

“展开”帮助文档:

调用本方法可展开侧滑容器。

 

“关闭”帮助文档:

调用本方法可关闭侧滑容器。

 

“是否被展开”帮助文档:

调用本方法可判断侧滑容器是否被展开,返回真表示展开。

 

代码编写如下图:

“按钮1”被点击后,执行“是否被展开()”方法判断返回值,并执行侧滑容器对应操作。

“按钮2”被点击,执行同样的操作。

 

运行效果如下图(GIF):

最终可看到,两个按钮被点击后,侧滑容器可以被展开和关闭。