爲便於看官實際操作和整體理解,直接放入整個類,其中包含各個按鈕的創建方式及屬性設置
---定義類
local TestUIButtonScene = class("TestUIButtonScene", function ( )
return display.newScene("TestUIButtonScene")
end)
--聲明圖片資源,每一種按鈕對應一種表
TestUIButtonScene.CHECKBOX_BUTTON_IMAGES = {
off = "CheckBoxButtonOff.png",
off_pressed = "CheckBoxButtonOffPressed.png",
off_disabled = "CheckBoxButtonOffDisabled.png",
on = "CheckBoxButtonOn.png",
on_pressed = "CheckBoxButtonOnPressed.png",
on_disabled = "CheckBoxButtonOnDisabled.png",
}
TestUIButtonScene.CHECKBOX_BUTTON2_IMAGES = {
off = "CheckBoxButton2Off.png",
on = "CheckBoxButton2On.png",
}
TestUIButtonScene.PUSH_BUTTON_IMAGES = {
normal = "Button01.png",
pressed = "Button01Pressed.png",
disabled = "Button01Disabled.png",
}
TestUIButtonScene.RADIO_BUTTON_IMAGES = {
off = "RadioButtonOff.png",
off_pressed = "RadioButtonOffPressed.png",
off_disabled = "RadioButtonOffDisabled.png",
on = "RadioButtonOn.png",
on_pressed = "RadioButtonOnPressed.png",
on_disabled = "RadioButtonOnDisabled.png",
}
--構造函數
function TestUIButtonScene:ctor( )
self:createButtonGroup1()
self:createButtonGroup2()
self:createButtonGroup3()
end
--複選按鈕
function TestUIButtonScene:createButtonGroup1( )
local checkBoxButton1,checkBoxButton2
---更新輸出按鈕的狀態的Label
local function updateCheckBoxButtonLabel( checkbox )
local state = ""
if checkbox:isButtonSelected()then
state = "on"
else
state = "off"
end
if not checkbox:isButtonEnabled() then
state = state .. "(disabled)"
end
checkbox:setButtonLabelString(string.format("state is %s", state))
end
--第一個按鈕
checkBoxButton1 = cc.ui.UICheckBoxButton.new(TestUIButtonScene.CHECKBOX_BUTTON_IMAGES)
:setButtonLabel(cc.ui.UILabel.new({test = "", size = 22, color = cc.c3b(255,96,255)})) --設置Label字體
:setButtonLabelOffset(0, -40)--設置Label與按鈕的位置
:setButtonLabelAlignment(display.CENTER) --設置Label和按鈕的對齊方式
:onButtonStateChanged(function(event) --每次狀態更新調用此函數
updateCheckBoxButtonLabel(event.target)
end)
:align(display.LEFT_CENTER, display.left + 40, display.top - 80)
:addTo(self)
updateCheckBoxButtonLabel(checkBoxButton1) -- 再更新一次
--第二個按鈕
checkBoxButton2 = cc.ui.UICheckBoxButton.new(TestUIButtonScene.CHECKBOX_BUTTON_IMAGES)
:setButtonSelected(true)
:setButtonLabel(cc.ui.UILabel.new({text = "", size = 22, color = cc.c3b(96, 200, 96)}))
:setButtonLabelOffset(0, -40)
:setButtonLabelAlignment(display.CENTER)
:onButtonStateChanged(function(event)
updateCheckBoxButtonLabel(event.target)
end)
:align(display.LEFT_CENTER, display.left + 260, display.top - 80)
:addTo(self)
updateCheckBoxButtonLabel(checkBoxButton2)
--PushButton
cc.ui.UIPushButton.new(TestUIButtonScene.PUSH_BUTTON_IMAGES,{scale9 = true})
--設置按鈕大小
:setButtonSize(240, 60)
--設置正常狀態下的label
:setButtonLabel("normal", cc.ui.UILabel.new({
UILabelType = 2,
text = "This is a PushButton",
size = 18,
}))
--設置按下狀態的label
:setButtonLabel("pressed", cc.ui.UILabel.new({
UILabelType = 2,
text = "Button Pressed",
size = 18,
color = cc.c3b(255, 64, 64)
}))
--設置禁用狀態下的label
:setButtonLabel("disabled", cc.ui.UILabel.new({
UILabelType = 2,
text = "Button Disabled",
size = 18,
color = cc.c3b(0, 0, 0)
}))
--設置點擊事件
:onButtonClicked(function(event)
if math.random(0, 1) == 0 then
checkBoxButton1:setButtonEnabled(not checkBoxButton1:isButtonEnabled())
else
checkBoxButton2:setButtonEnabled(not checkBoxButton2:isButtonEnabled())
end
local button = event.target
button:setButtonEnabled(false)
button:setButtonLabelString("disabled", "Button Enable after 1s")
self:performWithDelay(function()
button:setButtonLabelString("disabled", "Button Disabled")
button:setButtonEnabled(true)
end, 1.0)
end)
:align(display.LEFT_CENTER, display.left + 480, display.top - 80)
:addTo(self)
end
--按鈕組
function TestUIButtonScene:createButtonGroup2( )
--新建按鈕組,排序規則爲從上至下
local group = cc.ui.UICheckBoxButtonGroup.new(display.TOP_TO_BOTTOM)
--給按鈕組添加按鈕
:addButton(cc.ui.UICheckBoxButton.new(TestUIButtonScene.RADIO_BUTTON_IMAGES)
:setButtonLabel(cc.ui.UILabel.new({text = "option 1", color = display.COLOR_RED}))
:setButtonLabelOffset(20, 0)
:align(display.LEFT_CENTER))
:addButton(cc.ui.UICheckBoxButton.new(TestUIButtonScene.RADIO_BUTTON_IMAGES)
:setButtonLabel(cc.ui.UILabel.new({text = "option 2", color = display.COLOR_RED}))
:setButtonLabelOffset(20, 0)
:align(display.LEFT_CENTER))
:addButton(cc.ui.UICheckBoxButton.new(TestUIButtonScene.RADIO_BUTTON_IMAGES)
:setButtonLabel(cc.ui.UILabel.new({text = "option 3", color = display.COLOR_RED}))
:setButtonLabelOffset(20, 0)
:align(display.LEFT_CENTER))
:addButton(cc.ui.UICheckBoxButton.new(TestUIButtonScene.RADIO_BUTTON_IMAGES)
:setButtonLabel(cc.ui.UILabel.new({text = "option 4 disabled", color = display.COLOR_RED}))
:setButtonEnabled(false)
:setButtonLabelOffset(20, 0)
:align(display.LEFT_CENTER))
--設置佈局 每個按鈕的邊緣位置
:setButtonsLayoutMargin(10, 10, 10, 10)
--設置回調函數
:onButtonSelectChanged(function(event)
printf("Option %d selected, Option %d unselected", event.selected, event.last)
end)
--設置排列 按鈕組的位置
:align(display.LEFT_TOP, display.left + 40, display.top - 240)
:addTo(self)
group:getButtonAtIndex(4):setButtonSelected(true)
--新建按鈕對按鈕組進行操作
cc.ui.UIPushButton.new("GreenButton.png",{scale9 = true})
--設置按鈕大小
:setButtonSize(160, 40)
--設置按鈕上的label
:setButtonLabel(cc.ui.UILabel.new({text = "Remove option 2", size = 16, color = display.COLOR_BLUE}))
--設置按鈕在按下狀態下的回調函數
:onButtonPressed(function(event)
event.target:getButtonLabel():setColor(display.COLOR_RED)--按鈕上的字體變紅
end)
--設置按鈕在釋放狀態下的回調函數
:onButtonRelease(function(event)
event.target:getButtonLabel():setColor(display.COLOR_BLUE)---按鈕上的字體變藍
end)
--設置按鈕的點擊函數
:onButtonClicked(function(event)
if group:getButtonsCount() == 4 then
group:removeButtonAtIndex(2) --移除第二個按鈕
event.target:removeSelf() ---移除自己
end
end)
--設置位置
:align(display.LEFT_CENTER, display.left + 200, display.top - 210)
:addTo(self)
end
function TestUIButtonScene:createButtonGroup3( )
--創建勾選框
cc.ui.UICheckBoxButton.new(TestUIButtonScene.CHECKBOX_BUTTON2_IMAGES)
:setButtonLabel(cc.ui.UILabel.new({text = "checkbox 1", size = 16, color = display.COLOR_BLUE}))
:setButtonLabelOffset(40, 0)
:setButtonLabelAlignment(display.LEFT_CENTER)
:align(display.LEFT_CENTER, display.left + 80 ,display.top - 400)
:addTo(self)
end
return TestUIButtonScene;