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

愤怒的小脑选关界面做的挺好看，但是怎么实现这种效果呢？正好最近正在学习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;
}

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

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

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

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

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

<UIScrollViewDelegate>

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

scrollview.delegate = self;

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

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

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

第一个选关界面

第二个选关界面

第三个选关界面