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.

GUI之CCControlExtension的更多相关文章

  1. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  2. 如何通过Git GUI将自己本地的项目上传至Github

    最近在学习node.js和react,顺便复习了下AngluarJS相关的东西,写了些小demo想放在GitHub上,之前仅限于只申请了GitHub账号从没用过,今天花半天时间查资料认真学习Githu ...

  3. git图像化界面GUI的使用

    GIT学习笔记 一.        基础内容 1.git是一个版本控制软件,与svn类似,特点是分布式管理,不需要中间总的服务器,可以增加很多分支. 2.windows下的git叫msysgit,下载 ...

  4. egret GUI 和 egret Wing 是我看到h5 最渣的设计

    一个抄袭FlexLite抄的连自己思想都没有,别人精髓都不懂的垃圾框架.也不学学MornUI,好歹有点自己想法. 先来个最小可用集合吧: 1. egret create legogame --type ...

  5. [C#] 走进异步编程的世界 - 在 GUI 中执行异步操作

    走进异步编程的世界 - 在 GUI 中执行异步操作 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5877042.html 序 这是继<开始接 ...

  6. 1.JAVA之GUI编程概述

          下列内容为本人看毕向东老师java视频教程学习笔记! JAVA GUI图形用户界面编程: Windows 操作系统提供两种操作方式:                             ...

  7. 2.JAVA之GUI编程布局

    布局管理器 容器中的组件排放方式,就是布局 常见的布局管理器: **************************************************** 1.FlowLayout(流式 ...

  8. 3.JAVA之GUI编程Frame窗口

    创建图形化界面思路: 1.创建frame窗体: 2.对窗体进行基本设置: 比如大小.位置.布局 3.定义组件: 4.将组件通过add方法添加到窗体中: 5.让窗体显示,通过setVisible(tur ...

  9. 4.JAVA之GUI编程事件监听机制

    事件监听机制的特点: 1.事件源 2.事件 3.监听器 4.事件处理 事件源:就是awt包或者swing包中的那些图形用户界面组件.(如:按钮) 事件:每一个事件源都有自己特点有的对应事件和共性事件. ...

随机推荐

  1. jQuery实现iframe的自适应高度

    假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...

  2. 深入浅出Z-Stack 2006 OSAL多任务资源分配机制

    转自深入浅出Z-Stack 2006 OSAL多任务资源分配机制 一.概述 OSAL (Operating System Abstraction Layer),翻译为"操作系统抽象层&quo ...

  3. django ORM中update_or_create功能,如果只要匹配某一特定字段呢

    今天发现的需求,在官方文档找到说法: In English, that means start with any non-'defaults' keyword argument that doesn’ ...

  4. Android Studio 使用笔记:Git 的配置和第一次提交到仓库

    Git客户端网址:http://git-scm.com/download/ 根据自己的使用平台下载对应的客户端.这里以Mac系统为例,当客户端软件安装配置完毕后,打开AS的配置面板,找到Git的选项 ...

  5. Android MediaPlayer状态机

    对播放音频/视频文件和流的控制是通过一个状态机来管理的.下图显示一个MediaPlayer对象被支持的播放控制操作驱动的生命周期和状态.椭圆代表MediaPlayer对象可能驻留的状态.弧线表示驱动M ...

  6. oracle查询转换_view merge

    oracle对于子查询的支持做的很好,oracle optimizer会对inline view进行query transfomation,即视图合并,不过也经常带来意想不到的问题.下面是一个inli ...

  7. HDOJ/HDU 1180 诡异的楼梯(经典BFS-详解)

    Problem Description Hogwarts正式开学以后,Harry发现在Hogwarts里,某些楼梯并不是静止不动的,相反,他们每隔一分钟就变动一次方向. 比如下面的例子里,一开始楼梯在 ...

  8. poj 2451 Uyuw's Concert(半平面交)

    Uyuw's Concert Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 8580   Accepted: 3227 De ...

  9. Tsinsen A1504. Book(王迪) 数论,贪心

    题目:http://www.tsinsen.com/A1504 A1504. Book(王迪) 时间限制:1.0s   内存限制:256.0MB   Special Judge 总提交次数:359   ...

  10. 研磨设计模式解析及python代码实现——(二)外观模式(Facade)

    一.外观模式定义 为子系统中的一组接口提供一个一致的界面,使得此子系统更加容易使用. 二.书中python代码实现 class AModuleApi: def testA(self): pass cl ...