cocos2dx用checkbox实现单选框和button实现table按钮

转载请注明出处：帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

cocos2dx有checkbox和button，但是checkbox是个复选框，也没有table按钮，本文主要是利用这两个控件来实现单选框和table按钮的功能。

主要思路就是，通过响应checkbox和button的事件，来设置和他一组的其他控件的状态来达到我们需要的效果。

我的工作环境时cocos2dx3.2+lua。

首先看看checkbox的实现，我用来实现男女性别的选择。

local manCheck = self:getChild("CheckBox_Man")
local womanCheck = self:getChild("CheckBox_Woman")
if manCheck and womanCheck then
	local function callback(sender, eventType)
		if eventType == ccui.CheckBoxEventType.selected then
			if sender == manCheck then
				womanCheck:setSelectedState(false)
			else
				manCheck:setSelectedState(false)
			end
		elseif eventType == ccui.CheckBoxEventType.unselected then
			if sender == manCheck then
				womanCheck:setSelectedState(true)
			else
				manCheck:setSelectedState(true)
			end
		end
	end
	manCheck:addEventListener(callback)
	womanCheck:addEventListener(callback)
	manCheck:setSelectedState(true)
	womanCheck:setSelectedState(false)
end	

然后再来一个table按钮的实现。

先定义一些table的常量定义：

--定义常量
local Item_Tag_All        = 1000
local Item_Tag_Equip      = 1001
local Item_Tag_Material   = 1002
local Item_Tag_Other      = 1003

local ButtonSwitch =
{
	[Item_Tag_All] = "全部",
	[Item_Tag_Equip] = "装备",
	[Item_Tag_Material] = "材料",
	[Item_Tag_Other] = "其他",
}

然后创建按钮，并设置tag：

--筛选按钮
local width = title_bg:getContentSize().width
for tag = Item_Tag_All, Item_Tag_Other do
	if ButtonSwitch[tag] then
		local curbtn = ccui.Button:create()
		curbtn:setTouchEnabled(true)
		curbtn:setScale9Enabled(true)
		curbtn:loadTextures(BTN__NORMAL, BTN_SELECTED, "", ccui.TextureResType.plistType)
		curbtn:setSize(cc.size(100, 53))
		local size = curbtn:getContentSize()
		curbtn:setPosition(cc.p(width + size.width / 2, winSize.height - 20 - size.height / 2))
		curbtn:setTitleText(ButtonSwitch[tag])
		curbtn:setTitleFontSize(25)
		curbtn:setTag(tag)
		self._widget:addChild(curbtn)

		--注册点击事件
		local function callback_tag(sender, eventType)
			if eventType == ccui.TouchEventType.ended then
				showTable(tag)
			end
		end
		curbtn:addTouchEventListener(callback_tag)
		width = width + curbtn:getContentSize().width + 10
	end
end

最后是显示按钮的规则，把同组的其他table设置成正常，选中的设置成高亮：

--显示一个table
function showTable(showTag)
    for tag = Item_Tag_All, Item_Tag_Other do
        local tagBar = self._widget:getChildByTag(tag)
        if tagBar then
            if showTag == tag then
                tagBar:setBrightStyle(ccui.BrightStyle.highlight)
            else
                tagBar:setBrightStyle(ccui.BrightStyle.normal)
            end
        end
    end
end

好了，分享完了。看看效果图吧！