326
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中完成的，如果是手動寫的代碼，就和上麵的代碼一樣就可以了。
這樣，一個完成的引導頁的功能就實現了，很簡單吧。
最後更新：2017-04-03 05:39:09