【quick-cocos2d-lua】 UI控件

1.输入控件(UIInput):

【quick-cocos2d-lua】 UI控件_第1张图片

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

 

2.进度条控件(UILoadingBar):

i.gif

用来展示事务进度,比如倒计时进度条或通关分数进度条。

创建: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

 

3.滑动条控件(UISlider):

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

 

4.滑动视图控件(UIScrollView):

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

运行效果:

【quick-cocos2d-lua】 UI控件_第2张图片→拖动【quick-cocos2d-lua】 UI控件_第3张图片

 

5.列表视图控件(UIListView):

用于显示一列或一串具有共同性的项,如游戏道具显示。

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

 

6.分页视图控件(UIPageView):

【quick-cocos2d-lua】 UI控件_第4张图片【quick-cocos2d-lua】 UI控件_第5张图片

一个视窗的内容叫一页,创建完成后,默认显示第一页,触摸后,控件会自动判断当前应当显示哪一页。

一、创建视图:

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

 

 

你可能感兴趣的:(【quick-cocos2d-lua】 UI控件)