多页布局

  • 更新时间:2025-12-02 10:12:47

多页布局-pager

多页布局允许用户在里面写多个界面并实现界面左右滑动,并且支持绑定标签页布局(tab)以及导航栏(nav)

原生类型:{androidx.viewpager2.widget.ViewPager2}

一、常用属性

布局 - 多页布局

设置多页布局

其中每个'界面'最后都会被解析成一个布局,本质上就是个'线性布局'。

<多页布局 ="最大" ="最大">
    <布局 />
    <布局 />
    <布局 />
</多页布局>

默认下标 - 默认下标页面

设置默认下标页面

<多页布局 默认下标="0" />

内边距 - 内边距

设置内边距

<!--内边距顺序是:左,上,右,下-->
<!--只设置一个值:则设置所有方向的内边距-->
<!--只设置两个值:则设置左右和上下方向的内边距-->
<多页布局 内边距="0,0,0,0" />

重力 - 重力

设置重力

<多页布局 重力="开始" />

背景颜色 - 背景颜色

设置背景颜色

<多页布局 背景颜色="#1E1F22" />

背景图片 - 背景图片

设置背景图片

<多页布局 背景图片="./资源/图片01.png" />

二、常用函数

设置下标(index)

设置当前页面索引

  • 参数 : index {int} 当前页面索引

//解析界面,获得ui布局
定义 我的界面 = $界面.解析布局("./界面/主界面.xml");
//获得控件(传入"标识")
定义 多页布局 = 我的界面.找控件("我的多页布局");
//设置当前页面索引为0
多页布局.设置下标(0);

获取下标()

获得当前页面索引

  • 返回 : {int} 当前页面索引

//解析界面,获得界面布局
定义 我的界面 = $界面.解析布局("./界面/主界面.xml");
//获得控件
定义 多页布局 = 我的界面.找控件("我的多页布局");
//获得当前页面索引
定义 下标 = 多页布局.获取下标();

绑定(xTab)

绑定与标签页联动

  • 参数 : xTab {tab} 标签页布局

//解析界面,获得界面布局
定义 我的界面 = $界面.解析布局("./界面/主界面.xml");
//获得控件
定义 多页布局 = 我的界面.找控件("我的多页布局");
定义 标签页 = 我的界面.找控件("我的标签页");
//与标签页布局联动
多页布局.绑定(标签页);

绑定(xNav)

绑定与导航栏联动

  • 参数 : xNav {nav} 底部导航布局

//解析界面,获得界面布局
定义 我的界面 = $界面.解析布局("./界面/主界面.xml");
//获得控件
定义 多页布局 = 我的界面.找控件("我的多页布局");
定义 导航栏 = 我的界面.找控件("我的导航栏");
//与导航栏联动
多页布局.绑定(导航栏);

监听界面切换(回调)

监听界面切换事件

  • 参数 : 回调 {(下标)=>{}} 界面切换事件回调

//解析界面,获得界面布局
定义 我的界面 = $界面.解析布局("./界面/主界面.xml");
//获得控件
定义 多页布局 = 我的界面.找控件("我的多页布局");
//监听界面切换事件
多页布局.监听界面切换((下标)=>{
    //..
});

监听状态改变(回调)

监听状态改变事件

  • 参数 : 回调 {(状态)=>{}} 状态改变事件回调

//解析界面,获得界面布局
定义 我的界面 = $界面.解析布局("./界面/主界面.xml");
//获得控件
定义 多页布局 = 我的界面.找控件("我的多页布局");
//监听状态改变事件
多页布局.监听状态改变((状态)=>{
    //...
});