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];
  
}

       要注意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];
  
  
}

    1）.定义一个PageControl：

@property(nonatomic,strong)UIPageControl *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];
}

- (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  。欢迎大家访问！

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

原文：http://blog.csdn.net/chenyufeng1991/article/details/50038059