iOS7开发学习之路:No.7 引导页

众所周知，现如今的APP各式各样的引导页层出不穷，这其中不乏很多经典之作，当然引导页做的成功与否，更多的是在设计上，如果做出简明却又精彩的引导页确实是考验PD们的活。当然，这里是技术blog，就重点说下如何才能在程序首次运行的时候运行引导页吧。

首先手动添加一个类，名字就叫做UserGuideViewController吧，是继承自UIVIewController的，

.h：

#import <UIKit/UIKit.h>@interface UserGuideViewController : UIViewController- (void)initGuide;              //init the page- (void)firstPress;             //press button event@end

添加两个函数，一个是初始化页面的函数，另一个是在引导页的最后一个页面，有个按钮，用户点击后进入到程序的主界面

.m

#import "UserGuideViewController.h"#import "initViewController.h"@interface UserGuideViewController ()@end@implementation UserGuideViewController- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];    if (self) {        // Custom initialization    }    return self;}- (void)viewDidLoad{    [super viewDidLoad];    // Do any additional setup after loading the view.        self.view.backgroundColor = [UIColor colorWithRed:139.0 green:178.0 blue:38.0 alpha:1];    [self initGuide];}- (void)didReceiveMemoryWarning{    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}- (void)initGuide{    UIScrollView* scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, 640)];    [scrollView setContentSize:CGSizeMake(1280, 0)];    [scrollView setPagingEnabled:YES];        UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 640)];    [imageView setImage:[UIImage imageNamed:@"background.png"]];    [scrollView addSubview:imageView];        UIImageView* imageView_1 = [[UIImageView alloc] initWithFrame:CGRectMake(320, 0, 320, 640)];    [imageView_1 setImage:[UIImage imageNamed:@"final_2.png"]];    [scrollView addSubview:imageView_1];        UIImageView* imageView_2 = [[UIImageView alloc] initWithFrame:CGRectMake(640, 0, 320, 640)];    [imageView_2 setImage:[UIImage imageNamed:@"background.png"]];    [scrollView addSubview:imageView_2];        UIImageView* imageView_3 = [[UIImageView alloc] initWithFrame:CGRectMake(960, 0, 320, 640)];    [imageView_3 setImage:[UIImage imageNamed:@"final_2.png"]];    [scrollView addSubview:imageView_3];    imageView_3.userInteractionEnabled = YES;        UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];    [button setTitle:@"开始使用" forState:UIControlStateNormal];    [button.titleLabel setTextColor:[UIColor blackColor]];    [button setFrame:CGRectMake(46, 370, 230, 38)];    [button addTarget:self action:@selector(firstPress) forControlEvents:UIControlEventTouchUpInside];    [imageView_3 addSubview:button];        [self.view addSubview:scrollView];    }- (void)firstPress{    UIStoryboard *mainStoryBoard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];    initViewController *initView = [mainStoryBoard instantiateViewControllerWithIdentifier:@"firstPage"];    [self presentViewController:initView animated:YES completion:nil];}/*#pragma mark - Navigation// In a storyboard-based application, you will often want to do a little preparation before navigation- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{    // Get the new view controller using [segue destinationViewController].    // Pass the selected object to the new view controller.}*/@end

核心代码就是initGuide了，我们用一个UIScrollView来实现引导页，这里我添加了4个页面，所以是setContentSize是320*4 = 1280的，可以根据引导页的张数来改变长度，接下来就是4个imageVIew，然后一次添加进图片就行了。然后在最后一个页面添加进按钮，用户点击按钮后进入到程序的主页面。

接下来的firstPress函数花了我好长时间才搞定，因为我的主页面是之前通过IB拖拽控件的方式做好的，而不是手动编写的，所以这里需要生成在IB中主页面的实例。：

首先打开IB，也就是storyboard，然后点击需要从引导页进入的视图控制器，选择show the identity inspector项（option+command+3），然后在indentity里面给storyboard ID添加一个名字，我这里写的是firstPage

接下来回到引导页

#import initViewController.h  //把需要显示的主界面h文件包含进来，我这里用到的是initViewController

 

在你的点击按钮后出发的函数里面这样写：

UIStoryboard *mainStoryBoard  = [UIStoryboard storyboardWithName:@"Main" bundle:nil]; //注意这里@“”里面的文字是你的storyboard的名字，我的里面是Main.storyboard，所以名字就是Main

initViewController *initView = [mainStoryBoard instantiateViewControllerWithIdentifier:@"firstPage"];//这里需要用到我们之间在IB中手动添加的名字firstPage了

这样其实就获得了在storyboard中的视图控制器的名字了，最后一步就是显示它了

[self presentVIewContrller:initView animated:YES completion:nil];

就3行代码，这样就可以在你点击了按钮后显示你想要的界面了。

接下来是让程序在第一次运行的时候能跳转到我们刚刚写好的引导页了，很简单，修改AppDelegate.m文件

#import "AppDelegate.h"#import "UserGuideViewController.h"#import "initViewController.h"@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{    // Override point for customization after application launch.        if (![[NSUserDefaults standardUserDefaults] boolForKey:@"firstLaunch"]) {        [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"firstLaunch"];        UserGuideViewController* userGuideViewController = [[UserGuideViewController alloc] init];        self.window.rootViewController = userGuideViewController;    }    else{        UIStoryboard *mainStoryBoard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];        initViewController *initView = [mainStoryBoard instantiateViewControllerWithIdentifier:@"firstPage"];        self.window.rootViewController = initView;    }        [self.window makeKeyAndVisible];    return YES;}

包含进我们的两个页面，一个是刚刚写好的引导页，另一个是程序的主界面。

注意这里在else语句里面也要用同样的方法实例化一个主界面，原因是我们是在IB中完成的，如果是手动写的代码，就和上面的代码一样就可以了。

这样，一个完成的引导页的功能就实现了，很简单吧。