[Qboy原创]

在Cocos2dX 3.0 中已经实现一些牛逼的滚动层，但是对于有一些需要实现循环滚动的要求确没有实现，笔者在前段时间的一个做了一个游戏，需求是实现在少有的（13个）英雄中进行循环滚动层，即用户可以无限的向一个方向滚动，当到最后时，由前面的进行重复出现。

如下图：

为了满足以上需求，我第一反应就想到了采用大学数据结构中所学的双向链表。想想还真称靠谱诶。那就说干就干吧。

1、定义双向链接表结构：

struct CycNode{//构建双向链表结构

CycNode* preNode;//前一个节点

cocos2d::gui::ImageView* node; //所对应的Node

CycNode* nextNode;//后一个节点

};

2、定义回调函数

由于在本游戏中拖拽还有一些事件，所以需要向外暴露一些事件。定义如下：

class CycScrollDelegate{

public:

virtual void dragBeginNode(cocos2d::Node* node,cocos2d::Touch* touch) = 0; //开始拖拽时拖拽的节点

virtual void dragMoveNode(cocos2d::Node* node,cocos2d::Touch* touch) = 0; //拖拽移动时拖拽的节点

virtual void dragEndNode(cocos2d::Node* node,cocos2d::Touch* touch) = 0; //拖拽结束后拖拽的节点

};

其实以上事件都会在层的Touch事件中实现

3、定义实现类

.h文件：

class CycScrollView:public cocos2d::gui::Widget{

CC_SYNTHESIZE(float, scrollHeight, ScrollHeight);//设置滚动时的高度限制 CC_SYNTHESIZE(CycScrollDelegate*, owerner, Owerner);

private:

CycNode* pFirstCycNode;

cocos2d::Node* selNode;

Size winSize;

bool canScroll;

public:

virtual void onExit();

virtual bool init();

CREATE_FUNC(CycScrollView);

public:

void loadScrollView(std::vector<cocos2d::gui::ImageView*> listNode); //真实加载循环滚动条中的Vector文件

};

.cpp 文件

(1)实现双向链表，并将双向链表构成环状

for (cocos2d::gui::ImageView* n: listNode) {//定义成双向链表节点

CycNode* cycnode = new CycNode();

cycnode->node = n;

n->setUserData(&cycnode);//将节点反向回双向链表

cycnode->preNode = pcycNode;

if(pcycNode){

pcycNode->nextNode = cycnode;

}

pcycNode = cycnode;

if(pFirstNode==NULL){

pFirstNode = cycnode;

}

}

（2）将节点设定相应的锚点和坐标，并添加到Widge上

int index=0;

for (cocos2d::gui::ImageView* n: listNode) {

n->setAnchorPoint(Point::ZERO);

n->setPosition(Point(index*C_WIDTH,0));

addChild(n);

index++;

}

canScroll = C_WIDTH*listNode.size()>winSize.width;//设定是否需要循环滚动，如果小于可视化大小的话，则不需要滚动。

（3）注册页面的Touch事件，回调相应的Touch事件。

auto listener = EventListenerTouchOneByOne::create();

listener->setSwallowTouches(true);

listener->onTouchBegan = [this](Touch* touch,Event* e){

curPoint = touch->getLocation();

curPoint = convertToNodeSpace(curPoint);

selNode = nullptr;

if(owerner){

CycNode* pcurNode = pFirstCycNode;

do {

Size nodeSize = pcurNode->node->getSize();

Point p = pcurNode->node->getPosition();

Rect r = Rect(p.x, p.y, nodeSize.width, nodeSize.height);

if(r.containsPoint(curPoint)){

selNode = pcurNode->node;

owerner->dragBeginNode(pcurNode->node, touch);

break;

}

pcurNode=pcurNode->nextNode;

} while (pcurNode!=pFirstCycNode);

}

if(curPoint.y>0&&curPoint.y<scrollHeight){

return true;

}

return false;

};

listener->onTouchMoved = [this](Touch* touch,Event* e){

if(!canScroll){

return;

}

Point newPoint = touch->getLocation();

newPoint = convertToNodeSpace(newPoint);

float deltaX = newPoint.x-curPoint.x;

CycNode* pmoveFirst = NULL;

CycNode* pcurNode = this->pFirstCycNode;

int index = 0;

float y;

if(deltaX<0){//向左移

float maxX = 0;

do {

Point nPoint = (pcurNode->node)->getPosition();

float preX = nPoint.x;

if(preX>maxX&&preX<=winSize.width){

pmoveFirst = pcurNode;

maxX = preX;

y=nPoint.y;

}

index++;

pcurNode = pcurNode->nextNode;

}while (pcurNode!=pFirstCycNode);

pmoveFirst->nextNode->node->setPosition(Point(maxX+C_WIDTH,y));

}

if(deltaX>0){//向右移

float minX = 1200;

float y;

do {

Point nPoint = (pcurNode->node)->getPosition();

float preX = nPoint.x;

if(preX<minX&&preX>=0){

pmoveFirst = pcurNode;

minX = preX;

y=nPoint.y;

}

index++;

pcurNode = pcurNode->nextNode;

}while (pcurNode!=pFirstCycNode);

pmoveFirst->preNode->node->setPosition(Point(minX-C_WIDTH,y));

}

if(pmoveFirst){

pcurNode=pmoveFirst;

do {

Point nPoint = (pcurNode->node)->getPosition();

float newX = nPoint.x+deltaX;

(pcurNode->node)->setPosition(Point(newX,y));

pcurNode = pcurNode->nextNode;

}while (pcurNode!=pmoveFirst);

}

if(owerner&&selNode){

owerner->dragMoveNode(selNode, touch);

}

curPoint = newPoint;

};

listener->onTouchEnded=[this](Touch* touch,Event*){

Point newPoint = touch->getLocation();

newPoint = convertToNodeSpace(newPoint);

if(owerner&&selNode){

owerner->dragEndNode(selNode, touch);

}

};

listener->onTouchCancelled=[this](Touch* touch,Event*){

Point newPoint = touch->getLocation();

newPoint = convertToNodeSpace(newPoint);

if(owerner&&selNode){

owerner->dragEndNode(selNode, touch);

}

};

_eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);

 4、后续

在本例已大体体现了需求，如果有需要比如上下滚动的可以相应的进行调整修改，其他的需求进行酌情进行增减。另外，在本例中也没有实现IOS中滚动层滚动手势加速功能（目前也还没有想好，有思路的朋友可以告诉我哦）。