LayaAir UI 组件 # HSlider,VSlider(水平/垂直滑动条)

我不是女神ヾ 2022-04-10 06:59 344阅读 0赞

**目录**

HSlider 组件

默认资源

VSlider 组件

自定义资源

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

# HSlider 组件 #

<table> 
 <tbody> 
  <tr> 
   <td>Package</td> 
   <td>laya.ui</td> 
  </tr> 
  <tr> 
   <td>类</td> 
   <td>public class HSlider</td> 
  </tr> 
  <tr> 
   <td>Inheritance</td> 
   <td>HSlider <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122815143961">Slider <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122815143961">Component <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122815143961">Sprite <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122815143961">Node <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122815143961">EventDispatcher <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122815143961"> Object</td> 
  </tr> 
 </tbody> 
</table>

1、[HSlider ][HSlider]与 VSlider 组件都是 Slider 组件的子类，分别表示横向滑动条与纵向滑动条。用户可以通过在滑块轨道之间移动滑块来选择值。常用于如播放器进度控制、音量大小控制，一些UI上的数值调整等。

2、HSlider 组件采用水平方向，滑块轨道从左向右扩展，而显示滑动块位置数值的标签位于轨道的上部，可隐藏。

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Property（属性）</th> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#allowClickBack" rel="nofollow">allowClickBack</a> : Boolean ，一个布尔值，指定是否允许通过点击滑动条改变 Slider 的 value 属性值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#bar" rel="nofollow">bar</a> : Button&nbsp;，[read-only] 表示滑块按钮的引用。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#changeHandler" rel="nofollow">changeHandler</a> : Handler&nbsp; ，数据变化处理器。 默认回调参数为滑块位置属性 value属性值：Number 。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#isVertical" rel="nofollow">isVertical</a> : Boolean = true&nbsp; ，一个布尔值，指示是否为垂直滚动。如果值为true，则为垂直方向，否则为水平方向。 默认值为：<span style="color:#f33b45;">false</span>。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#max" rel="nofollow">max</a> : Number ，获取或设置表示最高位置的数字。 默认值为100。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#min" rel="nofollow">min</a> : Number&nbsp; ，获取或设置表示最低位置的数字。 默认值为0。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#showLabel" rel="nofollow">showLabel</a> : Boolean = true ，一个布尔值，指示是否显示标签。不写时默认会显示标签(滑动的当前值)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#sizeGrid" rel="nofollow">sizeGrid</a> : String <p>当前实例的背景图（ Image ）和滑块按钮（ Button ）实例的有效缩放网格数据。 数据格式："上边距,右边距,下边距,左边距,是否重复填充(值为0：不重复填充，1：重复填充)"，以逗号分隔。 例如："4,4,4,4,1"</p> </td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#skin" rel="nofollow">skin</a> : String <p>对象的皮肤地址，以字符串表示。 如果资源未加载，则先加载资源，加载完成后应用于此对象。 注意：资源加载完成后，会自动缓存至资源库中。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#tick" rel="nofollow">tick</a> : Number ，滑动的刻度值，滑动数值为tick的整数倍。默认值为1。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#value" rel="nofollow">value</a> : Number&nbsp; ，获取或设置表示当前滑块位置的数字。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th colspan="2">Method（方法）</th> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.HSlider#HSlider%28%29" rel="nofollow">HSlider</a>(skin:String = null)</p> <p>创建一个 HSlider 类实例。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#destroy%28%29" rel="nofollow">destroy</a>(destroyChild:Boolean = true):void&nbsp; ，[override] inheritDoc</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Slider#setSlider%28%29" rel="nofollow">setSlider</a>(min:Number, max:Number, value:Number):void&nbsp; ，设置滑动条的信息。</p> </td> 
  </tr> 
 </tbody> 
</table>

更多 API 查看：[https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Slider][https_layaair.ldc.layabox.com_api_category_UI_class_laya.ui.Slider]

**皮肤规范**

1、HSlider 资源命名规以 hsliser 为前缀名，它的默认资源总共3个，分别为滑块资源 hslider$bar.png、进度条资源 hslider$progress.png 及底图资源 hsliser.png。

2、资源至少应当有两个，一个底图资源，一个滑块资源，否则无法实现滑动功能。缺少了进度条资源组件不会报错，只是不显示进度。  
![20181228150705255.gif][]

3、本文使用 LayaAir IDE 2.0.0beta5 版本，系统默认提供的 HSlider 与 VSlider 资源都只有底图资源与滑块资源，没有进度条资源。如果这些默认样式无法满足需求，则自己可以进行 PS，然后添加进行即可。

## 默认资源 ##

//初始化引擎，设置宽高并开启WebGL渲染模式
    Laya.init(600, 400, Laya.WebGL);
    Laya.stage.bgColor = "#FFF";//设置舞台背景颜色
    var hslider;//水平滑动条对象
    var label_Info;//标签对象
    
    //加载系统默认的图集资源，加载成功后执行onLoad回调方法
    Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, onLoaded));
    function onLoaded() {
        //创建水平滑动条对象，参数为皮肤地址(使用系统默认的进度条资源)，也可以用 skin 属性设置
        hslider = new Laya.HSlider("comp/hslider.png");
        hslider.width = 300;//滑动条宽度 300 px
        hslider.pos(10, 20);//显示位置
        hslider.min = 0;//获取或设置表示最低位置的数字。 默认值为0
        hslider.max = 120;//获取或设置表示最高位置的数字。 默认值为100
        hslider.value = 50;//获取或设置表示当前滑块位置的数字
        hslider.tick = 2;//滑动的刻度值，滑动数值为tick的整数倍。默认值为1
        hslider.bar.size(30,30);//设置滑块按钮大小
        Laya.stage.addChild(hslider);//添加到舞台显示
    
        /**
         * changeHandler:数据变化处理器
         * 默认回调参数为滑块位置属性 value  
         */
        hslider.changeHandler = new Laya.Handler(this, function (value) {
            label_Info.text = "滑动：" + hslider.value;
        });
    
        showInfo();
    }
    
    //显示一个标签用于描述当前滑动的进度
    function showInfo() {
        label_Info = new Laya.Label();
        label_Info.text = "滑动：" + hslider.value;
        label_Info.fontSize = 25;
        label_Info.color = "#252525";
        label_Info.pos(150, 50);
        Laya.stage.addChild(label_Info);
    }

![20181228155609656.gif][]

1、如上所示使用的系统默认提供的资源，如果想自定义可以参考《[自定义进度条资源][Link 1]》

# VSlider 组件 #

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

1、使用 [VSlider ][VSlider]控件，用户可以通过在滑块轨道上移动滑块来选择值。

2、VSlider 控件采用垂直方向，滑块轨道从下往上扩展，而标签位于轨道的左右两侧。

3、它的原理与上面的 HSlider 完全一样，编码也完全一样，因为它们都是继承 Silder，只需 [isVertical][] = true 指定为垂直滑动条，然后皮肤使用垂直皮肤即可。

4、这里采用 PS 随便画两张来进行演示，不再使用系统默认提供的资源。以 vslider\_为前缀的资源自动识别为垂直滑动条，可以从参考《[LayaAir 快捷键设置与资源命名规则][LayaAir]》

5、[VSlider ][VSlider]资源命名规以 [vslider ][VSlider]为前缀名，它的默认资源总共3个，分别为滑块资源 [vslider][VSlider]$bar.png、进度条资源 [vslider ][VSlider]$progress.png 及底图资源 [vslider][VSlider].png。

6、资源至少应当有两个，一个底图资源，一个滑块资源，否则无法实现滑动功能。缺少了进度条资源组件不会报错，只是不显示进度。

## 自定义资源 ##

![2018122816374130.gif][]

1、准备滑动条底图与滑动按钮，按钮采用一种状态值的形式，不进行切分，命名符合规范。尺寸没有强制要求，因为代码中可以修改大小。上面 vslider\_me$bar.png 为 20 \* 60，vslider\_me.png 为 20 \* 100。

//初始化引擎，设置宽高并开启WebGL渲染模式
    Laya.init(600, 400, Laya.WebGL);
    Laya.stage.bgColor = "#FFF";//设置舞台背景颜色
    var hslider;//水平滑动条对象
    var label_Info;//标签对象
    
    var data = [];//存放自定义滑动条皮肤
    data.push("ui/vslider_me.png");//滑动条底图
    data.push("ui/vslider_me$bar.png");//滑动条按钮
    
    //加载自定义的皮肤资源，加载成功后执行onLoad回调方法
    Laya.loader.load(data, Laya.Handler.create(this, onLoaded));
    function onLoaded() {
        //同样创建水平滑动条对象，使用自定义垂直滑动条皮肤，也可以用 skin 属性设置
        hslider = new Laya.HSlider(data[0]);
        hslider.height = 300;//滑动条高度 300 px
        hslider.pos(50, 30);//显示位置
        hslider.min = 0;//获取或设置表示最低位置的数字。 默认值为0
        hslider.max = 120;//获取或设置表示最高位置的数字。 默认值为100
        hslider.value = 50;//获取或设置表示当前滑块位置的数字
        hslider.tick = 1;//滑动的刻度值，滑动数值为tick的整数倍。默认值为1
        /**
         * bar 属性获取滑动按钮，然后设置按钮的状态值，1 表示图片不做切割，按钮的皮肤状态只有一种
         */
        hslider.bar.stateNum = 1;//设置滑块按钮大小
        hslider.isVertical = true;//设置滑动条为垂直滑动条
        Laya.stage.addChild(hslider);//添加到舞台显示
    
        /**
         * changeHandler:数据变化处理器
         * 默认回调参数为滑块位置属性 value  
         */
        hslider.changeHandler = new Laya.Handler(this, function (value) {
            label_Info.text = "音量:" + hslider.value;
        });
    
        showInfo();
    }
    
    //显示一个标签用于描述当前滑动的进度
    function showInfo() {
        label_Info = new Laya.Label();
        label_Info.text = "音量：" + hslider.value;
        label_Info.fontSize = 25;
        label_Info.color = "#252525";
        label_Info.pos(150, 50);
        Laya.stage.addChild(label_Info);
    }

![20181228164110539.gif][]

示例使用资源图片：

![20181228164138663.png][]

![20181228164134512.png][]

[HSlider]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.HSlider
[https_layaair.ldc.layabox.com_api_category_UI_class_laya.ui.Slider]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Slider
[20181228150705255.gif]: /images/20220402/e23ecbf044fb4f619e5703fa4f3d97be.png
[20181228155609656.gif]: /images/20220402/834f722a54d243ddb6879bcd5ac286e2.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
[VSlider]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.VSlider
[isVertical]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Slider#isVertical
[LayaAir]: https://blog.csdn.net/wangmx1993328/article/details/85245444
[2018122816374130.gif]: /images/20220402/c836d3d9cc604e71925e8e367de24eda.png
[20181228164110539.gif]: /images/20220402/07ff0577beb7474eab67c62c7c19d3f8.png
[20181228164138663.png]: /images/20220402/23e44b1887084ccdaa2762b3d832ccb1.png
[20181228164134512.png]: /images/20220402/aef5c48943a645fb93aef0bc60f6aba1.png