愤怒的小脑选关界面做的挺好看，但是怎么实现这种效果呢？正好最近正在学习UIScrollView，就动手试着做了做。

假设，一共有12关，3个滑动的界面，一个界面则有4个选关按钮，先准备12张选关图片。

先建一个cocos2d工程，将12张图片导入。

打开HelloWorldLayer.h文件，在其中声明：

  1. UIPageControl *pagecontrol; 
  2. UIScrollView *scrollview; 

然后打开HelloWorldLayer.m文件，将init方法替换成如下代码：

  1. scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];//设置scrollview的可视界面大小，这里设置为iPad全屏 
  2.         scrollview.pagingEnabled =  YES;//滚动时，自动滚动到子视图subview的边界 
  3.         scrollview.contentSize = CGSizeMake(1024*3, 768);//设置scrollview的滚动范围，因为有三个界面，所以是1024*3 
  4.         scrollview.alwaysBounceHorizontal = YES;//在水平方向滚到头的时候有反弹的效果 
  5.         
  6.         //以下是往scrollview添加上12个按钮 
  7.         UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  8.         button1.frame = CGRectMake(291, 206, 100, 100); 
  9.         [button1 setBackgroundImage:[UIImage p_w_picpathNamed:@"01.png"] forState:UIControlStateNormal]; 
  10.         [button1 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  11.         [scrollview addSubview:button1]; 
  12.          
  13.         UIButton *button2 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  14.         button2.frame = CGRectMake(633, 206, 100, 100); 
  15.         [button2 setBackgroundImage:[UIImage p_w_picpathNamed:@"02.png"] forState:UIControlStateNormal]; 
  16.         [button2 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  17.         [scrollview addSubview:button2]; 
  18.          
  19.         UIButton *button3 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  20.         button3.frame = CGRectMake(291, 462, 100, 100); 
  21.         [button3 setBackgroundImage:[UIImage p_w_picpathNamed:@"03.png"] forState:UIControlStateNormal]; 
  22.         [button3 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  23.         [scrollview addSubview:button3]; 
  24.          
  25.         UIButton *button4 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  26.         button4.frame = CGRectMake(633, 462, 100, 100); 
  27.         [button4 setBackgroundImage:[UIImage p_w_picpathNamed:@"04.png"] forState:UIControlStateNormal]; 
  28.         [button4 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  29.         [scrollview addSubview:button4]; 
  30.          
  31.         UIButton *button5 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  32.         button5.frame = CGRectMake(1315, 206, 100, 100); 
  33.         [button5 setBackgroundImage:[UIImage p_w_picpathNamed:@"05.png"] forState:UIControlStateNormal]; 
  34.         [button5 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  35.         [scrollview addSubview:button5]; 
  36.          
  37.         UIButton *button6 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  38.         button6.frame = CGRectMake(1657, 206, 100, 100); 
  39.         [button6 setBackgroundImage:[UIImage p_w_picpathNamed:@"06.png"] forState:UIControlStateNormal]; 
  40.         [button6 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  41.         [scrollview addSubview:button6]; 
  42.          
  43.         UIButton *button7 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  44.         button7.frame = CGRectMake(1315, 462, 100, 100); 
  45.         [button7 setBackgroundImage:[UIImage p_w_picpathNamed:@"07.png"] forState:UIControlStateNormal]; 
  46.         [button7 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  47.         [scrollview addSubview:button7]; 
  48.          
  49.         UIButton *button8 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  50.         button8.frame = CGRectMake(1657, 462, 100, 100); 
  51.         [button8 setBackgroundImage:[UIImage p_w_picpathNamed:@"08.png"] forState:UIControlStateNormal]; 
  52.         [button8 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  53.         [scrollview addSubview:button8]; 
  54.          
  55.         UIButton *button9 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  56.         button9.frame = CGRectMake(2339, 206, 100, 100); 
  57.         [button9 setBackgroundImage:[UIImage p_w_picpathNamed:@"09.png"] forState:UIControlStateNormal]; 
  58.         [button9 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  59.         [scrollview addSubview:button9]; 
  60.          
  61.         UIButton *button10 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  62.         button10.frame = CGRectMake(2681, 206, 100, 100); 
  63.         [button10 setBackgroundImage:[UIImage p_w_picpathNamed:@"10.png"] forState:UIControlStateNormal]; 
  64.         [button10 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  65.         [scrollview addSubview:button10]; 
  66.          
  67.         UIButton *button11 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  68.         button11.frame = CGRectMake(2339, 462, 100, 100); 
  69.         [button11 setBackgroundImage:[UIImage p_w_picpathNamed:@"11.png"] forState:UIControlStateNormal]; 
  70.         [button11 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  71.         [scrollview addSubview:button11]; 
  72.          
  73.         UIButton *button12 = [UIButton buttonWithType:UIButtonTypeCustom]; 
  74.         button12.frame = CGRectMake(2681, 462, 100, 100); 
  75.         [button12 setBackgroundImage:[UIImage p_w_picpathNamed:@"12.png"] forState:UIControlStateNormal]; 
  76.         [button12 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
  77.         [scrollview addSubview:button12]; 
  78.          
  79.         [[[CCDirector sharedDirector] openGLView] addSubview:scrollview]; 
  80.          
  81.         设置分页显示用的小点 
  82.         pagecontrol = [[UIPageControl alloc] initWithFrame:CGRectMake(385, 700, 100, 50)]; 
  83.         //pagecontrol.hidesForSinglePage = YES; 
  84.         //pagecontrol.userInteractionEnabled = NO; 
  85.         pagecontrol.numberOfPages = 3;//三页 
  86.       
  87.         [[[CCDirector sharedDirector] openGLView] addSubview:pagecontrol]; 

然后在init下边添加以下代码：

  1. -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ 
  2.     int index = fabs(scrollView.contentOffset.x) / scrollView.frame.size.width; 
  3.     NSLog(@"%d",index); 
  4.     pagecontrol.currentPage = index; 
  5. } 
  6. -(void)menu{ 
  7.     //此方法那12个按钮相应的方法 
  8.     NSLog(@"Touch the button!!"); 
  9. } 

scrollViewDidEndDecelerating这个函数的功能实在滚动完后，根据scrollview的contentoffset和宽度计算这是第几页，然后设置pagecontrol，但是我不知道为啥这个函数一直不调用。。。。

我就用了一个相当笨的方法来实现此功能：

在HelloWorldLayer.h中声明此方法：

  1. -(void)checkpage; 

在init方法的最后添加

  1. [self schedule:@selector(checkpage) interval:0.5]; 

呵呵，0.5s调用一次checkpage方法，在方法中设置pagecontrol的当前页。然后在init方法下边实现此方法：

  1. -(void)checkpage{ 
  2.  
  3.     int index = fabs(scrollview.contentOffset.x) / scrollview.frame.size.width; 
  4.     NSLog(@"%d",index); 
  5.     pagecontrol.currentPage = index; 
  6. } 

编译运行，就能实现《愤怒的小鸟》选关界面的效果了！

有一点，谁知道为什么scrollViewDidEndDecelerating这个方法不掉用是怎么回事，能告诉我吗？

--------------------------------------------------------------------------

我知道是咋的回事了！要响应scrollViewDidEndDecelerating这个函数，得实现UIScrollViewDelegate协议，所以修改方法是：

1、在HelloWorldLayer.h中，CCLayer后边加上代码：

  1. <UIScrollViewDelegate>   

2、在init方法中加入以下代码：

  1. scrollview.delegate = self;  

然后把checkpage相关的代码删除，编译运行就OK了！

----------------------------------------------------------------------------

运行效果是这样的，看图片，我自己又加了背景

【ios-cocos2d】做一个类似《愤怒的小鸟》选关界面的程序_愤怒的小鸟

第一个选关界面

【ios-cocos2d】做一个类似《愤怒的小鸟》选关界面的程序_愤怒的小鸟_02

第二个选关界面

【ios-cocos2d】做一个类似《愤怒的小鸟》选关界面的程序_程序_03

第三个选关界面