快捷導(dǎo)航

iOS App引導(dǎo)頁開發(fā)教程

更新時間：2016年09月30日 09:54:42 作者：u013147734

這篇文章主要為大家詳細(xì)介紹了iOS App引導(dǎo)頁開發(fā)教程,具有一定的參考價值，感興趣的小伙伴們可以參考一下

引導(dǎo)頁功能簡介

方式一：
判斷程序是否首次啟動，如果是將GuidePageViewController作為窗口的根視圖控制器。GuidePageViewController有三個子控件：一個UIScrollView、一個UIPageControl、一個UIButton(默認(rèn)隱藏)，UIScrollView有多個UIImageView子控件，當(dāng)滾動到最后一頁UIButton展示，點(diǎn)擊立即體驗然后將窗口的根視圖控制器設(shè)置為UITabBarController；

方式二：
也可以直接將根視圖控制器設(shè)置為UITabBarController, 然后在第一個導(dǎo)航控制器的視圖上展示引導(dǎo)頁視圖，當(dāng)點(diǎn)擊立即體驗再將引導(dǎo)頁視圖隱藏掉即可。

示例代碼

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 // 首次啟動應(yīng)用程序時進(jìn)入到引導(dǎo)頁頁面（暫時沒有判斷，可通過NSUserDefault實現(xiàn)）
 self.window.rootViewController = [[GuidePageViewController alloc] init];
 return YES;
}
@end

引導(dǎo)頁視圖控制器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,這里簡單實現(xiàn)
 [UIApplication sharedApplication].keyWindow.rootViewController = [[ViewController alloc] init];
}
@end

上述代碼中的圖片名稱是寫死在GuidePageViewController中的，根視圖控制器也是寫死的，如果其他App想要復(fù)用該功能，就要進(jìn)入該代碼修改這兩哥地方，為了不修改一行代碼就可以使用該功能，可以將這兩個參數(shù)提取出來，初始化該控制器時作為參數(shù)傳遞

封裝示例代碼

初始化時以參數(shù)的形式將圖片和根視圖控制器傳遞給引導(dǎo)頁視圖控制器

@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

在初始化方法中將引導(dǎo)頁圖片和根視圖控制器保存起來，使用self.images.count獲取引導(dǎo)頁數(shù)量，引導(dǎo)頁圖片直接從images數(shù)組中獲取

#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

終極解決方案

直接使用github上的開源功能即可GitHub引導(dǎo)頁

1、創(chuàng)建出所有引導(dǎo)頁EAIntroPage
2、創(chuàng)建引導(dǎo)頁視圖EAIntroView 并設(shè)置代理
3、顯示引導(dǎo)頁視圖

創(chuàng)建出所有引導(dǎo)頁EAIntroPage

// basic： 標(biāo)題和描述
EAIntroPage *page1 = [EAIntroPage page];
page1.title = @"Hello world";
page1.desc = sampleDescription1;

// custom
EAIntroPage *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 nib
EAIntroPage *page3 = [EAIntroPage pageWithCustomViewFromNibNamed:@"IntroPage"];
page3.bgImage = [UIImage imageNamed:@"bg2"];

創(chuàng)建引導(dǎo)頁視圖EAIntroView 并設(shè)置代理
EAIntroView *intro = [[EAIntroView alloc] initWithFrame:self.view.bounds andPages:@[page1,page2,page3,page4]];
intro.delegate=self;

顯示引導(dǎo)頁視圖
[intro showInView:self.view animateDuration:0.0];