cocos2dx-容器的使用
UIScrollView* scrollView = UIScrollView::create();
scrollView->setTouchEnabled(true);
scrollView->setSize(Size(280, 150));
Size backgroundSize = background->getContentSize();
scrollView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2 +
(backgroundSize.width - scrollView->getSize().width) / 2,
(widgetSize.height - backgroundSize.height) / 2 +
(backgroundSize.height - scrollView->getSize().height) / 2));
m_pUiLayer->addWidget(scrollView);
UIImageView* imageView = UIImageView::create();
imageView->loadTexture("cocosgui/ccicon.png");
float innerWidth = scrollView->getSize().width;
float innerHeight = scrollView->getSize().height + imageView->getSize().height;
scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));
imageView->setPosition(Point(innerWidth / 2, imageView->getSize().height / 2));
scrollView->addChild(imageView);
// 为 scrollview 添加其它控件，省略
请看如图效果，这里创建了一个 ScrollView 控件，并且添加了一些内部元素，以完成布局，控件内容超出显示区域，我们可以通过上下拖动，来显示上下未未显示的不分。
注意： imageView 设置的位置在 scrollview 之外，可以通过 scrollview 的 setInnerContainerSize 方法设置包含内容的区域大小，在拖动的过程中，边界检查。
如果是设置横向的拖动效果，我们只需要设置 InnerContainerSize 的 宽度大于控件的大小，高度相同，就能实现横向的拖动效果。
容器层的使用-UIListView
UIListView, UIListViewEx(2.2.1)
ListView 继承自 ScrollView，所以 ScrollView 里面有的功能，特性，在 ListView 中也都能体现出来。那么 ListView 相比较 ScrollView 多了些什么呢？还是先从使用方法上开始：
UIListView* lv = UIListView::create();
UIButton* model = UIButton::create();
model->loadTextures("cocosgui/animationbuttonnormal.png", "cocosgui/animationbuttonpressed.png", "");
lv->setItemModel(model);
for (int i=0; i<20; i++)
{
lv->pushBackDefaultItem();
}
lv->setItemsMargin(10);
lv->setGravity(LISTVIEW_GRAVITY_CENTER_HORIZONTAL);
lv->setSize(Size(100, 100));
lv->setBackGroundColorType(LAYOUT_COLOR_SOLID);
lv->setBackGroundColor(Color3B::GREEN);
lv->setPosition(Point(100, 100));
m_pUiLayer->addWidget(lv);
如图，但不能很好的看到效果，这里是类似 ScrollView 的实现，可以实现拖动，并且有二十个按钮在这其中。先说说普通的属性，通过ItemsMargin 设置每个元素的间距， 通过 Gravity 设置布局方案，这里是横向剧中显示。
lv->setItemModel(model) 为 ListView 设置了默认的项 (Default Item)，然后通过一个 for 循环，添加了 20 次此默认的项，注意这 20 次并不是说， model 被添加了 20 次，二十在每次添加的时候都对 model 做了一个 克隆，它们拥有相同的属性，但却不是同一个对象。
除了使用 pushBackDefaultItem() 为 ListView 添加项之外，我们还可以通过以下方法添加：
除了使用 pushBackDefaultItem() 为 ListView 添加项之外，我们还可以通过以下方法添加：
| 方法 | 说明 |
|---|---|
| pushBackDefaultItem() | 添加一个默认项 |
| insertDefaultItem(int index) | 插入一个默认项，有序的 |
| pushBackCustomItem(UIWidget* item) | 添加一个新项 |
| insertCustomItem(UIWidget* item, int index) | 插入一个新项 |
以上是提供的一些添加项的方法，除了以上还有一些删除的方法，获取的方法，以便我们能够灵活的操作其中的每个元素：
| removeItem(int index) | 移除一个项 |
| removeLastItem() | 移除最后一个项 |
| getItem(unsigned int index) | 根据索引获取一个项 |
| getItems() | 获取所有项，返回 Array 集合 |
| getIndex(UIWidget *item) | 获取一个项的索引 |
容器层的使用- UIPageView
除了可以滚动显示的 ScrollView ， 根据项来显示列表的控件之外，还有可以根据 页 来显示 PageView。 PageVew 可以让我们整页整页的显示内容，并且可以做自动对齐，什么是自动对齐，就像你的书翻页，只翻了一半，它回自动帮你翻过去一样。UIPageView* pageView = UIPageView::create();
pageView->setTouchEnabled(true);
pageView->setSize(Size(240, 130));
Size backgroundSize = background->getContentSize();
pageView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2 +
(backgroundSize.width - pageView->getSize().width) / 2,
(widgetSize.height - backgroundSize.height) / 2 +
(backgroundSize.height - pageView->getSize().height) / 2));
for (int i = 0; i < 3; ++i)
{
UILayout* layout = UILayout::create();
layout->setSize(Size(240, 130));
UIImageView* imageView = UIImageView::create();
imageView->setTouchEnabled(true);
imageView->setScale9Enabled(true);
imageView->loadTexture("cocosgui/scrollviewbg.png");
imageView->setSize(Size(240, 130));
imageView->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));
layout->addChild(imageView);
UILabel* label = UILabel::create();
label->setText(CCString::createWithFormat("page %d", (i + 1))->getCString());
label->setFontName(font_UIPageViewTest);
label->setFontSize(30);
label->setColor(Color3B(192, 192, 192));
label->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));
layout->addChild(label);
pageView->addPage(layout);
}
pageView->addEventListenerPageView(this, pagevieweventselector(UIPageViewTest::pageViewEvent));
m_pUiLayer->addWidget(pageView);
如图显示，创建了一个 PageView 对象 pageView，设置大小为 "Size(240, 130)"，这也就是它的显示区域大小了。我们使用一个 for 循环，添加了三个同样的元素 UILayout ，每个 UILayout 的大小也都是 Size(240, 130)，所以 PageView 一次正好能够显示一个项的内容，也就是 "页"。至于每个页的 UILayout 里面装着什么，那就是根据自己的需要而定了。然后使用 pageView->addPage(layout) 添加一个页，需要注意的是，这里所添加的必须是 UILayout 类型对象或者其派生类对象。
PageView 虽然实现了滑动，滚动的效果，但它并不是继承自 ScrollView 的，而是直接继承自 UILayout 的，那怎么实现滚动的呢，它集成并且实现了 UIScrollInterface 类型，这赋予了它可以滚动的属性。ScrollView 也是同样。
各个控件组成了丰富的 GUI 界面，而容器层则是其骨架，通过它的布局，来达到我们想要的效果。从 Panel 到 ScrollView ，Listview 和 PageView ，根据实际的需要灵活的组织可以让我们的界面显示的更为友好。