GUI之CCControlExtension

Introduction

CCControl is inspired by the UIControl API class from the UIKit library of CocoaTouch. It provides a base class for Cocos2D control such as CCControlButton or CCControlSlider that convey user intent(用户意图) to the application.

The goal of CCControl is to define an interface and a base implementation for preparing action messages and initially dispatching them to their targets when certain events occur.

To use the CCControl class you have to subclass it and implement your own behavior.

How to use them

CCScale9Sprite

9-slice scaling（九切片） allows you to specify how scaling is applied to specific areas of a sprite. With 9-slice scaling (3x3 grid), you can ensure that the sprite does not become distorted(变形) when scaled.

This class allows you to define a cap insets which define the portions of the sprite that should not be stretched. For example if you have rounded corners for a button or a popup on the edges, you can specify that the corners must  not be stretched. The diagram below can help you to visualize how the image is cut:

The cap inset describes a rectangle (in the most case the center region) which cuts the sprite into a grid of 3 * 3, which allows the class to know which portions can be stretched or not. In this example, we have defined the cap      insets in such a way that the corners must not be resized. The left and right sides will resize the height only while the top and bottom sides will resize only the length, and the center will stretch the height and the length.

As you can imagine this technique is very useful when you need to dynamically resize elements like popups or buttons. Indeed, here we don’t know the size of the button’s title in advance, and this technique allows the button to fit   the background dynamically under the title.

Now that you know how CCScale9Sprite works, I’m going to show you how to create buttons with CCControlButton.

CCControlButton

Button control for Cocos2D. A button intercepts touch events and sends an action message to a target object when tapped. Methods for setting the target and action are inherited from CCControl.

Samlpe Code:

 1CCSize screenSize = CCDirector::sharedDirector()->getWinSize();
 2
 3cocos2d::extension::CCScale9Sprite *backgroundButton = cocos2d::extension::CCScale9Sprite::create("button.png");
 4cocos2d::extension::CCScale9Sprite *backgroundHighlightedButton = cocos2d::extension::CCScale9Sprite::create("buttonHighlighted.png");
 5
 6// Creates a button with this string as title
 7CCLabelTTF *titleButton = CCLabelTTF::create("hello", "Marker Felt", 30);
 8titleButton->setColor(ccc3(159, 168, 176));
 9cocos2d::extension::CCControlButton *button = cocos2d::extension::CCControlButton::create(titleButton, backgroundButton);
10button->setBackgroundSpriteForState(backgroundHighlightedButton, cocos2d::extension::CCControlStateHighlighted);
11button->setTitleColorForState(ccWHITE, cocos2d::extension::CCControlStateHighlighted);
12button->setPosition(ccp (screenSize.width / 2, screenSize.height / 2));
13
14addChild(button);

CCControlColourPicker

Colour Picker control for Cocos2D. The color picker is a very useful control tool to preview and test color values.

CCControlPicker

The CCControlPicker class implements objects, called control pickers, that use a spinning-wheel or slot-machine metaphor to show one set of values. Users select values by rotating the wheels so that the desired row of values aligns with a selection indicator.

CCControlPickerRow

The CCControlPickerRow class implements the row node representation for the CCControlPicker.
A row node implements some methods and callbacks to make the CCControlPicker customization more easier.

CCControlPotentiometer

A CCControlPotentiometer object is a visual control used to select a single value in a circular motion from a continuous range of values. An indicator notes the current value of the potentiometer and can be moved by the user to change the setting.

CCControlSlider

A CCControlSlider object is a visual control used to select a single value from a continuous range of values. An indicator, or thumb, notes the current value of the slider and can be moved by the user to change the setting.

CCControlStepper

CCControlStepper is a stepper control which provides a user interface for incrementing or decrementing a value.

If you set stepper behavior to “autorepeat” (which is the default), pressing and holding one of its buttons increments or decrements the stepper’s value repeatedly. The rate of change depends on how long the user continues pressing the control.

CCControlSwitch

The CCControlSwitch class is useful to create and manage On/Off buttons, for example, in the option menus for volume:

The CCControlSwitch class declares a property and a method to control its on/off state. As with CCControlSlider, when the user manipulates the switch control (“flips” it) a CCControlEventValueChanged event is generated, which results in the control (if properly configured) sending an action message.