cc.ui.UIInput.new(options)新建一个输入控件
options是table类型,image:输入框的图像,imagePressed:输入框输入状态的图像(可选),imageDisabled:输入框禁止输入的图像(可选),listener:回调函数,监听输入事件(可选),size:输入框的尺寸(cc.size(宽度,高度)),x,y坐标
获取文本:
local text = editbox:getText()
设置提示信息:
editbox:setPlaceHolder("请输入密码")
设置默认显示文本:
editbox:setText("路人甲")
设置密码输入:
editbox:setInputFlag(0)
--创建输入框
function UiLayer:onCreateTextField()
local editTxt= ccui.EditBox:create(cc.size(350,100), "D:\\input_Bg.png") --输入框尺寸,背景图片
editTxt:setName("inputTxt")
editTxt:setAnchorPoint(0.5,0.5)
editTxt:setPosition(970,515) --设置输入框的位置
editTxt:setFontSize(100) --设置输入设置字体的大小
editTxt:setMaxLength(6) --设置输入最大长度为6
editTxt:setFontColor(cc.c4b(124,92,63,255)) --设置输入的字体颜色
editTxt:setFontName("simhei") --设置输入的字体为simhei.ttf
-- editTxt:setInputMode(cc.EDITBOX_INPUT_MODE_NUMERIC) --设置数字符号键盘
-- editTxt:setPlaceHolder("请输入账号") --设置预制提示文本
editTxt:setReturnType(cc.KEYBOARD_RETURNTYPE_DONE) --输入键盘返回类型,done,send,go等KEYBOARD_RETURNTYPE_DONE
editTxt:setInputMode(cc.EDITBOX_INPUT_MODE_NUMERIC) --输入模型,如整数类型,URL,电话号码等,会检测是否符合
editTxt:registerScriptEditBoxHandler(function(eventname,sender) self:editboxHandle(eventname,sender) end) --输入框的事件,主要有光标移进去,光标移出来,以及输入内容改变等
self:addChild(editTxt,5)
-- editTxt:setHACenter() --输入的内容锚点为中心,与anch不同,anch是用来确定控件位置的,而这里是确定输入内容向什么方向展开
end
--输入框事件处理
function Ui:editboxHandle(strEventName,sender)
if strEventName == "began" then
sender:setText("") --光标进入,清空内容/选择全部
elseif strEventName == "ended" then
--当编辑框失去焦点并且键盘消失的时候被调用
elseif strEventName == "return" then
--当用户点击编辑框的键盘以外的区域,或者键盘的Return按钮被点击时所调用
elseif strEventName == "changed" then
--输入内容改变时调用
end
end
例:
function MainScene:addUIInput()
local function onEdit(event,editbox)
if event == "began" then
print("开始输入")
elseif event == "changed" then
print("输入框内容发生变化")
local text = editbox:getText()
print(text)
elseif event == "ended" then
print("输入结束")
elseif event == "return" then
print("从输入框返回")
end
end
local editbox = cc.ui.UIInput.new({
image = "editbox.png",
listener = onEdit,
x = display.width/5,
y = display.height/4,
size = cc.size(200,40),
})
self:addChild(editbox)
editbox:setPlaceHolder("文本输入控件")
end
用来展示事务进度,比如倒计时进度条或通关分数进度条。
创建:cc.ui.UILoadingBar.new(options)
--options是table类型,参数有:
scale9(是否缩放),capInsets(设置图片的缩放区域),image(进度条图片),viewRect(显示区域),percent(初始进度值,0~100),direction(默认从左到右,UILoadingBar.DIRECTION_LEFT_TO_RIGHT,UILoadingBar.DIRECTION_LEFT_TO_RIGHT)
更新进度显示:
loadBar:setPercent(percent) --范围0~100
代码示例:
function MainScene:addUILoadingBar()
display.newSprite("loading-bg.png") --进度条背景图片
:align(display.LEFT_BOTTOM, 100,10)
:addTo(self)
local loadBar = cc.ui.UILoadingBar.new({ --进度条
scale9 = true,
capInsets = cc.rect(0,0,10,10),
image = "loading.png",
viewRect = cc.rect(0,0,200,32),
percent = 30,
})
:pos(100,10)
:addTo(self)
end
cc.ui.UISlider.new(direction,images,options)
direction:表示滑动的方向,display.LEFT_TO_RIGHT.左右滑动;display.TOP_TO_BOTTOM,上下滑动。
images:table类型,bar和button的图片资源路径
function MainScene:addUISlider()
local barWidth = 400
local barHeight = 40
local images = {
bar = "SliderBar.png",
button = "SliderButton.png",
}
local valueLabel = cc.ui.UILabel.new({text = "",size = 14})
:align(display.LEFT_BOTTOM,display.right - 250,display.top - 60)
:addTo(self)
cc.ui.UISlider.new(display.LEFT_TO_RIGHT,images,{scale9 = true})
:onSliderValueChanged(function(event)
valueLabel:setString(string.format("音量 = %d",event.value))
end)
:onSliderStateChanged(function(event)
print(event.name)
end)
:onSliderPressed(function(event)
print(event.name)
end)
:setSliderSize(barWidth,barHeight) --修改滑动条大小,scale9为true才有效
:setSliderValue(10)
:align(display.LEFT_BOTTOM,display.right - 400,display.top - 40)
:addTo(self)
end
cc.ui.UIScrollView.new(params)
params是table类型
①direction,可选值:
UIScrollView.DIRECTION_BOTH,UIScrollView.DIRECTION_VERTICAL,UIScrollView.DIRECTION_HORIZONTAL
②viewRect,列表控件的显示区域
③scrollbarImgH,水平方向的滚动条图片资源路径
④scrollbarImgV,垂直方向的滚动条图片资源路径
⑤bgColor,背景色
⑥bgStartColor,渐变背景开始色
⑦bgEndColor,渐变背景结束色
⑧bg,背景图资源路径
⑨bgScale9,背景图是否可缩放
代码示例:
function MainScene:addScrollView()
local sp = display.newSprite("cloud.png")
sp:align(display.LEFT_BOTTOM,0,0)
cc.ui.UIScrollView.new({
direction = cc.ui.UIScrollView.DIRECTION_BOTH,
viewRect = {x = 0, y = 0, width = 320, height = 480}, -- 设置显示区域
bgColor = cc.c4b(255,255,255,255)
})
:addScrollNode(sp)
:setDirection(cc.ui.UIScrollView.DIRECTION_BOTH)
:onScroll(function (event)
--print("TestUIScrollViewScene - scrollListener:" .. event.name)
end)
:addTo(self)
:pos(display.cx - 160,display.cy - 240)
:setBounceable(true)
end
运行效果:
用于显示一列或一串具有共同性的项,如游戏道具显示。
local list = cc.ui.UIListView.new(params) --新建表
local item = list:newItem(contentNode) --新建表项
params为table类型
①direction,控件的滚动方向,默认垂直,UIScrollView.DIRECTION_VERTICAL,UIScrollView.DIRECTION_HORIZONTAL
②alignment,listViewItem中content的对齐方式,默认居中。(UIListView.ALIGNMENT_LEFT)
③viewRect,控件的显示区域
④scrollbarImgH,水平方向的滚动条图片资源路径
⑤scrollbarImgV,垂直方向的滚动条图片资源路径
⑥bgColor,c4b类型,表示背景色
⑦bgStartColor,表示渐变背景开始色
⑧bgEndColor,表示渐变背景结束色
⑨bg,背景图片资源路径
⑩bgScale9,背景图是否可缩放,capInsets,rect类型,表示缩放区域
function TestUIListViewScene:createListView9()
self.lv = cc.ui.UIListView.new {
-- bgColor = cc.c4b(200, 200, 200, 120),
bg = "sunset.png",
bgScale9 = true,
async = true,
viewRect = cc.rect(360, 40, 400, 80),
direction = cc.ui.UIScrollView.DIRECTION_HORIZONTAL,
scrollbarImgV = "barH.png"}
:onTouch(handler(self, self.touchListener8))
:addTo(self)
self.lv:setDelegate(handler(self, self.sourceDelegate))
self.lv:reload()
end
一个视窗的内容叫一页,创建完成后,默认显示第一页,触摸后,控件会自动判断当前应当显示哪一页。
一、创建视图:
cc.ui.UIPageView.new(params)
①column,每一页的列数,默认为1
②row,每一页的行数,默认为1
③columnSpace,列之间的间隙,默认为0
④rowSpace,行之间的间隙,默认为0
⑤viewRect,页面控件的显示区域⑥
⑥padding,table类型,表示控件四周的间隙
⑦bCirc,页面是否循环,默认false
二、创建项:
①直接使用UIPageView的成员函数来创建:
local item =pv:newItem() --pv为创建的视图,由此获得一个分页项,然后再把要显示的内容加入item,最后item加入视图。
当所有item添加完后,要使用reload刷新控件,否则看不到内容。
function pageViewScene:addPageView()
local pv = cc.ui.UIPageView.new({
viewRect = cc.rect(30, 20, 900, 600),
column = 3,
row = 3,
padding = {left = 30,right = 30,top = 20,bottom = 20},
columnSpace = 10,
rowSpace = 10,
bCirc = false,
})
:onTouch(handler(self, self.touchListener))
:addTo(self)
--add items
for i = 1,18 do
local item = pv:newItem() --新建page项
--创建一个带颜色的层作为page项的内容
local content = cc.LayerColor:create(
cc.c4b(
math.random(250),
math.random(250),
math.random(250),
250))
content:setContentSize(280, 185) --设置大小
content:setTouchEnabled(false)
item:addChild(content) --将内容加到page项
pv:addItem(item)
end
pv:reload() --加完所有item后,要reload刷新控件才能看到
end