Cocos2d-x UI组件

3.0版本创建项目后，GUI相关的库是没有默认添加到项目中的，如果直接使用会编译不通过（例如：fatal error C1083: 无法打开包括文件:“cocostudio/ObjectFactory.h”: No such file or directory），下面是解决这个问题的流程:

一、在工程里添加3个项目：

①cocos2d/cocos/editor-support/cocostudio/proj.win32/libCocoStuido

②cocos2d/cocos/gui/proj.win32/libGUI

③cocos2d/extensions/proj.win32/libExtensions
添加方法：右键点击解决方案->添加->现有项目->选择以上3个项目

二、在自己的项目上引用以上3个lib
引用方法：右键项目->引用->添加新引用
三、最后一步，添加包含目录
添加方法：右键项目->属性->配置属性->C/C++ ->常规->附加包含目录(cocos2d\cocos\editor-support)

下面是一些常用的组件使用示例

①Layout ，这是一个容器，所有ui组件都可以添加到里面

Layout* tlay = Layout::create();
tlay->setSize(cocos2d::Size(500,500));
tlay->setPosition(cocos2d::Point(winsize.width/2 - tlay->getSize().width/2,winsize.height/2 - tlay->getSize().height/2));
addChild(tlay);

//设置背景颜色，不要忘记设置背景颜色类型，否则默认颜色是不显示的
tlay->setBackGroundColorType(LayoutBackGroundColorType::LAYOUT_COLOR_SOLID);
tlay->setBackGroundColor(cocos2d::Color3B(192,192,192));

//背景也可以设置成图片，setClippingEnabled（true）意思是使用当前容器的size裁剪大小，背景超过容器大小的部分不会显示
//tlay->setBackGroundImage("map.jpg");
//tlay->setBackGroundImageScale9Enabled(true);
//tlay->setClippingEnabled(true);

②Button 

Button* tbutton = Button::create();
tbutton->setTouchEnabled(true);//默认不相应触摸的，所以要手动设置成true
tbutton->loadTextures("ui/btn_83.png","ui/btn_83_01.png");
tbutton->setPosition(cocos2d::Point(tlay->getSize().width/2,tlay->getSize().height - tbutton->getSize().height/2));
tlay->addChild(tbutton);

tbutton = Button::create();
tbutton->setTouchEnabled(true);
tbutton->setTitleText("Text Button");//设置显示在按钮上的文字
tbutton->loadTextures("ui/btn_103.png","ui/btn_104.png");
tbutton->setPosition(cocos2d::Point(tbutton->getSize().width/2,tlay->getSize().height/2));
tlay->addChild(tbutton);

tbutton = Button::create();
tbutton->setTouchEnabled(true);
tbutton->setScale9Enabled(true);//开启9宫
tbutton->loadTextures("ui/btn_83.png","ui/btn_104.png");
tbutton->setSize(cocos2d::Size(300,100));
tbutton->setPosition(cocos2d::Point(tlay->getSize().width/2,tbutton->getSize().height/2));
tlay->addChild(tbutton);

③ScrollView 可以滚动的界面

ScrollView* tscrollview = ScrollView::create();
tscrollview->setDirection(SCROLLVIEW_DIR::SCROLLVIEW_DIR_HORIZONTAL);//设置滚动方向，如果没有设置，就不能滚动
tscrollview->setBackGroundColorType(LayoutBackGroundColorType::LAYOUT_COLOR_SOLID);
tscrollview->setBackGroundColor(cocos2d::Color3B(255,255,255));
tscrollview->setTouchEnabled(true);
tscrollview->setSize(cocos2d::Size(300,300));
tscrollview->setPosition(cocos2d::Point(0,0));
tlay->addChild(tscrollview);
ImageView* timageView = ImageView::create();
timageView->loadTexture("map.jpg");
timageView->setPosition(cocos2d::Point((tscrollview->getSize().width + timageView->getSize().width)/2,timageView->getSize().height/2));
tscrollview->setInnerContainerSize(cocos2d::Size(tscrollview->getSize().width + timageView->getSize().width,tscrollview->getSize().height));
tscrollview->addChild(timageView);

④ListView 继承自ScrollView，不用在手动设置ContentSize，List内部会通过setItemsMargin设置的间距，自动布局子视图，默认是纵向列表，也可以通过设置方向，调整成横向列表。

ListView* tlist = ListView::create();
for(int i = 0 ;i < 20 ;i++)
{
	tbutton = Button::create("ui/btn_83.png");
	tlist->pushBackCustomItem(tbutton);
}
tlist->setItemsMargin(5);
tlist->setGravity(ListViewGravity::LISTVIEW_GRAVITY_CENTER_HORIZONTAL);
tlist->setSize(cocos2d::Size(200,200));
tlist->setBackGroundColor(cocos2d::Color3B(255,255,255));
tlist->setBackGroundColorType(LayoutBackGroundColorType::LAYOUT_COLOR_SOLID);
tlay->addChild(tlist);

⑤PageView  翻页组件，集成自 Layout，而不是scrollview

PageView* tpage = PageView::create();
tpage->setTouchEnabled(true);
tpage->setBackGroundColor(cocos2d::Color3B(100,100,255));
tpage->setBackGroundColorType(LayoutBackGroundColorType::LAYOUT_COLOR_SOLID);
tpage->setSize(cocos2d::Size(300,300));
for(int i = 0 ;i < 5; i++)
{
	Layout* ctn = Layout::create();
	ctn->setBackGroundColor(cocos2d::Color3B(255,50*i,50*i));
	ctn->setBackGroundColorType(LayoutBackGroundColorType::LAYOUT_COLOR_SOLID);
	ctn->setContentSize(tpage->getSize());

	tbutton = Button::create("flyitem.png");
	ctn->addChild(tbutton);
	tbutton->setPosition(cocos2d::Point(75/2,51/2));

	tpage->addPage(ctn);
}

⑥Label 

Label* tlabel = Label::create();
tlabel->setBMFontFilePath("ui/battlered.fnt");
tlabel->setString("123456787000");
tlabel->setPosition(200,100);
tlay->addChild(tlabel);

Tips:

UI相关组件是默认在ui命名空间下的，所以使用组件的时候要带上相应的命名空间，或者在代码块之前加上using namespace ui

容器的锚点一般在左下角，而非容器的锚点一般在中间