LayaAir UI 组件 # Clip 切片、ComboBox 下拉框

逃离我推掉我的手 2022-04-02 15:36 527阅读 0赞

**目录**

Clip 切片

默认Clip 资源

自定义Clip 资源

ComboBox

编码示例

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

# Clip 切片 #

1、[Laya.ui.Clip ][Laya.ui.Clip]组件可用于显示位图切片动画，Clip 可以将一张图片，按横向分隔数量 clipX、竖向分隔数量 clipY，或横向分割每个切片的宽度 clipWidth、竖向分割每个切片的高度 clipHeight，从左向右，从上到下，分割组合为一个切片动画。

2、Clip 组件可以用来播放切片动画，和显示切片动画的某一帧图片。  
3、LayaAir 对于以 clip 前缀命令的资源自动识别为 Clip 组件。

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

4、Image 和 Clip 组件是唯一支持异步加载的两个组件，比如clip.skin = "abc/xxx.png"，其他UI组件均不支持异步加载。

<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.Clip#autoPlay" rel="nofollow">autoPlay</a> : Boolean&nbsp; &nbsp;,表示是否自动播放动画，若自动播放值为true,否则值为false; 可控制切片动画的播放、停止。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#clipHeight" rel="nofollow">clipHeight</a> : Number&nbsp; &nbsp;,竖向分割时每个切片的高度，与 clipY 同时设置时优先级高于 clipY&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#clipWidth" rel="nofollow">clipWidth</a> : Number&nbsp; &nbsp;,横向分割时每个切片的宽度，与 clipX 同时设置时优先级高于 clipX 。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#clipX" rel="nofollow">clipX</a> : int&nbsp; &nbsp;,X轴（横向）切片数量。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#clipY" rel="nofollow">clipY</a> : int&nbsp; &nbsp;,Y轴(竖向)切片数量。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#height" rel="nofollow">height</a> : Number&nbsp; &nbsp;,[override] 表示显示对象的高度，以像素为单位。 注：当值为0时，高度为自适应大小。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#index" rel="nofollow">index</a> : int&nbsp; &nbsp;,当前帧索引。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#interval" rel="nofollow">interval</a> : int&nbsp; &nbsp;,表示动画播放间隔时间(以毫秒为单位)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#isPlaying" rel="nofollow">isPlaying</a> : Boolean&nbsp; &nbsp;,表示动画的当前播放状态。 如果动画正在播放中，则为true，否则为flash。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#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.Clip#total" rel="nofollow">total</a> : int&nbsp; &nbsp;,[read-only] 切片动画的总帧数。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#width" rel="nofollow">width</a> : Number&nbsp; &nbsp;,[override] 表示显示对象的宽度，以像素为单位。 注：当值为0时，宽度为自适应大小。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Method（方法）</th> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#Clip%28%29" rel="nofollow">Clip</a>(url:String = null, clipX:int = 1, clipY:int = 1)&nbsp; &nbsp;，创建一个新的 Clip 示例。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#destroy%28%29" rel="nofollow">destroy</a>(destroyChild:Boolean = true):void</p> <p>[override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#dispose%28%29" rel="nofollow">dispose</a>():void&nbsp; &nbsp;，销毁对象并释放加载的皮肤资源。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#play%28%29" rel="nofollow">play</a>():void&nbsp; &nbsp;，播放动画。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Clip#stop%28%29" rel="nofollow">stop</a>():void&nbsp; &nbsp;，停止动画。</p> </td> 
  </tr> 
 </tbody> 
</table>

更多 API 可以参考官网：[https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Clip][https_layaair.ldc.layabox.com_api_category_UI_class_laya.ui.Clip]

## 默认Clip 资源 ##

![20181227104957152.gif][]

1、现在就以使用默认提供的 clip\_num.png 为例进行操作。

//初始化引擎，设置宽高并开启WebGL渲染模式
    Laya.init(600, 400, Laya.WebGL);
    
    var atlas_comp = "res/atlas/comp.atlas";//atlas_comp：系统默认图集资源
    var skin_clip_num = "comp/clip_num.png";//skin_clip_num：系统默认提供的切片组件
    var clip_num;//clip_num：切片组件对象
    
    //加载图集成功后，执行onLoad回调方法
    Laya.loader.load(atlas_comp, Laya.Handler.create(this, onLoaded));
    function onLoaded() {
        //创建一个新的Clip实例；clipX x方向分割个数、clipY y方向分割个数
        clip_num = new Laya.Clip(skin_clip_num, 10, 1);
        // clip_num.autoPlay = true;//autoPlay属性获取或者设置是否自动播放
        clip_num.interval = 1000;//设置动画播放间隔时间(以毫秒为单位)
        clip_num.pos(30, 10);//设置对象显示的位置
        Laya.stage.addChild(clip_num);//添加到舞台显示
        addButton();
    }
    
    var clip_index = 0;//clip_index：切片动画当前播放的帧索引(从0开始)
    //添加一个操作按钮
    function addButton() {
        //创建一个按钮实例
        var button = new Laya.Button("comp/button.png", clip_num.isPlaying?"暂 停":"播 放");
        button.labelSize = 20;//按钮文本字体大小
        button.pos(200, 10);//按钮组件显示的位置
        Laya.stage.addChild(button);//添加到舞台显示
    
        button.on(Laya.Event.CLICK, this, function () {//为按钮绑定单击事件
            if (clip_num.isPlaying) {//当切片动画在播放时
                clip_num.stop();//停止切片动画
                clip_index = clip_num.index;//获取切片动画当前帧索引，从1开始
                button.label = "播 放";//改变按钮显示的文本
            } else {
                clip_num.play();//设置当前帧索引clip_num.index必须是在 play 方法后
                clip_num.index = clip_index;//设置切片动画开始播放的帧索引，否则 play 默认从第0帧开始播放
                button.label = "暂 停";
            }
        });
    }

![20181227105239668.gif][]

## 自定义Clip 资源 ##

![2018122711551114.gif][]

1、如上所示 clip\_countDown.png 是自己用 PS 所绘制，尺寸没有强制要求，注意的是应该进行等分。

//初始化引擎，设置宽高并开启WebGL渲染模式
    Laya.init(1080, 1920, Laya.WebGL);
    Laya.stage.bgColor = "#252525";
    
    var skin_clip_num = "ui/clip_countDown.png";//skin_clip_num：自定义的切片组件
    var clip_num;//clip_num：切片组件对象
    
    //资源加载成功后，执行 onLoad 回调方法
    Laya.loader.load(skin_clip_num, Laya.Handler.create(this, onLoaded));
    function onLoaded() {
        //创建一个新的Clip实例；x方向分割10个、y方向分割1个
        clip_num = new Laya.Clip(skin_clip_num, 10, 1);
        clip_num.size(50,50);//设置切片动画对象的尺寸大小
        // clip_num.autoPlay = true;//autoPlay属性获取或者设置是否自动播放
        clip_num.interval = 1000;//设置动画播放间隔时间(以毫秒为单位)
        clip_num.pos(30, 10);//设置对象显示的位置
        Laya.stage.addChild(clip_num);//添加到舞台显示
    }
    
    //使用系统自带的按钮皮肤，先加载图集
    Laya.loader.load("res/atlas/comp.atlas",Laya.Handler.create(this,addButton));
    var clip_index = 0;//clip_index：切片动画当前播放的帧索引(从0开始)
    //添加一个操作按钮
    function addButton() {
        //创建一个按钮实例，系统默认按钮组件皮肤
        var button = new Laya.Button("comp/button.png", clip_num.isPlaying?"暂 停":"播 放");
        button.labelSize = 20;//按钮文本字体大小
        button.pos(200, 10);//按钮组件显示的位置
        Laya.stage.addChild(button);//添加到舞台显示
    
        button.on(Laya.Event.CLICK, this, function () {//为按钮绑定单击事件
            if (clip_num.isPlaying) {//当切片动画在播放时
                Laya.SoundManager.stopMusic();//停止背景音乐
                clip_num.stop();//停止切片动画
                clip_index = clip_num.index;//获取切片动画当前帧索引，从1开始
                button.label = "播 放";//改变按钮显示的文本
            } else {
                Laya.SoundManager.playMusic("http://img02.tuke88.com/preview_music/00/08/56/preview-5b835eaf13a9b9053.mp3");//播放一个背景音乐
                clip_num.play();//设置当前帧索引clip_num.index必须是在 play 方法后
                clip_num.index = clip_index;//设置切片动画开始播放的帧索引，否则 play 默认从第0帧开始播放
                button.label = "暂 停";
            }
        });
    }

![20181227120001217.gif][]

更多内容可以参考官网：[https://ldc.layabox.com/doc/?nav=zh-js-2-3-3][https_ldc.layabox.com_doc_nav_zh-js-2-3-3]

# ComboBox #

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

1、laya.ui.[ComboBox ][ComboBox]组件包含一个下拉列表，用户可以从该列表中选择单个值。

2、以 combobox\_  或者 combo\_前缀命名的组件自动识别为 下拉框 comboBox 组件。系统默认提供的下拉框组件如下图所示，combobox.png 其实和 button.png 组件很像。

![20181227142618825.gif][]

<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.ComboBox#height" rel="nofollow">height</a> : Number&nbsp; &nbsp;，[override] 表示显示对象的高度，以像素为单位。 注：当值为0时，高度为自适应大小。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#isOpen" rel="nofollow">isOpen</a> : Boolean&nbsp; &nbsp;，表示下拉列表的打开状态。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#itemColors" rel="nofollow">itemColors</a> : String&nbsp; &nbsp;，下拉列表项颜色。 格式："悬停或被选中时背景颜色,悬停或被选中时标签颜色,标签颜色,边框颜色,背景颜色"</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#itemSize" rel="nofollow">itemSize</a> : int&nbsp; &nbsp;，下拉列表项标签的字体大小。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#labelBold" rel="nofollow">labelBold</a> : Boolean&nbsp; &nbsp;，表示按钮文本标签是否为粗体字。（按钮表示未下拉时的按钮）</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#labels" rel="nofollow">labels</a> : String&nbsp; &nbsp;，标签集合字符串。也可以通过构造器直接设置</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#labelSize" rel="nofollow">labelSize</a> : int&nbsp; &nbsp;，获取或设置对 ComboBox 组件所包含的 Button 组件的标签字体大小。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#selectedIndex" rel="nofollow">selectedIndex</a> : int&nbsp; ，表示选择的下拉列表项的索引。<span style="color:#f33b45;">从0开始</span></td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#selectedLabel" rel="nofollow">selectedLabel</a> : String&nbsp; ，表示选择的下拉列表项的的标签。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#selectHandler" rel="nofollow">selectHandler</a> : Handler&nbsp; &nbsp;，改变下拉列表的选择项时执行的处理器(默认返回参数index:int)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#skin" rel="nofollow">skin</a> : String ，对象的皮肤资源地址。 支持单态，两态和三态，用 stateNum 属性设置 对象的皮肤地址，以字符串表示。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#stateNum" rel="nofollow">stateNum</a> : int ，表示按钮的状态值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#visibleNum" rel="nofollow">visibleNum</a> : int ，获取或设置没有滚动条的下拉列表中可显示的最大行数。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ComboBox#width" rel="nofollow">width</a> : Number ，[override] 表示显示对象的宽度，以像素为单位。 注：当值为0时，宽度为自适应大小。</td> 
  </tr> 
 </tbody> 
</table>

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

## 编码示例 ##

![20181227144032716.gif][]

1、这里直接使用引擎默认提供的 combobox.png 资源，并把它单独拷贝到新建的 bin/ui 目录下了。如果自己想重新 PS 一张，则和 "[自定义按钮资源][Link 1]' 同理，不再累述。

![20181227144500561.gif][]

官网地址：[https://ldc.layabox.com/doc/?nav=zh-js-2-3-4][https_ldc.layabox.com_doc_nav_zh-js-2-3-4]

[Laya.ui.Clip]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Clip#play%28%29
[https_layaair.ldc.layabox.com_api_category_UI_class_laya.ui.Clip]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Clip
[20181227104957152.gif]: /images/20220402/5c035c4454ff49b78ff511c68d2eb0ff.png
[20181227105239668.gif]: /images/20220402/bfea30d21afd491a86ab096a5de81368.png
[2018122711551114.gif]: /images/20220402/866ba3b217384cae81b103130d3f8eba.png
[20181227120001217.gif]: /images/20220402/c5c3d11a1b0444438cfc73adaff4613a.png
[https_ldc.layabox.com_doc_nav_zh-js-2-3-3]: https://ldc.layabox.com/doc/?nav=zh-js-2-3-3
[ComboBox]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.ComboBox
[20181227142618825.gif]: /images/20220402/1a389e5d105f4566819e5ff1dc457c1c.png
[20181227144032716.gif]: /images/20220402/faf349a4d6c847809948315061d978bc.png
[Link 1]: https://blog.csdn.net/wangmx1993328/article/details/85259089#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%89%E9%92%AE%E8%B5%84%E6%BA%90
[20181227144500561.gif]: /images/20220402/14c794f3ee5b4150ae44d53030ee39ac.png
[https_ldc.layabox.com_doc_nav_zh-js-2-3-4]: https://ldc.layabox.com/doc/?nav=zh-js-2-3-4