iOS开发——如何做一个漂亮的引导页

      对于一款App来说，引导页是必不可少的组成元素，每当用户第一次安装应用，或者更新一次应用后，首先引入眼帘的就是引导页。一个漂亮的引导页可以增加用户体验。今天我们来实现这个功能，demo我已经集成到  https://github.com/chenyufeng1991/iOS-Oncenote 。

（1）引导页的父View是一个ScrollView，所以引导页才能进行左右的滚动。我使用storyboard来设计，界面上只要放一个ScrollView即可。

（2）设置ScrollView的属性，位置与大小：

- (void)setGuidePageScrollViewFrame{    self.guidepageScrollView.contentSize = CGSizeMake([[UIScreen mainScreen] bounds].size.width * 5, [[UIScreen mainScreen] bounds].size.height);  [self.guidepageScrollView setUserInteractionEnabled:true];  [self.guidepageScrollView setScrollEnabled:true];  [self.guidepageScrollView setPagingEnabled:true];  [self.guidepageScrollView setShowsHorizontalScrollIndicator:false];  [self.guidepageScrollView setShowsVerticalScrollIndicator:false];  [self.guidepageScrollView setBounces:false];    [self setGuidePageImageFrame];  }

（3）设置需要显示图片的属性、位置与大小。注意，图片是水平并排放到ScrollView中，所以才能进行滚动。

       要注意ScrollView的两个属性的差别，frame是设置ScrollView的大小与位置。在本案例中，位置左上角为(0,0),长宽为屏幕的长宽。而contentSize是设置ScrollView内部需要显示内容的长和宽。在ScrollView中，如果本身contentSize的长宽小于frame的长宽，那么这个ScrollView就不能滚动。换句话说，要显示的内容本身就比较少，根本就没必要滚动，所以ScrollView就怎么也不会滚动了。在这个引导页案例中。contentSize的宽就应该是屏幕的5倍宽(引导页共有5页)，而初始设置ScrollView的frame宽度就应该是屏幕宽度（也可以在storyboard中设置）。这样要显示的内容比较“长”，我们又给ScrollView设置了PageEnable属性，就可以在一屏无法显示完的情况下分页显示。

设置图片的代码如下：

- (void)setGuidePageImageFrame{    for (int i = 0; i < 4; i++) {        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake([[UIScreen mainScreen] bounds].size.width * i, 0, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height)];        [imageView setUserInteractionEnabled:true];        [imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"guidepage%d",i]]];        [self.guidepageScrollView addSubview:imageView ];          }      UIView *view = [[UIView alloc] initWithFrame:CGRectMake([[UIScreen mainScreen] bounds].size.width * 4, 0, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height)];  [view setUserInteractionEnabled:true];  [view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"guidepage0.png"]]];      UIButton *loginButton = [[UIButton alloc] initWithFrame:CGRectMake((UISCREEN_WIDTH - 200) / 3, UISCREEN_HEIGHT - 100, 100, 30)];  [loginButton setTitle:@"登录" forState:UIControlStateNormal];  [loginButton.layer setBorderColor:[UIColor whiteColor].CGColor];  [loginButton.layer setBorderWidth:0.5];  [loginButton.layer setMasksToBounds:true];  [loginButton addTarget:self action:@selector(loginButtonPressed:) forControlEvents:UIControlEventTouchUpInside];    UIButton *registerButton = [[UIButton alloc] initWithFrame:CGRectMake((UISCREEN_WIDTH - 200) / 3 + (UISCREEN_WIDTH - 200) / 3 + 100, UISCREEN_HEIGHT - 100, 100, 30)];  [registerButton setTitle:@"注册" forState:UIControlStateNormal];  [registerButton.layer setBorderColor:[UIColor whiteColor].CGColor];  [registerButton.layer setBorderWidth:0.5];  [registerButton.layer setMasksToBounds:true];  [registerButton addTarget:self action:@selector(registerButtonPressed:) forControlEvents:UIControlEventTouchUpInside];    [view addSubview:loginButton];  [view addSubview:registerButton];    [self.guidepageScrollView addSubview:view];    }

（4）大家仔细观看引导页可以看到，下面还有一个指示当前页面的控件，叫做PageControl，可以显示出共有几页并且当前在哪一页。这部分我用代码来实现。

    1）.定义一个PageControl：

@property(nonatomic,strong)UIPageControl *pageControl;

    2)  .在viewDidLoad中初始化PageControl的属性：

- (void)viewDidLoad {  [super viewDidLoad];    self.pageControl  = [[UIPageControl alloc] initWithFrame:CGRectMake([[UIScreen mainScreen] bounds].size.width / 2 - 50, [[UIScreen mainScreen] bounds].size.height - 50, 100, 20)];  self.pageControl.numberOfPages = 5;  [self.view addSubview:self.pageControl];    [self setGuidePageScrollViewFrame];}

     3).实现ScrollView的delegate（UIScrollViewDelegate）,根据ScrollView的滚动偏移位置来判断当前在哪个页面，也就是计算ScrollView的水平滚动，代码如下：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{    CGFloat offsetWidth = self.guidepageScrollView.contentOffset.x;  int pageNum = offsetWidth / [[UIScreen mainScreen] bounds].size.width;  self.pageControl.currentPage = pageNum;      }

（5）经过以上步骤，基本的引导页功能就实现了。但是还有非常重要的一个业务逻辑：引导页只有在第一次安装的时候出现，以后启动App就不会出现了。这里就可以使用NSUserDefaults来记录。启动App我们就可以判断该值是否为空，为空表示是第一次安装，显示引导页，否则就直接跳到其他界面。

代码如下：可以这样简单的存储进行判断。

 NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];  [userDefaults setObject:@"exist" forKey:@"guidepage"];

   (6) 其实还可以在引导页的最后一页设置几个按钮，用来进入正常的程序。最后的实现效果如下：

。

.

最近开源的iOS应用，高仿印象笔记  https://github.com/chenyufeng1991/iOS-Oncenote 。欢迎大家点赞并关注项目进度。也可以安装到手机上试玩哦。

github主页：https://github.com/chenyufeng1991  。欢迎大家访问！