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

短命女 2022-04-01 06:53 373阅读 0赞

**目录**

Tab 组件

编码示例

默认资源

自定义资源

--------------------

# Tab 组件 #

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

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

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

<table> 
 <tbody> 
  <tr> 
   <td><strong>Package</strong></td> 
   <td>laya.ui</td> 
  </tr> 
  <tr> 
   <td><strong>类</strong></td> 
   <td>public class Tab</td> 
  </tr> 
  <tr> 
   <td><strong>Inheritance</strong></td> 
   <td>Tab <img alt="Inheritance" src="https://img-blog.csdnimg.cn/201812291659202">UIGroup <img alt="Inheritance" src="https://img-blog.csdnimg.cn/201812291659202">Box <img alt="Inheritance" src="https://img-blog.csdnimg.cn/201812291659202">Component <img alt="Inheritance" src="https://img-blog.csdnimg.cn/201812291659202">Sprite <img alt="Inheritance" src="https://img-blog.csdnimg.cn/201812291659202">Node <img alt="Inheritance" src="https://img-blog.csdnimg.cn/201812291659202">EventDispatcher <img alt="Inheritance" src="https://img-blog.csdnimg.cn/201812291659202"> Object</td> 
  </tr> 
 </tbody> 
</table>

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

# 编码示例 #

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

## 默认资源 ##

![20181229165853589.gif][]

如上所示的 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);
    }

![20181229170640952.gif][]

## 自定义资源 ##

![20181229171922858.gif][]

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

2、这里选择进行将资源管理器下 ui 目录按 F12 进行图集打包，这样代码模式下 bin/atlas 下就会打包 ui目录为 ui.atlas 与 ui.png 了。不清楚可以参考《[LayaAir 图集动画2—动画运用][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);
    }

## ![20181229172921704.gif][] ##

示例使用资源图：

![20181229172937558.png][]

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

[UIGroup]: https://layaair.ldc.layabox.com/api/index.html?category=UI&class=laya.ui.UIGroup
[LayaAir UI _ _ RadioGroup]: https://blog.csdn.net/wangmx1993328/article/details/85334607
[20181229165853589.gif]: /images/20220401/a6228c31f2a6432ea4288f24639e63db.png
[20181229170640952.gif]: /images/20220401/c9040da6a40f4f669cd193577965eca8.png
[20181229171922858.gif]: /images/20220401/8f5b0be949874d45ad404583ca4616a1.png
[LayaAir _2]: https://blog.csdn.net/wangmx1993328/article/details/85037903
[20181229172921704.gif]: /images/20220401/afc41c2e10f04d3fae3ebaaf743a360c.png
[20181229172937558.png]: /images/20220401/a5141624a4f94edf9ecef5e97ee0cdd3.png
[https_layaair.ldc.layabox.com_demo_category_2d_group_UI_name_Tab]: https://layaair.ldc.layabox.com/demo/?category=2d&group=UI&name=Tab