Cocos2dx之使用UI库结合cocostudio

本文详细介绍了如何使用CocosStudio UI编辑器创建UI界面,导出UI文件,并在Cocos2d-x中加载和集成各种UI控件,如按钮、滑动条、滚动层、复选框和文本输入框,同时提供了回调函数的实现示例。包括如何获取和监听这些控件的事件。
摘要由CSDN通过智能技术生成

使用cocostudio的UI编辑器编辑好UI界面,导出UI文件,直接在cocos2dx中使用,通过tag或者name来获取到UI控件

1、编辑ui界面,直接用模板然后拖几个控件过去



2、cocos2dx种加载这个编辑好的UI,必须先加载cocostudio库,具体操作参照:

http://blog.csdn.net/yangxuan0261/article/details/21651779

	//将编辑好的ui添加进去,是成员变量cocos2d::ui::Widget* layout;
	layout = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("DemoLogin/DemoLogin.ExportJson");
	layout->setPosition(Point::ZERO);
	this->addChild(layout);

	count = 0;
	this->schedule(schedule_selector(HelloWorld::aaa), 1.0f);

	//获取ui里的button,并添加监听
	Button* btn = (Button*)layout->getChildByName("login_Button");
	btn->addTouchEventListener(this, toucheventselector(HelloWorld::buttonEvent));

	//获取ui里的滑动条,并添加监听
	Slider* sl = (Slider*)layout->getChildByName("Slider_70");
	sl->addEventListenerSlider(this, sliderpercentchangedselector(HelloWorld::sliderPercentChangeEvent));

	//获取ui里的滚动层
	ui::ScrollView* sv = (ui::ScrollView*)layout->getChildByName("ScrollView_73");
	sv->setBackGroundColor(cocos2d::Color3B::GREEN);
	sv->setTouchEnabled(true);
	sv->setInnerContainerSize(Size(250, 250));
	sv->scrollToPercentBothDirection(Point(50, 50), 1, true);
	sv->setBackGroundColorType(LAYOUT_COLOR_SOLID);

	//获取ui里的复选框,并添加监听
	CheckBox* cb = (CheckBox*)layout->getChildByName("agree_CheckBox");
	cb->setTouchEnabled(true);
	cb->addEventListenerCheckBox(this, checkboxselectedeventselector(HelloWorld::checkSelectEvent1));

	//获取ui里的文字输入,并添加监听
	TextField* tf = (TextField*)layout->getChildByName("name_TextField");
	tf->setTouchEnabled(true);
	tf->setMaxLengthEnabled(true);
	tf->setMaxLength(10);
	tf->setPasswordEnabled(true);
	tf->addEventListenerTextField(this, textfieldeventselector(HelloWorld::textFiledEvent));

相应控件的回调函数

//定时器,用来显示进度条累加
void HelloWorld::aaa(float delta)
{
	count += 5;
	if (count <= 100)
	{
		LoadingBar* lb = (LoadingBar*)layout->getChildByName("LoadingBar_68");
		lb->setPercent(count);
	}
}

//图片按钮的回调函数
void HelloWorld::buttonEvent(Ref* obj, TouchEventType eventType)
{
	switch (eventType)
	{
	case TouchEventType::TOUCH_EVENT_BEGAN:
		CCLOG("begin");
		break;
	case TouchEventType::TOUCH_EVENT_MOVED:
		CCLOG("move");
		break;
	case TouchEventType::TOUCH_EVENT_ENDED:
		CCLOG("end");
		break;
	case TouchEventType::TOUCH_EVENT_CANCELED:
		CCLOG("cancel");
		break;
	default:
		break;
	}
}

//滑动条改变的回调函数
void HelloWorld::sliderPercentChangeEvent(Ref*pSender, SliderEventType type)
{
	if (type == SLIDER_PERCENTCHANGED)
	{
		Slider* pSlider = (Slider*)pSender;
		int percent = pSlider->getPercent();
		CCLOG("slider value=%d", percent);
	}
}

//勾选的换掉函数
void HelloWorld::checkSelectEvent1(Ref *pSender, CheckBoxEventType eventtype)
{
	//gui::UILabelAtlas * pLabelAtlas = dynamic_cast<UILabelAtlas *>(uiLayer->getWidgetByName("LabelAtlas_38"));
	LabelBMFont* lbm = (LabelBMFont*)layout->getChildByName("agree_LabelBMFont");
	switch (eventtype)
	{

	case CheckBoxEventType::CHECKBOX_STATE_EVENT_SELECTED:
		CCLOG("you select");
		/*const char* temp = { "you select" };
		lbm->setString(temp);*/
		break;

	case CheckBoxEventType::CHECKBOX_STATE_EVENT_UNSELECTED:
		CCLOG("you unselect");
		/*	const char* temp2 = "you unselect";
			lbm->setString(temp2);*/
		break;
	default:
		break;
	}
}

void HelloWorld::textFiledEvent(cocos2d::Ref *pSender, cocos2d::ui::TextFiledEventType eventtype)
{
	switch (eventtype)
	{
	case TextFiledEventType::TEXTFIELD_EVENT_ATTACH_WITH_IME:
		CCLOG("attach with_ime");
		break;
	case TextFiledEventType::TEXTFIELD_EVENT_INSERT_TEXT:
		CCLOG("insert text");
		break;
	case TextFiledEventType::TEXTFIELD_EVENT_DETACH_WITH_IME:
		CCLOG("detach with_ime");
		break;
	case TextFiledEventType::TEXTFIELD_EVENT_DELETE_BACKWARD:
		CCLOG("delete backward");
		break;
	default:
		break;
	}
}

void HelloWorld::pageViewEvent(Ref *pSender, PageViewEventType eventtype)
{
	switch (eventtype)
	{
	case PageViewEventType::PAGEVIEW_EVENT_TURNING:
		CCLOG("turning");
		break;

	}
}

3、运行效果






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蝶泳奈何桥.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值