单选按钮

第三种常用的按钮类型就是单选按钮（radio　button）.我在做一个游戏的时候，发现自己需要一些单选按钮，但是，cocos2d的源代码里面并没有任何有关单选按钮的实现。因此，我们自己实现一个单选按钮。然后，当我在写这篇教程的时候，我发现另外两个人也写了一些《在cocos2d里面如何支持单选按钮》的文章–这意味着，在不久的将来，你将会在cocos2d的源文件里面看到有关单选按钮的实现。

但是，目前cocos2d里面还是没有，因此，在这期间，你可以免费地使用我上面提到的一些实现。这篇教程使用的是我自己写的单选按钮的实现。首先，下载CCRadioMenu.h和CCRadioMenu.m，然后把它们拖到你的Classes分组下面（确保复选“”）。然后在HelloWorldScene.m的顶部添加下面代码：

#import "CCRadioMenu.h"

然后，在init方法后面，紧跟你添加开关按钮的代码，添加下面代码：

CCMenuItem *menuItem1 = [CCMenuItemImage itemFromNormalImage:@"Button1.png"  selectedImage:@"Button1Sel.png" target:self selector:@selector(button1Tapped:)];CCMenuItem *menuItem2 = [CCMenuItemImage itemFromNormalImage:@"Button2.png"  selectedImage:@"Button2Sel.png" target:self selector:@selector(button2Tapped:)];CCMenuItem *menuItem3 = [CCMenuItemImage itemFromNormalImage:@"Button3.png"  selectedImage:@"Button3Sel.png" target:self selector:@selector(button3Tapped:)];CCRadioMenu *radioMenu =  [CCRadioMenu menuWithItems:menuItem1, menuItem2, menuItem3, nil];radioMenu.position = ccp(120, 180);[radioMenu alignItemsHorizontally];radioMenu.selectedItem = menuItem1;[menuItem1 selected];[self addChild:radioMenu];

首先，像之前一样，创建CCMenuItemImage，但是我们不是把它加到CCMenu类中，而是把它们加到CCRadioMenu类中。这个类确保一次只有一个菜单项被选中。这里，我们设置默认情况下，第一个菜单项被选中。

这里有一个新的知识点：我们利用cocos2d里面的自己布局功能，调用menu的alignItemsHorizontally来水平对齐menu中的所有菜单项。注意，菜单项是相对于菜单的中心点来布局的。因此，我们不再需要把菜单的中心点设置为（０，０）了–取而代之的是，我们需要把菜单往中间靠右挪动一些，这样我们就可以让菜单项都完整地显示出来。

最后一件事情–像之前一样添加回调函数：

- (void)button1Tapped:(id)sender {  [_label setString:@"Last button: 1"];}- (void)button2Tapped:(id)sender {  [_label setString:@"Last button: 2"];}- (void)button3Tapped:(id)sender {  [_label setString:@"Last button: 3"];}

编译并运行，你将会看到下面的结果：

背后的原理

如果你看一看菜单系统是如何实现的，你会注意到所有的菜单项都是CCNode的子类，但是Menu是CCLayer的子类。根据cocos2d最佳实践，你不应该创建非常大的层次结构，你应该让层次结构尽可能的小。

因此，这意味着，你可能需要把尽可能多的菜单项放到一个菜单里面。因为对于从CCLayer派生的Menu，你无法使其执行类似MoveTo等等的动作。这是一开始当我想让整个菜单移动时，却办不到时发现的。:] 更新： Eric在下面的评论中指出CCLayer是继承自CCNode，因此如果需要的话，你可以对其执行动作。在我早期做这件事情的时候，肯定有一些不同的地方，多谢Eric！ :]