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

愤怒的小脑选关界面做的挺好看,但是怎么实现这种效果呢?正好最近正在学习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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"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 imageNamed:@"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. -(void)menu{ 
  6.     //此方法那12个按钮相应的方法 
  7.     NSLog(@"Touch the button!!"); 

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

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

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

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

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

1、在HelloWorldLayer.h中,CCLayer后边加上代码:

  
  
  
  
  1. <UIScrollViewDelegate>   

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

  
  
  
  
  1. scrollview.delegate = self;  

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

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

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

第一个选关界面

第二个选关界面

第三个选关界面

你可能感兴趣的:(图片,职场,程序,休闲,愤怒的小鸟)