cocostudio Scrollview的使用

cocostudio是触控出品的UI编辑器，数据编辑器，动画编辑器以及场景编辑器的结合体。

使用cocostudio可以少写很多的代码，使游戏开发更加简单和快速。

这次我使用了cocostudio自带的Scrollview来做了一个界面，发现比以前单单使用代码的方式继承scrollview的方式确实是方便了不少，开发的速度也加快了不少。

首先，我是在cocostudio里面画了一个滚动层容器，注意的是滚动层的大小一定要比显示区域的大小要大，不然会出现不会滚动的情况。

至于在cocostudio怎样使用，可以去官网看看，很简单，这里就不讨论了。这里主要讨论实现scrollview里面某个item里面的button让点击的item排列到Scrollview的最后，并让

位于这个item后面的item项都能往前移动一位，直接贴代码：

#include "ScrollTest.h"


using namespace cocos2d;
using namespace cocos2d::extension;
using namespace ui;


ScrollTest::ScrollTest(int count)
:m_count(count)
{
}


ScrollTest::~ScrollTest()
{
}


ScrollTest* ScrollTest::create(int count)
{
ScrollTest* pRet = new ScrollTest(count);
if ( pRet && pRet->init())
{
pRet->autorelease();
return pRet;
}
else
{
delete pRet;
pRet = NULL;
}
}


bool ScrollTest::init()
{
bool isRet = false;
if ( !CCLayer::init())
{
return isRet;
}
isRet = true;

//创建cocostudio的层，并添加到游戏里面
this->m_uiLayer = UILayer::create();
this->addChild(this->m_uiLayer);

//载入cocostudio创建的文件，并加入创建的cocostudio的层里面
this->m_uiWidget = GUIReader::shareReader()->widgetFromJsonFile("ActionUI_1.json");
this->m_uiLayer->addWidget(this->m_uiWidget);、
//得到cocostudio里面设置好的scrollview
this->m_scrollview = (UIScrollView*)ui::UIHelper::seekWidgetByTag(this->m_uiWidget,14);
setScrollview();
}


void ScrollTest::setScrollview()
{
//设置Scrollview的滚动区域，数字可以自己改变
this->m_scrollview->setInnerContainerSize(CCSizeMake(1280,20*110));
for (int i = 0; i < 20; i++)
{

//在cocostudio里面我画了一个item，并调用clone复制了多份，并把它加入scrollview的子节点，这样对于scrollview的item项的编辑的工作就轻松很多了
UIWidget* widget = ui::UIHelper::seekWidgetByTag(this->m_uiWidget,17);
UIWidget* itemWidget = widget->clone();
itemWidget->setVisible(true);
itemWidget->setZOrder(2);
itemWidget->setAnchorPoint(ccp(0,0));
itemWidget->setPosition(ccp(0,2090-(i * 110)));

//为item项里面的button设置了Name这样的作用是方便记录我是点击了那个item的button
Button* button = (Button*)ui::UIHelper::seekWidgetByTag(itemWidget,19);
char userData[10];
sprintf(userData,"%d",i);
itemWidget->setName(userData);
button->setName(userData);
button->addTouchEventListener(this,toucheventselector(ScrollTest::buttonCallback));
CCLabelTTF* label = CCLabelTTF::create(userData,"Arial",30);
label->setPosition(ccp(353,67));
label->setAnchorPoint(ccp(0.5,0.5));
itemWidget->addNode(label);


ImageView* iview = (ImageView*)ui::UIHelper::seekWidgetByTag(itemWidget,18);
if ( i % 2 == 0 )
{

//为item项里面的imageview载入需要的纹理
iview->loadTexture("1002.png");
}
else
{
iview->loadTexture("1001.png");
}

//把作为item的widget放入链表，目的是为了当点击了某个item的button后，可以把这个item放入scrollview的底部，并让这个item后面的都往前移动一位
this->m_scrollview->addChild(itemWidget);
itemList.push_back(itemWidget);
}


}

//按钮的回调
void ScrollTest::buttonCallback(CCObject* pSender,TouchEventType type)
{
//char* data = NULL;
if ( type == TOUCH_EVENT_ENDED )
{
Button* button = (Button*)pSender;
const char* data = button->getName();
CCLog("data is %s\n",data);
int temp = atoi(data);
int i = 0;
list<Widget*>::iterator it = itemList.begin();
while ( it != itemList.end() )
{
if ( i == temp )
{

//重置链表，把点击的item移到链表的最后，并让这个item后面的item项都往前移动一位
Widget* widget = *it;
itemList.remove(widget);
itemList.push_back(widget);
updateScrollview();
return;
}
i++;
it++;
}
}


}


void ScrollTest::updateScrollview()
{
//把item从Scrollview删除，并根据链表重新绘制scrollview
list<Widget*>::iterator it = itemList.begin();
int i = 0;
while( it != itemList.end())
{
char data[10];
sprintf(data,i);

Widget* widget = *it；

widget->retain(); this->m_scrollview->removeChild(widget); widget->setVisible(true); widget->setZOrder(2); widget->setAnchorPoint(ccp(0,0)); \\位置根据实际情况调整widget->setPosition(ccp(0,2090-(i * 110))); Button* button = (Button*)ui::UIHelper::seekWidgetByTag(widget,19); button->setName(data); this->m_scrollview->addChild(widget); widget->release(); it++; i++; } }