枫叶天空Cocos2d-x3.0系列教程三 ui教程2 布局组件

最新推荐文章于 2023-04-21 15:03:34 发布

SunixSky

最新推荐文章于 2023-04-21 15:03:34 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ui Cocos2d-X 组件

本文链接：https://blog.youkuaiyun.com/sunixsky/article/details/18901171

本教程详细介绍了Cocos2d-x3.0中的布局组件，包括layout（Panel）、ScrollView、ListView和PageView。通过学习，可以掌握这些组件的基本用法，提升游戏开发效率。例如，ListView是游戏开发的核心组件，适用于创建背包、技能树等复杂场景。接下来的教程将讨论自定义组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本节继续讲述cocos2d-x的组件——布局组件，本节内容如下：

1、layout组件

2、ScrollView组件

3、ListView组件

4、PageView组件

准备工作

同前面的内容一样，在这里我们也建立一个LayoutManager类来管理我们的布局组件，头文件代码如下：

#include "cocos2d.h"
#include "CocosGUI.h"

USING_NS_CC;
using namespace gui;

class LayoutManager :public cocos2d::Sprite{
public:
	//调用宏CREATE_FUNC，使系统自动的为LayoutManager类创建一个create方法
	CREATE_FUNC(LayoutManager);
	//测试布局组件
	void testLayoutComponents();

private:
	//测试面板
	void testLayout();
	//测试滚动视图
	void testScrollView();
	//测试列表视图
	void testListView();
	//测试页面视图
	void testPageView();

	//列表项选择事件
	void selectEvent(Object *pSender, ListViewEventType type);
	//滚动视图事件
	void scrollEvent(Object *pSender, ScrollviewEventType type);
	//页面视图事件
	void pageViewEvent(Object* pSender, PageViewEventType type);
};

layout组件

layout组件即我们常用的Panel，是基本的容器组件，源码如下：

void LayoutManager::testLayout(){
	Layout *layout = Layout::create();
	//设置面板的背景图
	layout->setBackGroundImage("bgStyle.png");

	//该控件提供了一个便捷的布局方案，详细内容可以参考官方文档
	//地址：http://www.cocos2d-x.org/docs/manual/framework/native/gui/container/zh

	layout->setPosition(ccp(200, 100));
	addChild(layout);
}

ScrollView组件

ScrollView，滚动视图组件，源码如下：

void LayoutManager::testScrollView(){
	ScrollView* scrollView = ScrollView::create();
	scrollView->addEventListenerScrollView(this, scrollvieweventselector(LayoutManager::scrollEvent));
	//为滚动视图设置一个背景
	scrollView->se