Cocos2d-x 3.2以上版本实现滑动页面中间出现小圆点显示滑动多少页效果

1、在项目中添加类

（1）SliderIndicator.h

//
//  SliderIndicator.h
//  ht_mobile_cpp
//
//
//

#ifndef __ht_mobile_cpp__SliderIndicator__
#define __ht_mobile_cpp__SliderIndicator__

#include "cocos2d.h"
#include "ui/CocosGUI.h"

USING_NS_CC;

class SliderIndicator :public ui::Layout
{
public:

 CREATE_FUNC(SliderIndicator);

 virtual bool init();

 CC_SYNTHESIZE(Color4B, _circleColor, CircleColor);

 
protected:

 //重载draw方法
 virtual void draw(Renderer *renderer, const Mat4 &transform, uint32_t flags) override;

void onDraw(const Mat4 &transform, uint32_t flags);

//virtual void cocos2d::Layer::draw(Renderer *renderer, const Mat4 &transform, bool transformUpdated) ;//据说3.1以下版本可以  本人也没测过
 //void onDraw(const Mat4 &transform, bool transformUpdated);
 
 

 CustomCommand _customCommand;
};

#endif /* defined(__ht_mobile_cpp__SliderIndicator__) */

（2）SliderIndicator.cpp

//
//  SliderIndicator.cpp
//  ht_mobile_cpp
//
//
//

#include "SliderIndicator.h"

bool SliderIndicator::init()
{
 bool bRet = false;
 do
 {
  CC_BREAK_IF(!ui::Layout::init());
  bRet = true;
 } while (0);
 return bRet;
}

void SliderIndicator::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)
{

 _customCommand.init(_globalZOrder);
 _customCommand.func = CC_CALLBACK_0(SliderIndicator::onDraw, this, transform, flags);
 renderer->addCommand(&_customCommand);

}

void SliderIndicator::onDraw(const Mat4 &transform, uint32_t flags)
{
 Director* director = Director::getInstance();
 //CCASSERT(nullptr != director, Director is null when seting matrix stack);
 CC_ASSERT(nullptr != director, Director is null when seting matrix stack);
 director->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
 director->loadMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW, transform);
 DrawPrimitives::setDrawColor4B(_circleColor.r, _circleColor.g, _circleColor.b, _circleColor.a);
 DrawPrimitives::drawSolidCircle(Vec2(0, 0), director->getWinSize().height / 130, CC_DEGREES_TO_RADIANS(90), 50, 1.0f, 1.0f);
 //end draw
 director->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
}

（3）SliderIndicatorLayout.h

//
//  SliderIndicatorLayout.h
//  ht_mobile_cpp
//
//
//
#ifndef __ht_mobile_cpp__SliderIndicatorLayout__
#define __ht_mobile_cpp__SliderIndicatorLayout__

#include "cocos2d.h"
#include "ui/CocosGUI.h"

USING_NS_CC;

class SliderIndicatorLayout :public ui::Layout
{
public:
 CREATE_FUNC(SliderIndicatorLayout);
 //static cocos2d::Scene* createScene();
 virtual bool init();
 //添加指示圆点个数
 void addIndicator(int num);
 //选中的第几个
 void changeIndicator(int index);
private:
 Size winSize;
 float radius;
};

#endif /* defined(__ht_mobile_cpp__SliderIndicatorLayout__) */

（4）SliderIndicatorLayout.cpp

//
//  SliderIndicatorLayout.cpp
//  ht_mobile_cpp
//
//
//

#include "SliderIndicatorLayout.h"
#include "SliderIndicator.h"

//bool SliderIndicatorLayout::init()
//{
// bool bRet = false;
// do {
//  CC_BREAK_IF(!ui::Layout::init());
//
//  setLayoutType(cocos2d::ui::Layout::Type::VERTICAL);
//  winSize = Director::getInstance()->getWinSize();
//
//  radius = winSize.height / 130;
//
//  
//  bRet = true;
// } while (0);
// return bRet;
//}

bool SliderIndicatorLayout::init()
{
 if (!ui::Layout::init())
 {
  return false;
 }
 setLayoutType(cocos2d::ui::Layout::Type::VERTICAL);
 winSize = Director::getInstance()->getWinSize();
 radius = winSize.height / 130;

 return true;
}

void SliderIndicatorLayout::addIndicator(int num)
{
 setSize(Size(radius * 2, radius * 3 * num));
 for (int i = 0; i < num; i++)
 {
  auto indicator = SliderIndicator::create();
  indicator->setSize(Size(radius, radius));
  indicator->setCircleColor(Color4B(255, 40, 255, 255));
  indicator->setTag(i);
  addChild(indicator);

  auto lp_indicator = ui::LinearLayoutParameter::create();
  lp_indicator->setGravity(cocos2d::ui::LinearLayoutParameter::LinearGravity::TOP);
  lp_indicator->setMargin(ui::Margin(0, radius * 2.0f, 0, 0));
  if (i == 0)
  {
   lp_indicator->setMargin(ui::Margin(0, 0, 0, 0));

  }
  indicator->setLayoutParameter(lp_indicator);

 }
 changeIndicator(0);
}

void SliderIndicatorLayout::changeIndicator(int index)
{
 for (int i = 0; i < getChildren().size(); i++)
 {
  //auto indicator = dynamic_cast<sliderindicator*>(getChildByTag(i)); SliderIndicator
  auto indicator = dynamic_cast<SliderIndicator*>(getChildByTag(i));
  //indicator->setCircleColor(Color4B(255, 40, 255, 25));
  indicator->setCircleColor(Color4B(93, 114, 123, 95));
  if (i == index)
  {
   //indicator->setCircleColor(Color4B(255, 40, 255, 255));
   indicator->setCircleColor(Color4B(93, 114, 123, 225));//改变颜色即可
  }
 }
}

2、滑动类的测试

（1）HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
#include "SliderIndicatorLayout.h"
#include "ui/CocosGUI.h"
using namespace cocos2d::ui;
USING_NS_CC;

class HelloWorld : public cocos2d::Layer
{
public:
 Menu *menu;

 // there's no 'id' in cpp, so we recommend returning the class instance pointer
 static cocos2d::Scene* createScene();

 // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
 virtual bool init();

 SliderIndicatorLayout* sliderIndicator;
 // a selector callback
 void menuCloseCallback(cocos2d::Ref* pSender);
 void pageViewEvent(Ref *pSender, cocos2d::ui::PageView::EventType type);//PageView事件
 // implement the "static create()" method manually
 CREATE_FUNC(HelloWorld);
};
#endif // __HELLOWORLD_SCENE_H__

（2）HelloWorldScene.cpp

#include "HelloWorldScene.h"

#include "cocos2d.h"
#include "ui/CocosGUI.h"
#include "SliderIndicatorLayout.h"

using namespace cocos2d::ui;

Scene* HelloWorld::createScene()
{
    // 'scene' is an autorelease object
    auto scene = Scene::create();
   
    // 'layer' is an autorelease object
    auto layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
   
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

 /*
    auto closeItem = MenuItemImage::create(
                                           "CloseNormal.png",
                                           "CloseSelected.png",
                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
   
 closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
                                origin.y + closeItem->getContentSize().height/2));

    // create menu, it's an autorelease object
    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);
 */
 //创建PageView
 auto pageView = PageView::create();
 pageView->addEventListener(CC_CALLBACK_2(HelloWorld::pageViewEvent, this));//pageView事件
 /*    pageView->setLayoutType(cocos2d::ui::Layout::Type::RELATIVE);
  pageView->setBackGroundColorType(ui::Layout::BackGroundColorType::SOLID);
  pageView->setBackGroundColor(Color3B::BLACK);*/
 pageView->ignoreAnchorPointForPosition(false);
 pageView->setAnchorPoint(Vec2(0.5, 0.5));
 //pageView->setSize(Size(visibleSize.width / 2, visibleSize.height / 2));
 pageView->setSize(Size(visibleSize.width, visibleSize.height));
 pageView->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));

 //    auto rp_pageView = RelativeLayoutParameter::create();
 //    rp_pageView->setAlign(RelativeLayoutParameter::RelativeAlign::CENTER_IN_PARENT);
 //    pageView->setLayoutParameter(rp_pageView);
 //  增加4个page   
 for (int i = 0; i < 4; i++)
 {
  Layout* layout1 = Layout::create();
  //layout1->setSize(Size(visibleSize.width / 2, visibleSize.height / 2));
  layout1->setSize(Size(visibleSize.width, visibleSize.height));

  ImageView* imageView = ImageView::create("scrollviewbg.png");
  imageView->setScale9Enabled(true);
  imageView->setSize(Size(visibleSize.width, visibleSize.height));
  imageView->setPosition(Point(layout1->getSize().width / 2, layout1->getSize().height / 2));
  layout1->addChild(imageView);

  //设置page内容

  Text* label = Text::create(StringUtils::format("page %d", (i + 1)), "fonts/Marker Felt.ttf", 30);
  label->setColor(Color3B(92, 192, 192));
  label->setPosition(Point(layout1->getSize().width / 2.0f, layout1->getSize().height / 2.0f));
  layout1->addChild(label);
  pageView->addPage(layout1); //将loyout添加到pageview
 }
 addChild(pageView); //将pageview添加到当前的页面上
 //创建滑动指标
 sliderIndicator = SliderIndicatorLayout::create();
 sliderIndicator->retain();
 sliderIndicator->addIndicator(4);//传入个数函数
 sliderIndicator->ignoreAnchorPointForPosition(false);
 sliderIndicator->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
 sliderIndicator->setPosition(Vec2(visibleSize.width / 2, 100));
 //sliderIndicator->setPosition(Vec2(visibleSize.width /2, visibleSize.height/2.0+100));

 //sliderIndicator->setPosition(Vec2(150, 150));
 sliderIndicator->setRotation(-90);
 addChild(sliderIndicator); //将圆点添加到当前的页面上

 //    auto rp_slider = ui::RelativeLayoutParameter::create();
 //    rp_slider->setAlign(cocos2d::ui::RelativeLayoutParameter::RelativeAlign::CENTER_IN_PARENT);
 //    sliderIndicator->setLayoutParameter(rp_slider);
 //添加箭头和事件
 /*Size visibleSize = Director::getInstance()->getVisibleSize();
 Vec2 origin = Director::getInstance()->getVisibleOrigin();*/
 auto closeItem = MenuItemImage::create("f1.png", "f2.png", CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
 closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width / 2, origin.y + closeItem->getContentSize().height / 2));
 menu = Menu::create(closeItem, NULL);
 menu->setPosition(Vec2::ZERO);
 menu->setVisible(false);
 this->addChild(menu, 1);
 
   
    return true;
}

void HelloWorld::menuCloseCallback(Ref* pSender)
{
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
 MessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
    return;
#endif

   // Director::getInstance()->end();
 //auto indeScene = IndexPage::createScene();
 //Director::getInstance()->replaceScene(indeScene);

 //Director::getInstance()->popScene(); //从游戏场景出去

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
    exit(0);
#endif
}

void HelloWorld::pageViewEvent(cocos2d::Ref *pSender, cocos2d::ui::PageView::EventType type)
{
 

 auto pageView = dynamic_cast<PageView*>(pSender);//获取当前页面
 auto index = pageView->getCurPageIndex();//获取当前页面的index
 switch (type)
 {
  case cocos2d::ui::PageView::EventType::TURNING:
  {
   sliderIndicator->changeIndicator(index);//根据page的index改变滑动指标
   break;
  }
  default:
  {
   break;
  }
 }
 
 if (index == 3)
 {
  menu->setVisible(true);
 }
 else
 {
  menu->setVisible(false);
 }
}