Tab 组件

Tab 组件用于定义选项卡按钮组，例如多页面切换显示。

Tab 组件的皮肤是以 tab 或以 tab_ 为前缀进行命名，在皮肤设计规范方面，是竖向等分的两态图或三态图。

Tab 组件的皮肤无法使用九宫格属性，所以要在资源设计的时候就确定好实际应用时的大小

Package	laya.ui
类	public class Tab
Inheritance	Tab UIGroup Box Component Sprite Node EventDispatcher Object

RadioGroup、Tab 都是 UIGroup 的子类，属性和方法都是继承自父类 UIGroup ，自己本身没有定义

编码示例

编码与《LayaAir UI 组件 # RadioGroup 单选框按钮组》完全一致。

默认资源

如上所示的 tab.png 是默认提供的资源。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(1080, 1920, Laya.WebGL);
// Laya.stage.bgColor = "#FFF";//设置舞台背景颜色

var label_Info;//标签对象

//加载系统默认图集资源，加载成功后执行onLoad回调方法
Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, onLoaded));
function onLoaded() {
    /**创建一个新的 Group 类实例,直接使用空构造器
     * 其中labels 与 skin 属于属性赋值，不用构造器
     */
    var tab = new Laya.Tab();
    /**
     * 单选框组的布局方向：horizontal(水平布局)、vertical(垂直布局)、默认为 horizontal
     * 2、资源图采用上中下、上下设计即可，组件会自动切分，返回进行水平或者垂直布局
     */
    tab.direction = "horizontal";
    //对象的皮肤地址，以字符串表示。 如果资源未加载，则先加载资源，加载完成后应用于此对象。 注意：资源加载完成后，会自动缓存至资源库中
    tab.skin = "comp/tab.png";
    tab.labels = "Java,IOS,Android";//标签集合字符串。以逗号做分割，如"item0,item1,item2,item3,item4,item5"
    tab.labelColors = "#f00,#0f0,#00f";//设置单选按钮文本标签的颜色，格式："选中前,鼠标悬停时,选中后"
    tab.labelSize = 20;//按钮文本标签的字体大小
    tab.labelBold = true;//是否粗体
    // tab.labelPadding = "0,0,0,0";//设置按钮文本标签的边距。 格式："上边距,右边距,下边距,左边距"
    // tab.space = 20;//label选项之间的间隔（以像素为单位）
    tab.pos(20, 30);//组件显示位置
    tab.width = 500;
    Laya.stage.addChild(tab);//添加到舞台显示

    tab.selectHandler = new Laya.Handler(this, function (index) {
        // tab.selectedIndex ：当前选择的项索引,默认值为-1。回调函数 index 同样表示当前选择的索引，都是从 0 开始
        label_Info.text = "当前选中第 " + (tab.selectedIndex + 1) + " 项 " + tab.labels.split(",")[index];
    });
    showInfo();
}

//显示一个标签用于描述当前滑动的进度
function showInfo() {
    label_Info = new Laya.Label();
    label_Info.fontSize = 25;
    label_Info.color = "#fff";
    label_Info.pos(100, 100);
    Laya.stage.addChild(label_Info);
}

自定义资源

1、自己 PS 了一张 tab_me.png 资源，尺寸必须根据实际需要提取设计好，因为代码中无法修改大小，tab_me.png 尺寸为 200 * 240.

2、这里选择进行将资源管理器下 ui 目录按 F12 进行图集打包，这样代码模式下 bin/atlas 下就会打包 ui目录为 ui.atlas 与 ui.png 了。不清楚可以参考《LayaAir 图集动画2—动画运用》

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(1080, 1920, Laya.WebGL);
// Laya.stage.bgColor = "#FFF";//设置舞台背景颜色

var label_Info;//标签对象

//加载自定义图集资源，加载成功后执行onLoad回调方法
Laya.loader.load("res/atlas/ui.atlas", Laya.Handler.create(this, onLoaded));
function onLoaded() {
    /**创建一个新的 Group 类实例,直接使用空构造器
     * 其中labels 与 skin 属于属性赋值，不用构造器
     */
    var tab = new Laya.Tab();
    /**
     * 单选框组的布局方向：horizontal(水平布局)、vertical(垂直布局)、默认为 horizontal
     * 2、资源图采用上中下、上下设计即可，组件会自动切分，返回进行水平或者垂直布局
     */
    tab.direction = "horizontal";
    //对象的皮肤地址，以字符串表示。 如果资源未加载，则先加载资源，加载完成后应用于此对象。 注意：资源加载完成后，会自动缓存至资源库中
    tab.skin = "ui/tab_me.png";//自定义的 tab_me.png 打包在了图集 ui.atlas 中的,也可以直接放在 bin目录下，不进行图集打包也是可以的
    tab.labels = "Java,IOS,Android,React";//标签集合字符串。以逗号做分割，如"item0,item1,item2,item3,item4,item5"
    tab.labelColors = "#000,#0f0,#fff";//设置单选按钮文本标签的颜色，格式："选中前,鼠标悬停时,选中后"
    tab.labelSize = 30;//按钮文本标签的字体大小
    tab.labelBold = true;//是否粗体
    // tab.labelPadding = "0,0,0,0";//设置按钮文本标签的边距。 格式："上边距,右边距,下边距,左边距"
    // tab.space = 20;//label选项之间的间隔（以像素为单位）
    tab.pos(20, 30);//组件显示位置
    tab.width = 500;
    Laya.stage.addChild(tab);//添加到舞台显示

    tab.selectHandler = new Laya.Handler(this, function (index) {
        // tab.selectedIndex ：当前选择的项索引,默认值为-1。回调函数 index 同样表示当前选择的索引，都是从 0 开始
        label_Info.text = "当前选中第 " + (tab.selectedIndex + 1) + " 项 " + tab.labels.split(",")[index];
    });
    showInfo();
}

//显示一个标签用于描述当前滑动的进度
function showInfo() {
    label_Info = new Laya.Label();
    label_Info.fontSize = 25;
    label_Info.color = "#fff";
    label_Info.pos(60, 150);
    Laya.stage.addChild(label_Info);
}

示例使用资源图：

官方示例：https://layaair.ldc.layabox.com/demo/?category=2d&group=UI&name=Tab

LayaAir UI组件 # Tab 选项卡按钮组

Tab 组件

编码示例

默认资源

自定义资源

猜你喜欢