按钮事件

在Cocos-Lua中按钮分为三种Button控件，分别是UIPushButton、UICheckBoxButton和UICheckBoxButtonGroup，它们全部派生自UIButton。

1.UIButton按钮事件

上面三个Button控件全部派生自UIButton，可以监听如下事件：

（1）：CLICKED，单击按钮。使用UIButton:onButtonClicked(callback)方法监听；

（2）： PRESSED，按下按钮。使用UIButton:onButtonPressed(callback)方法监听；

（3）：RELEASE，释放按钮。使用UIButton:onButtonRelease(callback)方法监听;

（4）：STATE_CHANGED，状态改变（enable和disable之间的转换）。使用UIButton:onButtonStateChanged(callback)方法监听。

2.UIPushButton

这种按钮是最普遍的，就是那种按下去之后会自动弹起的按钮，通过cc.ui.UIPushButton.new(images,options)方法创建一个UIPushButton按钮，images是table类型，代表了按钮按下和弹起状态的图片；options是table类型，是一个可选参数。包含scale9、flipX和flipY的设置。下面是创建代码和效果图：

function MainScene:ctor()
	local images={
		normal="button/Button01.png",
		pressed="button/Button01.png",
		disable="button/Button01Disable.png",
	}

	cc.ui.UIPushButton.new(images, {scale9=true})
		:setButtonSize(240,60)
		:setButtonLabel("normal", cc.ui.UILabel.new({
				UILabelType=2,
				text="this is a PushButton",
				size=18
			}))

		:setButtonLabel("pressed", cc.ui.UILabel.new({
			UILabelType=2,
			text="Button Pressed",
			size=18,
			color=cc.c3b(255, 64, 64)
			}))

		:setButtonLabel("disabled", cc.ui.UILabel.new({
			UILabelType=2,
			text="Button Disabled",
			size=18,
			color=cc.c3b(0, 0, 0)
			}))

		:onButtonClicked(function (event)
			-- body
			print("pushButtton click")
		end)
		:align(display.LEFT_CENTER, display.left+80, display.top-80)
		:addTo(self)
end

3.UICheckBoxButton

这种按钮差不多就是一个开关类似于电气设备上的on/off，只能在这两者切换。可以通过cc.ui.UICheckBoxButton.new(imaegs,options),参数和UIPushButton一样的，代码如下：

local images={
			off="button/CheckBoxButtonOff.png",
			off_pressed="button/CheckBoxButtonOffPressed.png",
			off_disabled="button/CheckBoxButtonOffDisabled.png",
			on="button/CheckBoxButtonOn.png",
			on_pressed="button/CheckBoxButtonOnPressed.png",
			on_disabled="button/CheckBoxButtonDisabled.png",
		}

		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

		local checkBoxButton1=cc.ui.UICheckBoxButton.new(images)
			:setButtonLabel(cc.ui.UILabel.new({text=" ",size=22,color=cc.c3b(255, 96, 255)}))
			:setButtonLabelOffset(0, -40)--设置文本显示的偏移位置
			:setButtonLabelAlignment(display.CENTER)
			:onButtonStateChanged(function (event)
				-- body
				updateCheckBoxButtonLabel(event.target)
			end)
			:align(display.LEFT_CENTER,display.left+40,display.top-80)
			:addTo(self)

		updateCheckBoxButtonLabel(checkBoxButton1)

4.UICheckBoxButtonGroup按钮

这种按钮排列一组，但是同时只能有一个被选择，可以通过cc.ui.UICheckBoxButtonGroup.new(direction)创建UICheckBoxButtonGroup按钮，其中direction是integer类型，代表了按钮的排列方向：display.LEFT_TO_RIGHT,display.RIGHT_TOLEFT,display.TOP_TO_BOTTOM,display.BOTTOM_TO_TOP。

这组按钮的每一个其实就是UICheckBoxBUtton，用removeButtonAtIndex(index)可以指定删除的某个按钮，创建代码如下：

local images={
		off="button/RadioButtonOff.png",
		off_pressed="button/RadioButtonOffPressed.png",
		off_disabled="button/RadioButtonOffDisabled.png",
		on="button/RadioButtonOn.png",
		on_pressed="button/RadioButtonOnPressed.png",
		on_disabled="button/RadioButtonOnDisabled.png",
	}

	local group=cc.ui.UICheckBoxButtonGroup.new(display.TOP_TO_BOTTOM)
		:addButton(cc.ui.UICheckBoxButton.new(images)
			:setButtonLabel(cc.ui.UILabel.new({text="option1",color=display.COLOR_WHITE}))
			:setButtonLabelOffset(20,0)
			:align(display.LEFT_CENTER)
		)

		:addButton(cc.ui.UICheckBoxButton.new(images)
			:setButtonLabel(cc.ui.UILabel.new({text="option2",color=display.COLOR_WHITE}))
			:setButtonLabelOffset(20, 0)
			:align(display.LEFT_CENTER)
		)

		:addButton(cc.ui.UICheckBoxButton.new(images)
			:setButtonLabel(cc.ui.UILabel.new({text="option3",color=display.COLOR_WHITE}))
			:setButtonLabelOffset(20, 0)
			:align(display.LEFT_CENTER)
		)

		:addButton(cc.ui.UICheckBoxButton.new(images)
			:setButtonLabel(cc.ui.UILabel.new({text="option4 disabled",color=display.COLOR_WHITE}))
			:setButtonEnabled(false)
			:setButtonLabelOffset(20, 0)
			:align(display.LEFT_CENTER)
		)

		:setButtonsLayoutMargin(10, 10,10,10)
		:onButtonSelectChanged(function(event)
			print("Option %d selected,Option %d unselected",event.selected,event.last)
		end)
		:align(display.LEFT_CENTER, display.left+40, display.top-440)
		:addTo(self)