cocos2d 中使用 pickerView 简单的老虎机应用

原文

注意:调用- (NSString *)pickerView:(CCPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;前记得调用

[CCPickerView reloadAllComponents];刷新格子的内容,不然如果数据发生改变，可能显示莫名奇妙的图标

在项目中想加一个简单的老虎机，查了很多资料，效果最好的使用UIKit里的UIPickerView模拟出来的，当然，这个老虎机只是简易版的。所谓的简易版，指的是模仿出老虎机的外观，老虎机用到的算法就另当别论。

可是，我的项目使用的是cocos2d引擎，在所有尝试过的项目经验中，我从来就没有成功使得UIKit和cocos2d完美结合过，要么是UIKit从CCLyar上移除，要么是UIKit不能够随着CCLayer完美移动，要么是UIKit只能在openGLView之上或者之下导致很多事情不能做。所以，从任何一个角度来看，在cocos2d里使用UIKit控件都是一件让人很头疼的事。

不过，尤为庆幸的是，有人已经在cocos2d下实现了PickerView的效果，而且，和别的模拟UIKit控件的cocos2d控件不同的是，这个效果堪比苹果原生态的控件，完美的旋转效果——CCPickerView。用法和UIPickerView相似。

-(id)init

{

      if((self = [super init]))

     { 

                //  生成选择器

        pickerView = [CCPickerView node];

        pickerView.position = ccp(110, 260);

        pickerView.dataSource = self;

        pickerView.delegate = self;

     }

     return self; 
}

简单地记录下CCPickerView的delegate和datasource

#pragma mark - CCPickerViewDataSource

 

 

// 选择器共有几列（几个轮子）

- (NSInteger)numberOfComponentsInPickerView:(CCPickerView *)pickerView;

 

// 选择器里每列（每个轮子）可以放多少个物品

- (NSInteger)pickerView:(CCPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;

#pragma mark - CCPickerViewDelegate

 

// 选择器里每列（每个轮子）cell的高度

- (CGFloat)pickerView:(CCPickerView *)pickerView rowHeightForComponent:(NSInteger)component;

 

// 每列（每个轮子）的宽度

- (CGFloat)pickerView:(CCPickerView *)pickerView widthForComponent:(NSInteger)component;

 

// 每列（每个轮子）可以带个title

- (NSString *)pickerView:(CCPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;

 

// 一列（一个轮子）里的一行（cell）放的具体东西

- (CCNode *)pickerView:(CCPickerView *)pickerView nodeForRow:(NSInteger)row forComponent:(NSInteger)component reusingNode:(CCNode *)node;

 

// 选中了选择器里哪一列的哪一行

- (void)pickerView:(CCPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component;

 

// 每两列的间隔

- (CGFloat)spaceBetweenComponents:(CCPickerView *)pickerView;

 

// 选择器的大小

- (CGSize)sizeOfPickerView:(CCPickerView *)pickerView;

 

// 选择器的背景图

- (CCNode *)overlayImage:(CCPickerView *)pickerView;

注：注释中的每一列指的是选择器的每一个轮子。

需要特别说明的是以下的两个方法。比如在老虎机这个例子里，当按下开始按钮后，选择器的每个轮子将开始转动，转动的方法可以是：

 

 

-(void)spin:(id)sender

{

    // 开始按钮暂时不能按,以防双击

    [self disableMenux:startMenu];

    

    // 随机产生选择器停止的数

    int stopRow0 = arc4random() % 10;

    int stopRow1 = arc4random() % 10;

    int stopRow2 = arc4random() % 10;

    

    // Change the easeRate, speed, repeat and stopRow for the desired spin effect.

    // Seems like there is a bug with EaseInOut so use an integer value for easeRate.

    [pickerView spinComponent:0 speed:10 easeRate:1 repeat:2 stopRow:stopRow0];

    [pickerView spinComponent:1 speed:10 easeRate:2 repeat:2 stopRow:stopRow1];

    [pickerView spinComponent:2 speed:10 easeRate:3 repeat:2 stopRow:stopRow2];

}

每个轮子转动结束后，将调用以下的方法，将结束后所在的行的结果输出：

 

// 选择器旋转停止后停在哪一行

- (void)onDoneSpinning:(CCPickerView *)pickerView nodeForRow:(NSInteger)row component:(NSInteger)component;

其实，在原来的例子里面，这个方法是这个样子的：

- (void)onDoneSpinning:(CCPickerView *)pickerView component:(NSInteger)component;

没有输出 nodeForRow:(NSInteger)row 这个参数，为了我项目的需要，我自己加了这个参数得到了我想要的输出每一行的结果。所以这个方法中，自己需要什么输出结果，可以很方便的作相应的修改即可得到。

在以下的附件中，是以上的方法需要的CCPickerView源代码和保证CCPickerView完美运作的Scrollayer.

附件：CCPickerView