iOS App 引导页开发

引导页功能简介

方式一：
当应用程序首次安装或者是版本升级是显示引导页（通过偏好设置来NSUserDefaults记录），将GuidePageViewController作为窗口的根视图控制器。GuidePageViewController有三个子控件：一个UIScrollView、一个UIPageControl、一个UIButton(默认隐藏)，UIScrollView有多个UIImageView子控件，当滚动到最后一页UIButton展示，点击立即体验然后将窗口的根视图控制器设置为UITabBarController；

方式二：
也可以直接将根视图控制器设置为UITabBarController, 然后在第一个导航控制器的视图上展示引导页视图，当点击立即体验再将引导页视图隐藏掉即可。

示例代码

@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    NSString *currentVersion = [NSBundle mainBundle].infoDictionary[@"CFBundleShortVersionString"];    NSString *lastVersion = [[NSUserDefaults standardUserDefaults] objectForKey:kVersion];    UIViewController *rootViewController = [[UITabBarController alloc] init];    if (![currentVersion isEqualToString:lastVersion]) {        [[NSUserDefaults standardUserDefaults] setObject:currentVersion forKey:kVersion];        [[NSUserDefaults standardUserDefaults] synchronize];        rootViewController = [[GuidePageViewController alloc] init];    }    self.window.rootViewController = rootViewController;    return YES;}@end

---

引导页视图控制器GuidePageViewController

#import "GuidePageViewController.h"#import "ViewController.h"#define kScreenWidth ([UIScreen mainScreen].bounds.size.width)#define kScreenHeight ([UIScreen mainScreen].bounds.size.height)#define kGuidePageCount 4@interface GuidePageViewController () <UIScrollViewDelegate>@property (weak, nonatomic) UIPageControl *pageControl;@property (weak, nonatomic) UIButton *startAppButton;@end@implementation GuidePageViewController- (void)viewDidLoad {    [super viewDidLoad];    // UIScrollView    UIScrollView *guidePageScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];    guidePageScrollView.contentSize = CGSizeMake(kScreenWidth * kGuidePageCount, 0);    guidePageScrollView.showsHorizontalScrollIndicator = NO;    guidePageScrollView.pagingEnabled = YES;    guidePageScrollView.bounces = NO;    guidePageScrollView.delegate = self;    for (int i = 0; i < kGuidePageCount; i++) {        UIImageView *guideImageView = [[UIImageView alloc] initWithFrame:CGRectMake(kScreenWidth * i, 0, kScreenWidth, kScreenHeight)];        guideImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"guide-page-%d", i + 1]];        [guidePageScrollView addSubview:guideImageView];    }    [self.view addSubview:guidePageScrollView];    // UIPageControl（分页）    UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake((kScreenWidth - 100) / 2, kScreenHeight- 50, 100, 30)];    pageControl.numberOfPages = kGuidePageCount;    pageControl.currentPage = 0;    pageControl.currentPageIndicatorTintColor = [UIColor greenColor];    [self.view addSubview:pageControl];    self.pageControl = pageControl;    // UIButton（立即体验）    UIButton *startAppButton = [UIButton buttonWithType:UIButtonTypeCustom];    startAppButton.frame = CGRectMake((kScreenWidth - 100) / 2, 550, 100, 40);    [startAppButton setTitle:@"立即体验" forState:UIControlStateNormal];    startAppButton.backgroundColor = [UIColor grayColor];    [startAppButton addTarget:self action:@selector(startAppAction) forControlEvents:UIControlEventTouchUpInside];    startAppButton.hidden = YES;    [self.view addSubview:startAppButton];    _startAppButton = startAppButton;}- (void)scrollViewDidScroll:(UIScrollView *)scrollView {    NSInteger currentPage = scrollView.contentOffset.x / kScreenWidth;    self.pageControl.currentPage = currentPage;    if (currentPage == (kGuidePageCount - 1)) {        self.startAppButton.hidden = NO;    }}- (void)startAppAction {    // 根视图控制器一般是UITabBarController,这里简单实现    [UIApplication sharedApplication].keyWindow.rootViewController = [[ViewController alloc] init];}@end

上述代码中的图片名称是写死在GuidePageViewController中的，根视图控制器也是写死的，如果其他App想要复用该功能，就要进入该代码修改这两哥地方，为了不修改一行代码就可以使用该功能，可以将这两个参数提取出来，初始化该控制器时作为参数传递

封装示例代码

初始化时以参数的形式将图片和根视图控制器传递给引导页视图控制器

@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    ViewController *viewController = [[ViewController alloc] init];    self.window.rootViewController = [[GuidePageViewController alloc] initWithImages:@[@"guide-page-1", @"guide-page-2", @"guide-page-3", @"guide-page-4"] rootViewController:viewController];    return YES;}@end

#import <UIKit/UIKit.h>@interface GuidePageViewController : UIViewController- (instancetype)initWithImages:(NSArray *)images rootViewController:(UIViewController *)rootViewController;@end

在初始化方法中将引导页图片和根视图控制器保存起来，使用self.images.count获取引导页数量，引导页图片直接从images数组中获取

#import "GuidePageViewController.h"#import "ViewController.h"#define kScreenWidth ([UIScreen mainScreen].bounds.size.width)#define kScreenHeight ([UIScreen mainScreen].bounds.size.height)@interface GuidePageViewController () <UIScrollViewDelegate>@property (weak, nonatomic) UIPageControl *pageControl;@property (weak, nonatomic) UIButton *startAppButton;@property (strong, nonatomic) NSArray *images;@property (strong, nonatomic) UIViewController *rootViewController;@end@implementation GuidePageViewController- (instancetype)initWithImages:(NSArray *)images rootViewController:(UIViewController *)rootViewController {    if (self = [super init]) {        _images = images;        _rootViewController = rootViewController;    }    return self;}- (void)viewDidLoad {    [super viewDidLoad];    // UIScrollView    UIScrollView *guidePageScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];    guidePageScrollView.contentSize = CGSizeMake(kScreenWidth * self.images.count, 0);    guidePageScrollView.showsHorizontalScrollIndicator = NO;    guidePageScrollView.pagingEnabled = YES;    guidePageScrollView.bounces = NO;    guidePageScrollView.delegate = self;    for (int i = 0; i < self.images.count; i++) {        UIImageView *guideImageView = [[UIImageView alloc] initWithFrame:CGRectMake(kScreenWidth * i, 0, kScreenWidth, kScreenHeight)];        guideImageView.image = [UIImage imageNamed:self.images[i]];        [guidePageScrollView addSubview:guideImageView];    }    [self.view addSubview:guidePageScrollView];    // UIPageControl    UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake((kScreenWidth - 100) / 2, kScreenHeight- 50, 100, 30)];    pageControl.numberOfPages = self.images.count;    pageControl.currentPage = 0;    pageControl.currentPageIndicatorTintColor = [UIColor greenColor];    [self.view addSubview:pageControl];    self.pageControl = pageControl;    UIButton *startAppButton = [UIButton buttonWithType:UIButtonTypeCustom];    startAppButton.frame = CGRectMake((kScreenWidth - 100) / 2, 550, 100, 40);    [startAppButton setTitle:@"立即体验" forState:UIControlStateNormal];    startAppButton.backgroundColor = [UIColor grayColor];    [startAppButton addTarget:self action:@selector(startAppAction) forControlEvents:UIControlEventTouchUpInside];    startAppButton.hidden = YES;    [self.view addSubview:startAppButton];    _startAppButton = startAppButton;}- (void)scrollViewDidScroll:(UIScrollView *)scrollView {    NSInteger currentPage = scrollView.contentOffset.x / kScreenWidth;    self.pageControl.currentPage = currentPage;    if (currentPage == (self.images.count - 1)) {        self.startAppButton.hidden = NO;    }}- (void)startAppAction {    [UIApplication sharedApplication].keyWindow.rootViewController = self.rootViewController;}@end

---

上面代码是使用UIScrollView 来实现的，如果有100个引导页，将会创建100个UIImageView，这个会耗费性能的，UIScrollView没有循环利用思想，没有重用机制，所以还需要使用UICollectionView来继续改造，优化性能

AppDelegate

#import "AppDelegate.h"#import "ViewController.h"#import "XXGuidePageViewController.h"@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    UITabBarController *viewController = [[UITabBarController alloc] init];    XXGuidePageViewController *guidePageViewController = [[XXGuidePageViewController alloc] init];    guidePageViewController.pageControl.pageIndicatorTintColor = [UIColor redColor];    guidePageViewController.pageControl.currentPageIndicatorTintColor = [UIColor greenColor];    [guidePageViewController.startAppButton setTitle:@"马上体验" forState:UIControlStateNormal];    UIViewController *rootViewController = [guidePageViewController showGuidePageWithImages:@[@"guide-page-1", @"guide-page-2", @"guide-page-3", @"guide-page-4"] rootViewController:viewController];    self.window.rootViewController = rootViewController;    return YES;}@end

XXGuidePageViewController

#import <UIKit/UIKit.h>@interface XXGuidePageViewController : UIViewController@property (strong, nonatomic) UIPageControl *pageControl;@property (strong, nonatomic) UIButton *startAppButton;- (UIViewController *)showGuidePageWithImages:(NSArray *)images rootViewController:(UIViewController *)rootViewController;@end

#import "XXGuidePageViewController.h"#import "XXCollectionViewCell.h"#define kVersionKey @"AppVersion"#define kScreenWidth ([UIScreen mainScreen].bounds.size.width)#define kScreenHeight ([UIScreen mainScreen].bounds.size.height)NSString *const Cell = @"CELL";@interface XXGuidePageViewController ()<UICollectionViewDataSource, UICollectionViewDelegate>@property (strong, nonatomic) NSArray *images;@property (strong, nonatomic) UIViewController *rootViewController;@end@implementation XXGuidePageViewController- (UIViewController *)showGuidePageWithImages:(NSArray *)images rootViewController:(UIViewController *)rootViewController {    self.images = images;    _rootViewController = rootViewController;    return [self isShowGuidePage] ? self : rootViewController;}- (void)viewDidLoad {    [super viewDidLoad];    // UICollectionView    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];    flowLayout.itemSize = [UIScreen mainScreen].bounds.size;    flowLayout.minimumLineSpacing = 0;    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];    collectionView.backgroundColor = [UIColor greenColor];    [collectionView registerClass:[XXCollectionViewCell class] forCellWithReuseIdentifier:Cell];    collectionView.delegate = self;    collectionView.dataSource = self;    collectionView.bounces = NO;    collectionView.showsHorizontalScrollIndicator = NO;    collectionView.pagingEnabled = YES;    [self.view addSubview:collectionView];    // UIPageControl（分页）    [self.view addSubview:self.pageControl];    // UIButton（立即体验）    [self.view addSubview:self.startAppButton];  }-(UIPageControl *)pageControl {    if (_pageControl == nil) {        UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake((kScreenWidth - 100) / 2, kScreenHeight- 50, 100, 30)];        pageControl.numberOfPages = self.images.count;        pageControl.currentPage = 0;        pageControl.pageIndicatorTintColor = [UIColor grayColor];        pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];        _pageControl = pageControl;    }    return _pageControl;}- (UIButton *)startAppButton {    if (_startAppButton == nil) {        UIButton *startAppButton = [UIButton buttonWithType:UIButtonTypeCustom];        CGFloat height = 30;        startAppButton.frame = CGRectMake((kScreenWidth - 100) / 2, 550, 100, height);        [startAppButton setTitle:@"立即体验" forState:UIControlStateNormal];        UIColor *themeColor = [UIColor blueColor];        [startAppButton setTitleColor:themeColor forState:UIControlStateNormal];        startAppButton.layer.borderWidth = 1;        startAppButton.layer.borderColor = themeColor.CGColor;        startAppButton.layer.cornerRadius = height / 2;        startAppButton.layer.masksToBounds = YES;        [startAppButton addTarget:self action:@selector(startAppAction) forControlEvents:UIControlEventTouchUpInside];        startAppButton.hidden = YES;        _startAppButton = startAppButton;    }    return _startAppButton;}- (void)setImages:(NSArray *)images {    _images = images;    self.pageControl.numberOfPages = images.count;}- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {    return self.images.count;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {    XXCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:Cell forIndexPath:indexPath];    cell.image = [UIImage imageNamed:self.images[indexPath.row]];    return cell;}- (BOOL)isShowGuidePage {    NSString *currentVersion = [NSBundle mainBundle].infoDictionary[@"CFBundleShortVersionString"];    NSString *lastVersion = [[NSUserDefaults standardUserDefaults] objectForKey:kVersionKey];    if (![currentVersion isEqualToString:lastVersion]) {        [[NSUserDefaults standardUserDefaults] setObject:currentVersion forKey:kVersionKey];        [[NSUserDefaults standardUserDefaults] synchronize];        return true;    }    return false;}- (void)startAppAction {    [UIApplication sharedApplication].keyWindow.rootViewController = self.rootViewController;}- (void)scrollViewDidScroll:(UIScrollView *)scrollView {    NSInteger currentPage = scrollView.contentOffset.x / kScreenWidth;    self.pageControl.currentPage = currentPage;    if (currentPage == (self.images.count - 1)) {        self.startAppButton.hidden = NO;    } else {        self.startAppButton.hidden = YES;    }}@end

XXCollectionViewCell

#import <UIKit/UIKit.h>@interface XXCollectionViewCell : UICollectionViewCell@property (strong, nonatomic) UIImage *image;@end//---------------------------------------------------#import "XXCollectionViewCell.h"@interface XXCollectionViewCell ()@property (strong, nonatomic) UIImageView *imageView;@end@implementation XXCollectionViewCell- (void)setImage:(UIImage *)image {    self.imageView.image = image;}- (UIImageView *)imageView {    if (_imageView == nil) {        _imageView = [[UIImageView alloc] initWithFrame:self.bounds];        [self.contentView addSubview:_imageView];    }    return _imageView;}@end

效果图：

---

终极解决方案

对于常用的功能就没必要再花时间去写了，为了快速实现功能，直接使用github上的开源功能即可 GitHub引导页

1. 创建出所有引导页EAIntroPage
2. 创建引导页视图EAIntroView 并设置代理
3. 显示引导页视图

创建出所有引导页EAIntroPage

// basic： 标题和描述EAIntroPage *page1 = [EAIntroPage page];page1.title = @"Hello world";page1.desc = sampleDescription1;// customEAIntroPage *page2 = [EAIntroPage page];page2.title = @"This is page 2";page2.titleFont = [UIFont fontWithName:@"Georgia-BoldItalic" size:20];page2.titlePositionY = 220;page2.desc = sampleDescription2;page2.descFont = [UIFont fontWithName:@"Georgia-Italic" size:18];page2.descPositionY = 200;page2.titleIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"title2"]];page2.titleIconPositionY = 100;// custom view from nibEAIntroPage *page3 = [EAIntroPage pageWithCustomViewFromNibNamed:@"IntroPage"];page3.bgImage = [UIImage imageNamed:@"bg2"];

---

创建引导页视图EAIntroView 并设置代理
EAIntroView *intro = [[EAIntroView alloc] initWithFrame:self.view.bounds andPages:@[page1,page2,page3,page4]];
intro.delegate=self;

---

显示引导页视图
[intro showInView:self.view animateDuration:0.0];