【quick-cocos2d-lua】 UI控件

1.输入控件（UIInput）：

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):

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

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

运行效果：

→拖动

 

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）：

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

一、创建视图：

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