滑动条控件也叫轨道条控件,它有一条轨道和可以滑动的块。滑动条能与用户交互,通过图像量化的方式改变底层逻辑的数值。
我们来看看具体的滑动条,如下图:
Quick 中的 UISilder 控件支持水平或竖直方向显示。它还支持控件事件。比如 按下、释放、按钮状态变化、取值变化等事件。源码位于framework/cc/ui/UiSlider.lua
。
创建
在 Quick 中使用cc.ui.UiSlider.new(direction,images,options)
方法创建一个新的进度条。参数如下:
- direction,number类型,滑动的方向
- images,table类型,
- options,table类型,可用的参数有:
示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
UiSliderTestScene.SLIDER_IMAGES = {
bar =
"slider/SliderBar.png"
,
button =
"slider/SliderButton.png"
,
local barHeight = 40
local barWidth = 400
cc.ui.UiSlider.
new
(display.LEFT_TO_RIGHT,UiSliderTestScene.SLIDER_IMAGES,{scale9 =
true
})--新建一个滑动条控件
:onSliderValueChanged(function(event) -- 滑动滑块数值变化回调
valueLabel:setString(string.format(
"value = %0.2f"
,event.value))
end)
:setSliderSize(barWidth,barHeight) -- 设置滑动条大小
:setSliderValue(75) --设置滑动控件的取值
:addTo(self)
|
上面代码创建了一个水平方向的滑动控件和一个显示滑块值的 Label。
修改滑动条大小
当创建参数设置了 scale9 为 true,那么可以通过下面的接口来改变控件的大小。
1
|
UiSlider:setSliderSize(barWidth,barHeight)
|
如果 scale9 为 false,调用这个接口会报错,程序停止运行。
滑动块位置
假如我们提供一个滑动条来改变系统音量,那么控件初始化后,应该能正确显示当前音量的大小。通过下面的接口设置初始位置。
1
|
UiSlider:setSliderValue(value)
|
value 的 取值范围 [options.min,options.max]
1
|
UiSlider:getSliderValue()
|
事件
UiSlider 内部产生4种事件,它们是:
-
pressed_EVENT,按下滑动块事件
-
RELEASE_EVENT,释放滑动块事件
1UiSlider:onSliderRelease(function(event) end)
-
STATE_CHANGED_EVENT,状态改变事件 (enable <--> disable状态改变时触发)
1UiSlider:onSliderStateChanged(function(event) end)
-
VALUE_CHANGED_EVENT,值改变事件
1UiSlider:onSliderValueChanged(function(event) end)
event.value 中存放改变后的值。
一般我们只需要关心 VALUE_CHANGED_EVENT,可以获取当前滑块代表的数值。
Cocos引擎中文官网有奖征集优秀原创Cocos教程 奖品丰厚!活动地址:http://www.cocoachina.com/bbs/read.php?tid-274890.html
原文地址:https://www.jb51.cc/cocos2dx/344762.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。