ios 小鸟选关界面实现

来源：互联网发布：js eval 解密编辑：程序博客网时间：2024/05/16 19:29

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://youthpasses.blog.51cto.com/2909834/789612

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

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

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

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

UIPageControl *pagecontrol; 
UIScrollView *scrollview;

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

scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];//设置scrollview的可视界面大小，这里设置为iPad全屏 
        scrollview.pagingEnabled =  YES;//滚动时，自动滚动到子视图subview的边界 
        scrollview.contentSize = CGSizeMake(1024*3, 768);//设置scrollview的滚动范围，因为有三个界面，所以是1024*3 
        scrollview.alwaysBounceHorizontal = YES;//在水平方向滚到头的时候有反弹的效果 
        
        //以下是往scrollview添加上12个按钮 
        UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button1.frame = CGRectMake(291, 206, 100, 100); 
        [button1 setBackgroundImage:[UIImage imageNamed:@"01.png"] forState:UIControlStateNormal]; 
        [button1 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button1]; 
         
        UIButton *button2 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button2.frame = CGRectMake(633, 206, 100, 100); 
        [button2 setBackgroundImage:[UIImage imageNamed:@"02.png"] forState:UIControlStateNormal]; 
        [button2 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button2]; 
         
        UIButton *button3 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button3.frame = CGRectMake(291, 462, 100, 100); 
        [button3 setBackgroundImage:[UIImage imageNamed:@"03.png"] forState:UIControlStateNormal]; 
        [button3 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button3]; 
         
        UIButton *button4 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button4.frame = CGRectMake(633, 462, 100, 100); 
        [button4 setBackgroundImage:[UIImage imageNamed:@"04.png"] forState:UIControlStateNormal]; 
        [button4 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button4]; 
         
        UIButton *button5 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button5.frame = CGRectMake(1315, 206, 100, 100); 
        [button5 setBackgroundImage:[UIImage imageNamed:@"05.png"] forState:UIControlStateNormal]; 
        [button5 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button5]; 
         
        UIButton *button6 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button6.frame = CGRectMake(1657, 206, 100, 100); 
        [button6 setBackgroundImage:[UIImage imageNamed:@"06.png"] forState:UIControlStateNormal]; 
        [button6 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button6]; 
         
        UIButton *button7 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button7.frame = CGRectMake(1315, 462, 100, 100); 
        [button7 setBackgroundImage:[UIImage imageNamed:@"07.png"] forState:UIControlStateNormal]; 
        [button7 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button7]; 
         
        UIButton *button8 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button8.frame = CGRectMake(1657, 462, 100, 100); 
        [button8 setBackgroundImage:[UIImage imageNamed:@"08.png"] forState:UIControlStateNormal]; 
        [button8 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button8]; 
         
        UIButton *button9 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button9.frame = CGRectMake(2339, 206, 100, 100); 
        [button9 setBackgroundImage:[UIImage imageNamed:@"09.png"] forState:UIControlStateNormal]; 
        [button9 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button9]; 
         
        UIButton *button10 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button10.frame = CGRectMake(2681, 206, 100, 100); 
        [button10 setBackgroundImage:[UIImage imageNamed:@"10.png"] forState:UIControlStateNormal]; 
        [button10 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button10]; 
         
        UIButton *button11 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button11.frame = CGRectMake(2339, 462, 100, 100); 
        [button11 setBackgroundImage:[UIImage imageNamed:@"11.png"] forState:UIControlStateNormal]; 
        [button11 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button11]; 
         
        UIButton *button12 = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button12.frame = CGRectMake(2681, 462, 100, 100); 
        [button12 setBackgroundImage:[UIImage imageNamed:@"12.png"] forState:UIControlStateNormal]; 
        [button12 addTarget:self action:@selector(menu) forControlEvents:UIControlEventTouchUpInside]; 
        [scrollview addSubview:button12]; 
         
        [[[CCDirector sharedDirector] openGLView] addSubview:scrollview]; 
         
        设置分页显示用的小点 
        pagecontrol = [[UIPageControl alloc] initWithFrame:CGRectMake(385, 700, 100, 50)]; 
        //pagecontrol.hidesForSinglePage = YES; 
        //pagecontrol.userInteractionEnabled = NO; 
        pagecontrol.numberOfPages = 3;//三页 
      
        [[[CCDirector sharedDirector] openGLView] addSubview:pagecontrol];

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

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

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

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

在HelloWorldLayer.h中声明此方法：

-(void)checkpage;

在init方法的最后添加

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

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

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