Adapt the sliding screen to the underlying sliding Index

Adapt the sliding screen to the underlying sliding Index

The first is the encapsulated slide indicator class. First, create a drawing class: SliderIndicator. The code for this class is as follows:

// SliderIndicator. h # 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 ); // use CC_SYNTHESIZE to set the paint color protected: // refer to the previous article about the draw function void onDraw (const Mat4 & transform, bool transformUpdated); void draw (Renderer * renderer, const Mat4 & transform, bool transformUpdated); CustomCommand _ customCommand ;};

// SliderIndicator. 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, bool transformUpdated) {_ customCommand. init (_ globalZOrder); _ customCommand. func = CC_CALLBACK_0 (SliderIndicator: onDraw, this, transform, transformUpdated); renderer-> addCommand (& _ customCommand);} void SliderIndicator: onDraw (const cocos2d :: mat4 & transform, bool transformU Pdated) {// OpenGL sets Director * director = Director: getInstance (); CCASSERT (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 ); // CC_SYNTHESIZE setting _ circleColor DrawPrimitives: setDrawColor4B (_ circleColor. r, _ circleColor. g, _ circleColor. b, _ circleColor. a); // draw a solid dot DrawPrimitives: drawSolidCircle (Vec2 (0, 0), director-> getWinSize (). height/130, CC_DEGREES_TO_RADIANS (90), 50, 1.0f, 1.0f); // end draw ctor-> popMatrix (MATRIX_STACK_TYPE: MATRIX_STACK_MODELVIEW );}

Create the SliderIndicatorLayout class based on the number of Slide indicators. The Code is as follows:

// SliderIndicator. h # include "cocos2d. h "# include" ui/CocosGUI. h "USING_NS_CC; class SliderIndicatorLayout: public ui: Layout {public: CREATE_FUNC (SliderIndicatorLayout); virtual bool init (); // Add void addIndicator (int num) indicating the number of dots ); // The selected void changeIndicator (int index); private: Size winSize; float radius ;};

// SliderIndicatorLayout. 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 (); // set the size of each slide indicator. radius = winSize. height/130; bRet = true;} while (0); return bRet;} 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); // CC_SYNTHESIZE indicator-> setTag (I ); // set the Tag to facilitate future acquisition and change the sliding indicator addChild (indicator); // set the relative layout. The vertical layout is set for the project, in HelloWorld, set setRotation (-90) to 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);} indicator-> setLayoutParameter (lp_indicator);} changeIndicator (0 ); // The first slide indicator} void SliderIndicatorLayout: changeIndicator (int index) // change the selected slide indicator {for (int I = 0; I <getChildren (). size (); I ++) {auto indicator = dynamic_cast
 
  
(GetChildByTag (I); // obtain the slide indicator-> setCircleColor (Color4B (93,114,123, 95) based on the Tag; if (I = index) {indicator-> setCircleColor (Color4B (93,114,123,225); // you can change the color }}}
 

Usage:

1. Create a HelloWorld class

Create the SliderIndicatorLayout class in the HelloWorld class and pass in the number of Slide indicators through the addIndicator () function;

2. In the SliderIndicatorLayout class, when addIndicator sets the color and number of SliderIndicator indicators, you can call the SliderIndicator class to draw dots;

3. Execute the draw and ondraw functions in SliderIndicator. For specific implementation, see the TestCpp function.

4. In HelloWorld, run the changeIndicator () function through Event Response to complete the switching of the sliding indicator;

Use the HelloWorld class:

// HelloWorld. h # include "cocos2d. h "# include" cocos2d. h "# include" SliderIndicatorLayout. h "# include" ui/CocosGUI. h "using namespace cocos2d: ui; USING_NS_CC; class HelloWorld: public cocos2d: Layer {public: // 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 event // implement the "static create () "method manually CREATE_FUNC (HelloWorld );};

// HelloWorld. cpp # include "HelloWorldScene. h "# include" cocos2d. h "# include" ui/CocosGUI. h "# include" SliderIndicatorLayout. h "using namespace cocos2d: ui; USING_NS_CC; Scene * HelloWorld: createScene () {// 'Scene 'is an autorelease object auto scene = scene: create (); // 'player' is an autorelease object auto layer = HelloWorld: create (); // add layer as a child to scene-> addChild (layer); // return t He scene return scene;} // on "init" you need to initialize your instancebool HelloWorld: init () {// 1. super init first if (! Layer: init () {return false;} Size visibleSize = Director: getInstance ()-> getVisibleSize (); Vec2 origin = Director: getInstance () -> getVisibleOrigin (); // 2. add a menu item with "X" image, which is clicked to quit the program // you may modify it. // add a "close" icon to exit the progress. it's an autoreltailobject 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); // create PageView auto pageView = PageView: create (); pageView-> addEventListener (CC_CALLBACK_2 (HelloWorld: pageViewEvent, this); // pageView event // 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-> 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); // Add four pages for (int I = 0; I <4; I ++) {Layout * layout1 = Layout :: create (); layout1-> setSize (Size (visibleSize. width/2, visibleSize. height/2); 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); // set the page content 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);} addChild (pageView); // create slide indicator sliderIndicator = SliderIndicatorLayout :: create (); sliderIndicator-> retain (); sliderIndicator-> addIndicator (4); // input the number function sliderIndicator-> evaluate (false); sliderIndicator-> setAnchorPoint (Vec2 :: ANCHOR_MIDDLE); sliderIndicator-> setPosition (Vec2 (visibleSize. width/2,100); sliderIndicator-> setRotation (-90); addChild (sliderIndicator); // auto rp_slider = ui: RelativeLayoutParameter: create (); // rp_slider-> setAlign (cocos2d: ui: callback: RelativeAlign: callback); // sliderIndicator-> setLayoutParameter (rp_slider); return true;} void HelloWorld :: pageViewEvent (cocos2d: Ref * pSender, cocos2d: ui: PageView: EventType type) {auto pageView = dynamic_cast
 
  
(PSender); // get the current page auto index = pageView-> getCurPageIndex (); // get the index switch (type) {case cocos2d: ui: PageView:: EventType: TURNING: {sliderIndicator-> changeIndicator (index); // change the slide indicator} break; default: break;} 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 (); # if (CC_TARGET_PLATFORM = CC_PLATFORM_IOS) exit (0); # endif}
 

The execution result is as follows: