一 HSlider使用
直接拖动到exml上,并赋值默认皮肤。记得要设置宽度,不然只能看到一个按钮,看不到条。
皮肤源码:
<?xml version="1.0" encoding="utf-8"?> <e:Skin class="skins.HSliderSkin" minWidth="20" minHeight="8" xmlns:e="http://ns.egret.com/eui"> <e:Image id="track" source="track_sb_png" scale9Grid="1,1,4,4" width="100%" height="6" verticalCenter="0"/> <e:Image id="thumb" source="thumb_png" verticalCenter="0"/> </e:Skin>
拖动按钮时,获取value值,可以根据这个value值去改变音量。
private slider:eui.HSlider; public constructor() { super(); this.skinName = "HomeSceneSkin"; } public childrenCreated(){ this.slider.snapInterval = 0.1; //范围0-10,间隔0.1,则有100个值 this.slider.addEventListener(egret.Event.CHANGE, this.onChange, this); } private onChange(){ console.log(this.slider.value); //0 0.1 0.2... }
二 减少皮肤数量,单次使用直接在exml代码里赋值皮肤
可以更换滑块和进度条的source来替换图片,设置九宫等属性来改变样式。
<e:HSlider id="slider" x="122" y="49" width="202" minWidth="20" minHeight="8"> <e:Skin minWidth="20" minHeight="8" xmlns:e="http://ns.egret.com/eui"> <e:Image id="track" source="track_sb_png" scale9Grid="1,1,4,4" width="100%" height="6" verticalCenter="0"/> <e:Image id="thumb" source="thumb_png" verticalCenter="0"/> </e:Skin> </e:HSlider>