Cocos2dx之使用UI庫結合cocostudio

君墨痕發表於2014-03-21
UI

使用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、執行效果






相關文章