LayaAir UI 组件 # RadioGroup 单选框按钮组

青旅半醒 2022-04-01 03:58 563阅读 0赞

**目录**

RadioGroup 组件

编码示例

系统默认资源

自定义资源

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

# RadioGroup 组件 #

1、[lala.ui.RadioGroup][][ ][lala.ui.RadioGroup]是单选框按钮组，按钮组之内的组件选项互相排斥，用户每次只能选择一个单选框（[laya.ui.Radio][]）组件。

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

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

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

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Property（属性）</th> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#direction" rel="nofollow">direction</a> : String&nbsp; ，布局方向。 默认值为"horizontal"。 取值： "horizontal"：表示水平布局。 "vertical"：表示垂直布局。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#labelBold" rel="nofollow">labelBold</a> : Boolean ，表示按钮文本标签是否为粗体字。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#labelColors" rel="nofollow">labelColors</a> : String</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#labelFont" rel="nofollow">labelFont</a> : String ，表示按钮文本标签的字体名称，以字符串形式表示。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#labelPadding" rel="nofollow">labelPadding</a> : String&nbsp; ，表示按钮文本标签的边距。 格式："上边距,右边距,下边距,左边距"。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#labels" rel="nofollow">labels</a> : String ，标签集合字符串。以逗号做分割，如"item0,item1,item2,item3,item4,item5"。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#labelSize" rel="nofollow">labelSize</a> : int&nbsp; ，表示按钮文本标签的字体大小。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#labelStroke" rel="nofollow">labelStroke</a> : Number&nbsp; ，描边宽度（以像素为单位）。 默认值0，表示不描边。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#labelStrokeColor" rel="nofollow">labelStrokeColor</a> : String&nbsp; ，描边颜色，以字符串表示。 默认值为 "#000000"（黑色）;</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#selectedIndex" rel="nofollow">selectedIndex</a> : int&nbsp; ，表示当前选择的项索引。默认值为-1。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#selectHandler" rel="nofollow">selectHandler</a> : Handler&nbsp; ，改变 Group 的选择项时执行的处理器，(默认返回参数： 项索引（index:int）)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#selection" rel="nofollow">selection</a> : ISelect&nbsp; ，获取或设置当前选择的项对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#skin" rel="nofollow">skin</a> : String&nbsp; 。对象的皮肤地址，以字符串表示。 如果资源未加载，则先加载资源，加载完成后应用于此对象。 注意：资源加载完成后，会自动缓存至资源库中。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#space" rel="nofollow">space</a> : Number&nbsp; ，项对象们之间的间隔（以像素为单位）。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#stateNum" rel="nofollow">stateNum</a> : int&nbsp; ，表示按钮的状态值，以数字表示，默认为3态。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=UI&amp;class=laya.ui.UIGroup#strokeColors" rel="nofollow">strokeColors</a> : String&nbsp; ，表示各个状态下的描边颜色。</td> 
  </tr> 
 </tbody> 
</table>

更多 API 参考官网：[https://layaair.ldc.layabox.com/api/index.html?category=UI&class=laya.ui.UIGroup][UIGroup]

# 编码示例 #

## 系统默认资源 ##

1、RadioGroup 属于基础组件，皮肤以 [RadioGroup\_ 为前缀进行命名][RadioGroup_]，在皮肤设计规范方面，是竖向等分的两态图或三态图。

2、默认是三态图，如果设计的是两态图，则使用 [stateNum][] 属性等于 2 即可。

![20181229100724194.gif][]

3、这里使用系统提供的默认单选框资源 radiogroup.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 radioGroup = new Laya.RadioGroup();
        /**
         * 单选框组的布局方向：horizontal(水平布局)、vertical(垂直布局)、默认为 horizontal
         * 1、vertical 可以简写为 v，horizontal 可以简写为 h
         * 2、资源图采用上中下、上下设计即可，组件会自动切分，返回进行水平或者垂直布局
         */
        radioGroup.direction = "vertical";
        //对象的皮肤地址，以字符串表示。 如果资源未加载，则先加载资源，加载完成后应用于此对象。 注意：资源加载完成后，会自动缓存至资源库中
        radioGroup.skin = "comp/radiogroup.png";
        radioGroup.labels = "Java,IOS,Android";//标签集合字符串。以逗号做分割，如"item0,item1,item2,item3,item4,item5"
        radioGroup.labelColors = "#f00,#0f0,#00f";//设置单选按钮文本标签的颜色，格式："选中前,鼠标悬停时,选中后"
        radioGroup.labelSize = 20;//按钮文本标签的字体大小
        radioGroup.labelBold = true;//是否粗体
        radioGroup.labelPadding = "0,0,0,5";//设置按钮文本标签的边距。 格式："上边距,右边距,下边距,左边距"
        radioGroup.space = 20;//label选项之间的间隔（以像素为单位）
        radioGroup.pos(20, 30);//组件显示位置
        Laya.stage.addChild(radioGroup);//添加到舞台显示
    
        radioGroup.selectHandler = new Laya.Handler(this, function (index) {
            // radioGroup.selectedIndex ：当前选择的项索引,默认值为-1。回调函数 index 同样表示当前选择的索引，都是从 0 开始
            label_Info.text = "当前选中第 " + (radioGroup.selectedIndex + 1) + " 项 " + radioGroup.labels.split(",")[index];
        });
        showInfo();
    }
    
    //显示一个标签用于描述当前滑动的进度
    function showInfo() {
        label_Info = new Laya.Label();
        label_Info.fontSize = 25;
        label_Info.color = "#fff";
        label_Info.pos(150, 50);
        Laya.stage.addChild(label_Info);
    }

![20181229162125601.gif][]

/**
         * 单选框组的布局方向：horizontal(水平布局)、vertical(垂直布局)、默认为 horizontal
         * 2、资源图采用上中下、上下设计即可，组件会自动切分，返回进行水平或者垂直布局
         */
        radioGroup.direction = "horizontal";

当使用水平布局时：

![20181229162500701.gif][]

## 自定义资源 ##

1、RadioGroup 属于基础组件，皮肤以 [RadioGroup\_ 为前缀进行命名][RadioGroup_]

2、和其它组件如[自定义进度条资源][Link 1]一样，如果需要在编辑模式打包为图集使用时，则自定义组件需要符合命名规范，但是如果是直接将资源复制到 bin 目录下时，则命名没有要求。

![20181229164442134.gif][]

3、如上所示放在了 bin/ui 目录下，这样强调一下，单选框按钮的尺寸必须在设计的时候就要确定好，代码中没有提供 API 来修改按钮的尺寸，只可以修改按钮的标签文档。自定义的 radiogroup\_me.png 为 45 \* 135 px。

//初始化引擎，设置宽高并开启WebGL渲染模式
    Laya.init(1080, 1920, Laya.WebGL);
    // Laya.stage.bgColor = "#FFF";//设置舞台背景颜色
    
    var label_Info;//标签对象
    
    //加载系自定义资源，加载成功后执行onLoad回调方法
    Laya.loader.load("ui/radiogroup_me.png", Laya.Handler.create(this, onLoaded));
    function onLoaded() {
        /**创建一个新的 Group 类实例,直接使用空构造器
         * 其中labels 与 skin 属于属性赋值，不用构造器
         */
        var radioGroup = new Laya.RadioGroup();
        /**
         * 单选框组的布局方向：horizontal(水平布局)、vertical(垂直布局)、默认为 horizontal
         * 2、资源图采用上中下、上下设计即可，组件会自动切分，返回进行水平或者垂直布局
         */
        radioGroup.direction = "horizontal";
        //对象的皮肤地址，以字符串表示。 如果资源未加载，则先加载资源，加载完成后应用于此对象。 注意：资源加载完成后，会自动缓存至资源库中
        radioGroup.skin = "ui/radiogroup_me.png";
        radioGroup.labels = "Java,IOS,Android";//标签集合字符串。以逗号做分割，如"item0,item1,item2,item3,item4,item5"
        radioGroup.labelColors = "#f00,#0f0,#00f";//设置单选按钮文本标签的颜色，格式："选中前,鼠标悬停时,选中后"
        radioGroup.labelSize = 20;//按钮文本标签的字体大小
        radioGroup.labelBold = true;//是否粗体
        radioGroup.labelPadding = "8,0,0,5";//设置按钮文本标签的边距。 格式："上边距,右边距,下边距,左边距"
        radioGroup.space = 20;//label选项之间的间隔（以像素为单位）
        radioGroup.pos(20, 30);//组件显示位置
        Laya.stage.addChild(radioGroup);//添加到舞台显示
    
        radioGroup.selectHandler = new Laya.Handler(this, function (index) {
            // radioGroup.selectedIndex ：当前选择的项索引,默认值为-1。回调函数 index 同样表示当前选择的索引，都是从 0 开始
            label_Info.text = "当前选中第 " + (radioGroup.selectedIndex + 1) + " 项 " + radioGroup.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);
    }

![20181229164905494.gif][]

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

[lala.ui.RadioGroup]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.RadioGroup
[laya.ui.Radio]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Radio
[UIGroup]: https://layaair.ldc.layabox.com/api/index.html?category=UI&class=laya.ui.UIGroup
[RadioGroup_]: https://blog.csdn.net/wangmx1993328/article/details/85245444#h3-3-1-
[stateNum]: https://layaair.ldc.layabox.com/api/index.html?category=UI&class=laya.ui.UIGroup#stateNum
[20181229100724194.gif]: /images/20220401/017895440cbf4b88851c258125fd21f8.png
[20181229162125601.gif]: /images/20220401/1359ff2e37a343f48829a1f9f9062e3b.png
[20181229162500701.gif]: /images/20220401/d02b2450eac2469ca66ecd11ce7a01d9.png
[Link 1]: https://blog.csdn.net/wangmx1993328/article/details/85320627#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%9B%E5%BA%A6%E6%9D%A1%E8%B5%84%E6%BA%90
[20181229164442134.gif]: /images/20220401/d3d61ee2d6714984abc9c544474cd52f.png
[20181229164905494.gif]: /images/20220401/148ddf6ee7cc45d8a3de9387375a439a.png
[https_layaair.ldc.layabox.com_demo_category_2d_group_UI_name_RadioGroup]: https://layaair.ldc.layabox.com/demo/?category=2d&group=UI&name=RadioGroup