ui.lua
--ui组件
local UIScene=class("UIScene",function ()
return cc.Scene:create()
end)
--create
function UIScene:create()
local us=UIScene:new()
us:addChild(us:init())
return us
end
--ctor
function UIScene:ctor()
self.winsize=cc.Director:getInstance():getWinSize()
self._count=0
end
--init
function UIScene:init()
local layer=cc.Layer:create()
--UI测试
local labeltitle=ccui.Text:create()
labeltitle:setString("GUI测试")
layer:addChild(labeltitle)
labeltitle:setPosition(self.winsize.width/2,self.winsize.height/2)
--使用Button
local button = ccui.Button:create()
button:setTouchEnabled(true)
button:setPressedActionEnabled(true)
button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "")
button:setPosition(cc.p(50, 80))
local function touchEvent(sender,eventType)
if eventType == ccui.TouchEventType.began then
print("Touch Down")
elseif eventType == ccui.TouchEventType.moved then
print("Touch Move")
elseif eventType == ccui.TouchEventType.ended then
print("Touch Up")
elseif eventType == ccui.TouchEventType.canceled then
print("Touch Cancelled")
end
end
button:addTouchEventListener(touchEvent)
layer:addChild(button)
--9宫格Button
local button9 = ccui.Button:create()
button9:setTouchEnabled(true)
button9:setScale9Enabled(true)
button9:setCapInsets(cc.rect(5,10,5,10))
button9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "")
button9:setPosition(cc.p(100, 120))
button9:setContentSize(cc.size(150, 40))
layer:addChild(button9)
--使用CheckBox
local checkBox = ccui.CheckBox:create()
checkBox:setTouchEnabled(true)
checkBox:loadTextures("cocosui/check_box_normal.png",
"cocosui/check_box_normal_press.png",
"cocosui/check_box_active.png",
"cocosui/check_box_normal_disable.png",
"cocosui/check_box_active_disable.png")
checkBox:setPosition(cc.p(80, 160))
layer:addChild(checkBox)
--使用滑块
local function percentChangedEvent(sender,eventType)
if eventType == ccui.SliderEventType.percentChanged then
local slider = sender
local percent = "Percent " .. slider:getPercent()
labeltitle:setString(percent)
end
end
local slider = ccui.Slider:create()
slider:setTouchEnabled(true)
slider:loadBarTexture("cocosui/sliderTrack.png")
slider:loadSlidBallTextures("cocosui/sliderThumb.png", "cocosui/sliderThumb.png", "")
slider:loadProgressBarTexture("cocosui/sliderProgress.png")
slider:setPosition(cc.p(150, 210))
slider:addEventListener(percentChangedEvent)
layer:addChild(slider)
--使用ImageView
local imageView = ccui.ImageView:create()
imageView:loadTexture("cocosui/ccicon.png")
imageView:setPosition(cc.p(150,250))
layer:addChild(imageView)
--使用LoadBar
local loadingBar = ccui.LoadingBar:create()
loadingBar:setTag(999)
loadingBar:setName("LoadingBar")
loadingBar:loadTexture("cocosui/sliderProgress.png")
loadingBar:setPercent(100)--设定当前进度
loadingBar:setPosition(cc.p(150, 290))
layer:addChild(loadingBar)
local function update(delta)
self._count = self._count + 1
if self._count > 100 then
self._count = 0
end
loadingBar:setPercent(self._count)
end
layer:scheduleUpdateWithPriorityLua(update, 0)
--使用图集文字
local labelAtlas = ccui.TextAtlas:create()
labelAtlas:setProperty("2048", "cocosui/labelatlas.png", 17, 22, "0")
labelAtlas:setPosition(cc.p(240, 100))
layer:addChild(labelAtlas)
--使用BMFont
local labelBMFont = ccui.TextBMFont:create()
labelBMFont:setFntFile("cocosui/bitmapFontTest2.fnt")
labelBMFont:setString("9miao")
labelBMFont:setPosition(cc.p(240, 40))
layer:addChild(labelBMFont)
--使用TextField实现文字输入
local textField = ccui.TextField:create()
textField:setTouchEnabled(true)
textField:setFontSize(30)
textField:setPlaceHolder("input words here")
textField:setPosition(cc.p(300,260))
layer:addChild(textField)
local function textFieldEvent(sender, eventType)
if eventType == ccui.TextFiledEventType.insert_text then
labeltitle:setString(textField:getStringValue())
end
end
textField:addEventListener(textFieldEvent)
--使用Layout
local layout = ccui.Layout:create()
layout:setContentSize(cc.size(280, 150))
layout:setPosition(cc.p(500,30))
layer:addChild(layout)
local button = ccui.Button:create()
button:setTouchEnabled(true)
button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "")
button:setPosition(cc.p(button:getContentSize().width / 2, layout:getContentSize().height - button:getContentSize().height / 2))
layout:addChild(button)
local textButton = ccui.Button:create()
textButton:setTouchEnabled(true)
textButton:loadTextures("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png", "")
textButton:setTitleText("Text Button")
textButton:setPosition(cc.p(layout:getContentSize().width / 2, layout:getContentSize().height / 2))
layout:addChild(textButton)
local button_scale9 = ccui.Button:create()
button_scale9:setTouchEnabled(true)
button_scale9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "")
button_scale9:setScale9Enabled(true)
button_scale9:setContentSize(cc.size(100, button_scale9:getVirtualRendererSize().height))
button_scale9:setPosition(cc.p(layout:getContentSize().width - button_scale9:getContentSize().width / 2, button_scale9:getContentSize().height / 2))
layout:addChild(button_scale9)
--使用滚动视图
local scrollView = ccui.ScrollView:create()
scrollView:setTouchEnabled(true)
scrollView:setContentSize(cc.size(280, 150))
scrollView:setPosition(cc.p(0,300))
layer:addChild(scrollView)
local imageView = ccui.ImageView:create()
imageView:loadTexture("cocosui/ccicon.png")
local innerWidth = scrollView:getContentSize().width
local innerHeight = scrollView:getContentSize().height + imageView:getContentSize().height
scrollView:setInnerContainerSize(cc.size(innerWidth, innerHeight))
local button = ccui.Button:create()
button:setTouchEnabled(true)
button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "")
button:setPosition(cc.p(innerWidth / 2, scrollView:getInnerContainerSize().height - button:getContentSize().height / 2))
scrollView:addChild(button)
local textButton = ccui.Button:create()
textButton:setTouchEnabled(true)
textButton:loadTextures("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png", "")
textButton:setTitleText("Text Button")
textButton:setPosition(cc.p(innerWidth / 2, button:getBottomBoundary() - button:getContentSize().height))
scrollView:addChild(textButton)
local button_scale9 = ccui.Button:create()
button_scale9:setTouchEnabled(true)
button_scale9:setScale9Enabled(true)
button_scale9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "")
button_scale9:setContentSize(cc.size(100, button_scale9:getVirtualRendererSize().height))
button_scale9:setPosition(cc.p(innerWidth / 2, textButton:getBottomBoundary() - textButton:getContentSize().height))
scrollView:addChild(button_scale9)
imageView:setPosition(cc.p(innerWidth / 2, imageView:getContentSize().height / 2))
scrollView:addChild(imageView)
--添加列表视图
local listView = ccui.ListView:create()
-- set list view ex direction
listView:setDirection(ccui.ScrollViewDir.vertical)
listView:setBounceEnabled(true)
listView:setBackGroundImage("cocosui/green_edit.png")
listView:setBackGroundImageScale9Enabled(true)
listView:setContentSize(cc.size(240, 130))
listView:setPosition(cc.p(480,500))
layer:addChild(listView)
-- create model
local default_button = ccui.Button:create("cocosui/backtotoppressed.png", "cocosui/backtotopnormal.png")
default_button:setName("Title Button")
default_button:setTag(10)
local default_item = ccui.Layout:create()
default_item:setTouchEnabled(true)
default_item:setContentSize(default_button:getContentSize())
default_button:setPosition(cc.p(default_item:getContentSize().width / 2.0, default_item:getContentSize().height / 2.0))
default_item:addChild(default_button)
--set model
listView:setItemModel(default_item)
--add default item
for i = 1,10 do
listView:pushBackDefaultItem()
end
for i=0,9 do
listView:getItem(i):getChildByTag(10):setTitleText("bt"..i)
end
--添加pageView
local pageView = ccui.PageView:create()
pageView:setTouchEnabled(true)
pageView:setContentSize(cc.size(240, 130))
pageView:setPosition(cc.p(0,500))
layer:addChild(pageView)
for i = 1 , 3 do
local layout = ccui.Layout:create()
layout:setContentSize(cc.size(240, 130))
local imageView = ccui.ImageView:create()
imageView:setTouchEnabled(true)
imageView:setScale9Enabled(true)
imageView:loadTexture("cocosui/scrollviewbg.png")
imageView:setContentSize(cc.size(240, 130))
imageView:setPosition(cc.p(layout:getContentSize().width / 2, layout:getContentSize().height / 2))
layout:addChild(imageView)
local label = ccui.Text:create()
local pageInfo = string.format("page %d", i)
label:setString(pageInfo)
label:setFontName(font_TextName)
label:setFontSize(30)
label:setColor(cc.c3b(192, 192, 192))
label:setPosition(cc.p(layout:getContentSize().width / 2, layout:getContentSize().height / 2))
layout:addChild(label)
pageView:addPage(layout)
end
--在程序中加载ui文件
local ui=ccs.GUIReader:getInstance():widgetFromJsonFile("DemoHead_UI/DemoHead_UI.json")
layer:addChild(ui)
ui:setPosition(480,100)
local bt=ui:getChildByTag(22)
local function btclick(s,e)
if e==ccui.TouchEventType.ended then
print("click")
end
end
bt:addTouchEventListener(btclick)
return layer
end
return UIScene
ui.lua
--ui组件
local UIScene=class("UIScene",function ()
return cc.Scene:create()
end)
--create
function UIScene:create()
local us=UIScene:new()
us:addChild(us:init())
return us
end
--ctor
function UIScene:ctor()
self.winsize=cc.Director:getInstance():getWinSize()
self._count=0
end
--init
function UIScene:init()
local layer=cc.Layer:create()
--UI测试
local labeltitle=ccui.Text:create()
labeltitle:setString("GUI测试")
layer:addChild(labeltitle)
labeltitle:setPosition(self.winsize.width/2,self.winsize.height/2)
--使用Button
local button = ccui.Button:create()
button:setTouchEnabled(true)
button:setPressedActionEnabled(true)
button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "")
button:setPosition(cc.p(50, 80))
local function touchEvent(sender,eventType)
if eventType == ccui.TouchEventType.began then
print("Touch Down")
elseif eventType == ccui.TouchEventType.moved then
print("Touch Move")
elseif eventType == ccui.TouchEventType.ended then
print("Touch Up")
elseif eventType == ccui.TouchEventType.canceled then
print("Touch Cancelled")
end
end
button:addTouchEventListener(touchEvent)
layer:addChild(button)
--9宫格Button
local button9 = ccui.Button:create()
button9:setTouchEnabled(true)
button9:setScale9Enabled(true)
button9:setCapInsets(cc.rect(5,10,5,10))
button9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "")
button9:setPosition(cc.p(100, 120))
button9:setContentSize(cc.size(150, 40))
layer:addChild(button9)
--使用CheckBox
local checkBox = ccui.CheckBox:create()
checkBox:setTouchEnabled(true)
checkBox:loadTextures("cocosui/check_box_normal.png",
"cocosui/check_box_normal_press.png",
"cocosui/check_box_active.png",
"cocosui/check_box_normal_disable.png",
"cocosui/check_box_active_disable.png")
checkBox:setPosition(cc.p(80, 160))
layer:addChild(checkBox)
--使用滑块
local function percentChangedEvent(sender,eventType)
if eventType == ccui.SliderEventType.percentChanged then
local slider = sender
local percent = "Percent " .. slider:getPercent()
labeltitle:setString(percent)
end
end
local slider = ccui.Slider:create()
slider:setTouchEnabled(true)
slider:loadBarTexture("cocosui/sliderTrack.png")
slider:loadSlidBallTextures("cocosui/sliderThumb.png", "cocosui/sliderThumb.png", "")
slider:loadProgressBarTexture("cocosui/sliderProgress.png")
slider:setPosition(cc.p(150, 210))
slider:addEventListener(percentChangedEvent)
layer:addChild(slider)
--使用ImageView
local imageView = ccui.ImageView:create()
imageView:loadTexture("cocosui/ccicon.png")
imageView:setPosition(cc.p(150,250))
layer:addChild(imageView)
--使用LoadBar
local loadingBar = ccui.LoadingBar:create()
loadingBar:setTag(999)
loadingBar:setName("LoadingBar")
loadingBar:loadTexture("cocosui/sliderProgress.png")
loadingBar:setPercent(100)--设定当前进度
loadingBar:setPosition(cc.p(150, 290))
layer:addChild(loadingBar)
local function update(delta)
self._count = self._count + 1
if self._count > 100 then
self._count = 0
end
loadingBar:setPercent(self._count)
end
layer:scheduleUpdateWithPriorityLua(update, 0)
--使用图集文字
local labelAtlas = ccui.TextAtlas:create()
labelAtlas:setProperty("2048", "cocosui/labelatlas.png", 17, 22, "0")
labelAtlas:setPosition(cc.p(240, 100))
layer:addChild(labelAtlas)
--使用BMFont
local labelBMFont = ccui.TextBMFont:create()
labelBMFont:setFntFile("cocosui/bitmapFontTest2.fnt")
labelBMFont:setString("9miao")
labelBMFont:setPosition(cc.p(240, 40))
layer:addChild(labelBMFont)
--使用TextField实现文字输入
local textField = ccui.TextField:create()
textField:setTouchEnabled(true)
textField:setFontSize(30)
textField:setPlaceHolder("input words here")
textField:setPosition(cc.p(300,260))
layer:addChild(textField)
local function textFieldEvent(sender, eventType)
if eventType == ccui.TextFiledEventType.insert_text then
labeltitle:setString(textField:getStringValue())
end
end
textField:addEventListener(textFieldEvent)
--使用Layout
local layout = ccui.Layout:create()
layout:setContentSize(cc.size(280, 150))
layout:setPosition(cc.p(500,30))
layer:addChild(layout)
local button = ccui.Button:create()
button:setTouchEnabled(true)
button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "")
button:setPosition(cc.p(button:getContentSize().width / 2, layout:getContentSize().height - button:getContentSize().height / 2))
layout:addChild(button)
local textButton = ccui.Button:create()
textButton:setTouchEnabled(true)
textButton:loadTextures("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png", "")
textButton:setTitleText("Text Button")
textButton:setPosition(cc.p(layout:getContentSize().width / 2, layout:getContentSize().height / 2))
layout:addChild(textButton)
local button_scale9 = ccui.Button:create()
button_scale9:setTouchEnabled(true)
button_scale9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "")
button_scale9:setScale9Enabled(true)
button_scale9:setContentSize(cc.size(100, button_scale9:getVirtualRendererSize().height))
button_scale9:setPosition(cc.p(layout:getContentSize().width - button_scale9:getContentSize().width / 2, button_scale9:getContentSize().height / 2))
layout:addChild(button_scale9)
--使用滚动视图
local scrollView = ccui.ScrollView:create()
scrollView:setTouchEnabled(true)
scrollView:setContentSize(cc.size(280, 150))
scrollView:setPosition(cc.p(0,300))
layer:addChild(scrollView)
local imageView = ccui.ImageView:create()
imageView:loadTexture("cocosui/ccicon.png")
local innerWidth = scrollView:getContentSize().width
local innerHeight = scrollView:getContentSize().height + imageView:getContentSize().height
scrollView:setInnerContainerSize(cc.size(innerWidth, innerHeight))
local button = ccui.Button:create()
button:setTouchEnabled(true)
button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "")
button:setPosition(cc.p(innerWidth / 2, scrollView:getInnerContainerSize().height - button:getContentSize().height / 2))
scrollView:addChild(button)
local textButton = ccui.Button:create()
textButton:setTouchEnabled(true)
textButton:loadTextures("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png", "")
textButton:setTitleText("Text Button")
textButton:setPosition(cc.p(innerWidth / 2, button:getBottomBoundary() - button:getContentSize().height))
scrollView:addChild(textButton)
local button_scale9 = ccui.Button:create()
button_scale9:setTouchEnabled(true)
button_scale9:setScale9Enabled(true)
button_scale9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "")
button_scale9:setContentSize(cc.size(100, button_scale9:getVirtualRendererSize().height))
button_scale9:setPosition(cc.p(innerWidth / 2, textButton:getBottomBoundary() - textButton:getContentSize().height))
scrollView:addChild(button_scale9)
imageView:setPosition(cc.p(innerWidth / 2, imageView:getContentSize().height / 2))
scrollView:addChild(imageView)
--添加列表视图
local listView = ccui.ListView:create()
-- set list view ex direction
listView:setDirection(ccui.ScrollViewDir.vertical)
listView:setBounceEnabled(true)
listView:setBackGroundImage("cocosui/green_edit.png")
listView:setBackGroundImageScale9Enabled(true)
listView:setContentSize(cc.size(240, 130))
listView:setPosition(cc.p(480,500))
layer:addChild(listView)
-- create model
local default_button = ccui.Button:create("cocosui/backtotoppressed.png", "cocosui/backtotopnormal.png")
default_button:setName("Title Button")
default_button:setTag(10)
local default_item = ccui.Layout:create()
default_item:setTouchEnabled(true)
default_item:setContentSize(default_button:getContentSize())
default_button:setPosition(cc.p(default_item:getContentSize().width / 2.0, default_item:getContentSize().height / 2.0))
default_item:addChild(default_button)
--set model
listView:setItemModel(default_item)
--add default item
for i = 1,10 do
listView:pushBackDefaultItem()
end
for i=0,9 do
listView:getItem(i):getChildByTag(10):setTitleText("bt"..i)
end
--添加pageView
local pageView = ccui.PageView:create()
pageView:setTouchEnabled(true)
pageView:setContentSize(cc.size(240, 130))
pageView:setPosition(cc.p(0,500))
layer:addChild(pageView)
for i = 1 , 3 do
local layout = ccui.Layout:create()
layout:setContentSize(cc.size(240, 130))
local imageView = ccui.ImageView:create()
imageView:setTouchEnabled(true)
imageView:setScale9Enabled(true)
imageView:loadTexture("cocosui/scrollviewbg.png")
imageView:setContentSize(cc.size(240, 130))
imageView:setPosition(cc.p(layout:getContentSize().width / 2, layout:getContentSize().height / 2))
layout:addChild(imageView)
local label = ccui.Text:create()
local pageInfo = string.format("page %d", i)
label:setString(pageInfo)
label:setFontName(font_TextName)
label:setFontSize(30)
label:setColor(cc.c3b(192, 192, 192))
label:setPosition(cc.p(layout:getContentSize().width / 2, layout:getContentSize().height / 2))
layout:addChild(label)
pageView:addPage(layout)
end
--在程序中加载ui文件
local ui=ccs.GUIReader:getInstance():widgetFromJsonFile("DemoHead_UI/DemoHead_UI.json")
layer:addChild(ui)
ui:setPosition(480,100)
local bt=ui:getChildByTag(22)
local function btclick(s,e)
if e==ccui.TouchEventType.ended then
print("click")
end
end
bt:addTouchEventListener(btclick)
return layer
end
return UIScene