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

好了,分享完了。看看效果图吧!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

微信小程序实战–集阅读与电影于一体的小程序项目(六)

27160
来自专栏编程

前端学习自学笔记:day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第六天的笔记:HTML AND CSS: te...

22750
来自专栏GreenLeaves

CSS-DOM介绍

三位一体的网页: 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体: 1、结构层: 结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些...

19980
来自专栏雨尘分享

iOS 动画基础总结篇

25150
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 overflow 篇

如果overflow-x、overflow-y的值相同,则等同于overflow设置了这个值。

15010
来自专栏web

慕课网javascript 进阶篇 第十章 编程练习

13010
来自专栏web前端

HTML+CSS基础

第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

93190
来自专栏TechBox

一篇文章详解iOS之AutoResizing、AutoLayout、sizeClass来龙去脉前言三大适配技术

35360
来自专栏前端知识分享

第54天:原生js实现轮播图效果

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

62110
来自专栏前端知识分享

第131天:移动web页面的排版与布局

html{  font-size:1mm;  }  .titleheight{  height:10rem; //这里等于10mm  width:11rem; ...

33910

扫码关注云+社区

领取腾讯云代金券