iOS開發(fā)系列-視圖切換

1、iOS開發(fā)系列-視圖切換概述在iOS開發(fā)中視圖的切換是很頻繁的，獨立的視圖應(yīng)用在實際開發(fā)過程中并不常見，除非你的應(yīng)用足夠簡單。在iOS開發(fā)中常用的視圖切換有三種，今天我們將一一介紹：1. UITabBarController2. UINavigationController3. 模態(tài)窗口UITabBarControlleriOS三種視圖切換的原理各不相同：· UITabBarController：以平行的方式管理視圖，各個視圖之間往往關(guān)系并不大，每個加入到UITabBarController的視圖都會進(jìn)行初始化即使當(dāng)前不顯示在界面上，相對比較占用內(nèi)存。· UINavigat

2、ionController：以棧的方式管理視圖，各個視圖的切換就是壓棧和出棧操作，出棧后的視圖會立即銷毀。· UIModalController：以模態(tài)窗口的形式管理視圖，當(dāng)前視圖關(guān)閉前其他視圖上的內(nèi)容無法操作。UITabBarController是Apple專門為了利用頁簽切換視圖而設(shè)計的，在這個視圖控制器中有一個UITabBar控件，用戶通過點擊tabBar進(jìn)行視圖切換。我們知道在UIViewController內(nèi)部有一個視圖，一旦創(chuàng)建了UIViewController之后默認(rèn)就會顯示這個視圖，但是UITabBarController本身并不會顯示任何視圖，如果要顯示視圖則必須設(shè)

3、置其viewControllers屬性（它默認(rèn)顯示viewControllers0）。這個屬性是一個數(shù)組，它維護(hù)了所有UITabBarController的子視圖。為了盡可能減少視圖之間的耦合，所有的UITabBarController的子視圖的相關(guān)標(biāo)題、圖標(biāo)等信息均由子視圖自己控制，UITabBarController僅僅作為一個容器存在。假設(shè)現(xiàn)在有一個KCTabBarViewController（繼承于UITabBarController），它內(nèi)部有一個KCWebChatViewController、一個KCContactViewController。1.首先創(chuàng)建一個KCTabBarVie

4、wController繼承于UITabBarController（代碼是默認(rèn)生成的，不再貼出來）。2.其次創(chuàng)建兩個子視圖，在這兩個子視圖控制器中設(shè)置對應(yīng)的名稱、圖標(biāo)等信息。KCWebChatViewController.m/ KCWorldClockViewController.m/ ViewTransition/ Created by Kenshin Cui on 14-3-15./ Copyright (c) 2014年 Kenshin Cui. All rights reserved./#import "KCWebChatViewController.h"interf

5、ace KCWebChatViewController ()endimplementation KCWebChatViewController- (void)viewDidLoad super viewDidLoad; self.view.backgroundColor=UIColor redColor; /設(shè)置視圖控制器標(biāo)題 self.title="Chat" /注意通過tabBarController或者parentViewController可以得到其俯視圖控制器（也就是KCTabBarViewController） NSLog("%i",self

6、.tabBarController=self.parentViewController);/對于當(dāng)前應(yīng)用二者相等 /設(shè)置圖標(biāo)、標(biāo)題(tabBarItem是顯示在tabBar上的標(biāo)簽) self.tabBarItem.title="Web Chat"/注意如果這個標(biāo)題不設(shè)置默認(rèn)在頁簽上顯示視圖控制器標(biāo)題 self.tabBarItem.image=UIImage imageNamed:"tabbar_mainframe.png"/默認(rèn)圖片 self.tabBarItem.selectedImage=UIImage imageNamed:"tabb

7、ar_mainframeHL.png"/選中圖片 /圖標(biāo)右上角內(nèi)容 self.tabBarItem.badgeValue="5" endKCContactViewController.m/ KCAlarmViewController.m/ ViewTransition/ Created by Kenshin Cui on 14-3-15./ Copyright (c) 2014年 Kenshin Cui. All rights reserved./#import "KCContactViewController.h"interface KCCo

8、ntactViewController ()endimplementation KCContactViewController- (void)viewDidLoad super viewDidLoad; self.view.backgroundColor=UIColor yellowColor; self.tabBarItem.title="Contact" self.tabBarItem.image=UIImage imageNamed:"tabbar_contacts.png" self.tabBarItem.selectedImage=UIImag

9、e imageNamed:"tabbar_contactsHL.png"end3.在應(yīng)用程序啟動后設(shè)置Tab bar視圖控制器的子視圖，同時將Tab bar視圖控制器作為window的根控制器。AppDelegate.m/ AppDelegate.m/ ViewTransition/ Created by Kenshin Cui on 14-3-15./ Copyright (c) 2014年 Kenshin Cui. All rights reserved./#import "AppDelegate.h"#import "KCTabBarVi

10、ewController.h"#import "KCWebChatViewController.h"#import "KCContactViewController.h"interface AppDelegate ()endimplementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions _window=UIWindow allocinitW

11、ithFrame:UIScreen mainScreen.bounds; KCTabBarViewController *tabBarController=KCTabBarViewController allocinit; KCWebChatViewController *webChatController=KCWebChatViewController allocinit; KCContactViewController *contactController=KCContactViewController allocinit; tabBarController.viewControllers

12、=webChatController,contactController; /注意默認(rèn)情況下UITabBarController在加載子視圖時是懶加載的，所以這里調(diào)用一次contactController，否則在第一次展示時只有第一個控制器tab圖標(biāo)，contactController的tab圖標(biāo)不會顯示 for (UIViewController *controller in tabBarController.viewControllers) UIViewController *view= controller.view; _window.rootViewController=tabBarC

13、ontroller; _window makeKeyAndVisible; return YES;- (void)applicationWillResignActive:(UIApplication *)application / Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or

14、 when the user quits the application and it begins the transition to the background state. / Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.- (void)applicationDidEnterBackground:(UIApplication *)applicat

15、ion / Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later. / If your application supports background execution, this method is called instead of

16、applicationWillTerminate: when the user quits.- (void)applicationWillEnterForeground:(UIApplication *)application / Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.- (void)applicationDidBecomeActive:(UI

17、Application *)application / Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.- (void)applicationWillTerminate:(UIApplication *)application / Called when the applicati

18、on is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.end運(yùn)行效果：      對于UITabBarController簡單總結(jié)如下：· UITabBarController會一次性初始化所有子控制器，但是默認(rèn)只加載第一個控制器視圖，其他視圖控制器只初始化默認(rèn)不會加載,為了能夠?qū)⑵渌涌刂破饕舱ｏ@示在Tab bar中我們訪問了每個子視圖控制器的視圖以便調(diào)用其視圖加載方法（viewDidLoad

19、）;當(dāng)然，既然會調(diào)用子視圖的初始化方法，當(dāng)然也可以將視圖控制器的tabBarItem屬性設(shè)置放到init方法中設(shè)置，如此則不用再遍歷其視圖屬性了。· 每個視圖控制器都有一個tabBarController屬性，通過它可以訪問所在的UITabBarController，而且對于UITabBarController的直接子視圖其tabBarController等于parentViewController。· 每個視圖控制器都有一個tabBarItem屬性，通過它控制視圖在UITabBarController的tabBar中的顯示信息。· tabBarItem的imag

20、e屬性必須是png格式（建議大小32*32）并且打開alpha通道否則無法正常顯示。注意：使用storyboard創(chuàng)建UITabBarController的內(nèi)容今天不再著重講解，內(nèi)容比較簡單，大家可以自己試驗。UINavigationController代碼方式創(chuàng)建導(dǎo)航UINavigationController是一個導(dǎo)航控制器，它用來組織有層次關(guān)系的視圖，在UINavigationController中子控制器以棧的形式存儲，只有在棧頂?shù)目刂破髂軌蝻@示在界面中，一旦一個子控制器出棧則會被銷毀。UINavigationController默認(rèn)也不會顯示任何視圖（這個控制器自身的UIView不會

21、顯示），它必須有一個根控制器rootViewController，而且這個根控制器不會像其他子控制器一樣被銷毀。下面簡單通過幾個視圖模擬一下微信添加好友的功能，假設(shè)有一個導(dǎo)航控制器，它的根控制器為好友列表控制器KCFriendViewController，通過它可以導(dǎo)航到添加QQ聯(lián)系人視圖KCQQContactViewController，在QQ聯(lián)系人視圖又可以導(dǎo)航到公共賬號視圖KCPublicAccountViewController。1.首先在應(yīng)用代理啟動后初始化一個導(dǎo)航控制器并設(shè)置其根控制器為KCFriendViewController/ AppDelegate.m/ ViewTrans

22、ition/ Created by Kenshin Cui on 14-3-15./ Copyright (c) 2014年 Kenshin Cui. All rights reserved./#import "AppDelegate.h"#import "KCTabBarViewController.h"#import "KCWebChatViewController.h"#import "KCContactViewController.h"#import "KCFriendViewController

23、.h"#import "KCQQContactViewController.h"interface AppDelegate ()endimplementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions _window=UIWindow allocinitWithFrame:UIScreen mainScreen.bounds; _window.background

24、Color =UIColor colorWithRed:249/255.0 green:249/255.0 blue:249/255.0 alpha:1; /設(shè)置全局導(dǎo)航條風(fēng)格和顏色 UINavigationBar appearance setBarTintColor:UIColor colorWithRed:23/255.0 green:180/255.0 blue:237/255.0 alpha:1; UINavigationBar appearance setBarStyle:UIBarStyleBlack; KCFriendViewController *friendControlle

25、r=KCFriendViewController allocinit; UINavigationController *navigationController=UINavigationController allocinitWithRootViewController:friendController; _window.rootViewController=navigationController; _window makeKeyAndVisible; return YES;- (void)applicationWillResignActive:(UIApplication *)applic

26、ation / Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state. / Use this method

27、 to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.- (void)applicationDidEnterBackground:(UIApplication *)application / Use this method to release shared resources, save user data, invalidate timers, and store enough appli

28、cation state information to restore your application to its current state in case it is terminated later. / If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.- (void)applicationWillEnterForeground:(UIApplication *)applic

29、ation / Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.- (void)applicationDidBecomeActive:(UIApplication *)application / Restart any tasks that were paused (or not yet started) while the application wa

30、s inactive. If the application was previously in the background, optionally refresh the user interface.- (void)applicationWillTerminate:(UIApplication *)application / Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.end2.在好友列表視圖控制器中

31、設(shè)置導(dǎo)航欄左右按鈕，并且設(shè)置點擊右側(cè)按鈕導(dǎo)航到添加QQ聯(lián)系人視圖/ KCFriendViewController.m/ ViewTransition/ Created by Kenshin Cui on 14-3-15./ Copyright (c) 2014年 Kenshin Cui. All rights reserved./#import "KCFriendViewController.h"#import "KCQQContactViewController.h"interface KCFriendViewController ()endimple

32、mentation KCFriendViewController- (void)viewDidLoad super viewDidLoad; /每次出棧都會銷毀相應(yīng)的子控制器 NSLog("childViewControllers:%",self.navigationController.childViewControllers); /在子視圖中可以通過navigationController屬性訪問導(dǎo)航控制器， /同時對于當(dāng)前子視圖來說其父控制器就是其導(dǎo)航控制器 NSLog("%i",self.navigationController=self.par

33、entViewController); /在子視圖中（或者根視圖）有一個navigationItem用于訪問其導(dǎo)航信息 self.navigationItem.title="Friends"/或者直接設(shè)置控制器title（例如self setTitle:"Friends"） /設(shè)置導(dǎo)航欄左側(cè)按鈕 self.navigationItem.leftBarButtonItem=UIBarButtonItem allocinitWithTitle:"Edit" style:UIBarButtonSystemItemAdd target:nil

34、 action:nil; /設(shè)置導(dǎo)航欄右側(cè)按鈕 self.navigationItem.rightBarButtonItem=UIBarButtonItem allocinitWithImage:UIImage imageNamed:"ff_IconAdd.png" style:UIBarButtonItemStyleDone target:self action:selector(addFriends);-(void)addFriends /通過push導(dǎo)航到另外一個子視圖 KCQQContactViewController *qqContactController=KC

35、QQContactViewController allocinit; self.navigationController pushViewController:qqContactController animated:YES;end3.在QQ聯(lián)系人視圖右側(cè)導(dǎo)航中添加一個導(dǎo)航到公共賬號的按鈕/ KCQQContactViewController.m/ ViewTransition/ Created by Kenshin Cui on 14-3-15./ Copyright (c) 2014年 Kenshin Cui. All rights reserved./#import "KCQQ

36、ContactViewController.h"#import "KCPublicAccountViewController.h"interface KCQQContactViewController ()endimplementation KCQQContactViewController- (void)viewDidLoad super viewDidLoad; /每次出棧都會銷毀相應(yīng)的子控制器 NSLog("childViewControllers:%",self.navigationController.childViewControl

37、lers); self setTitle:"QQ Contact" /self.title="QQ contact" /self.navigationItem.title="My QQ" UIBarButtonItem *back=UIBarButtonItem allocinitWithTitle:"QQ" style:UIBarButtonItemStyleDone target:nil action:nil; self.navigationItem.backBarButtonItem=back; self.n

38、avigationItem.rightBarButtonItem=UIBarButtonItem allocinitWithTitle:"Public Account" style:UIBarButtonItemStyleDone target:self action:selector(gotoNextView);-(void)gotoNextView KCPublicAccountViewController *publicAccountController=KCPublicAccountViewController allocinit; self.navigationC

39、ontroller pushViewController:publicAccountController animated:YES;end4.在公共賬號視圖中在導(dǎo)航欄右側(cè)設(shè)置一個按鈕用于直接返回根視圖/ KCPublicNumberViewController.m/ ViewTransition/ Created by Kenshin Cui on 14-3-15./ Copyright (c) 2014年 Kenshin Cui. All rights reserved./#import "KCPublicAccountViewController.h"interface

40、 KCPublicAccountViewController ()endimplementation KCPublicAccountViewController- (void)viewDidLoad super viewDidLoad; /每次出棧都會銷毀相應(yīng)的子控制器 NSLog("childViewControllers:%",self.navigationController.childViewControllers); self.title="Public Account" self.navigationItem.rightBarButtonIt

41、em=UIBarButtonItem allocinitWithTitle:"Add Friends" style:UIBarButtonItemStyleDone target:self action:selector(gotoAddFriends); -(void)gotoAddFriends /直接跳轉(zhuǎn)到根控制器，也可以使用- (NSArray *)popToViewController:(UIViewController *)viewController animated:(BOOL)animated; 方法 self.navigationController po

42、pToRootViewControllerAnimated:YES;end· UINavigationController默認(rèn)顯示一個根控制器，這個根視圖必須指定（前面我們說過UINavigationController和UITabBarController類似僅僅作為導(dǎo)航容器，本身并不會顯示視圖），通過根控制器導(dǎo)航到其他下一級子視圖。· 在子視圖中可以通過navigationController訪問導(dǎo)航控制器，同時可以通過navigationController的childViewControllers獲得當(dāng)前棧中所有的子視圖（注意每一個出棧的子視圖都會被銷毀）。

43、3; UINavigationController導(dǎo)航是通過上方導(dǎo)航欄進(jìn)行的（類似的UITabBarController是通過下方UITabBar進(jìn)行導(dǎo)航），每個放到UINavigationController棧中的子視圖都會顯示一個導(dǎo)航欄，可以通過子控制器（包括根控制器）的navigationItem訪問這個導(dǎo)航欄，修改其左右兩邊的按鈕內(nèi)容。· 默認(rèn)情況下除了根控制器之外的其他子控制器左側(cè)都會在導(dǎo)航欄左側(cè)顯示返回按鈕，點擊可以返回上一級視圖，同時按鈕標(biāo)題默認(rèn)為上一級視圖的標(biāo)題,可以通過backBarButtonItem修改。下一級子視圖左側(cè)返回按鈕上的標(biāo)題的顯示優(yōu)先級為： 導(dǎo)航欄返

44、回按鈕backBarButtonItem的標(biāo)題（注意不能直接給backBarButtonItem的標(biāo)題賦值，只能重新給backBarButtonItem賦值）、導(dǎo)航欄navigationItem的標(biāo)題，視圖控制器標(biāo)題。演示效果： 使用storyboard進(jìn)行導(dǎo)航鑒于很多初學(xué)者在學(xué)習(xí)UINavigationController時看到的多數(shù)是使用storyboard方式創(chuàng)建導(dǎo)航，而且storyboard中的segue很多初學(xué)者不是很了解，這里簡單對storyboard方式創(chuàng)建導(dǎo)航進(jìn)行介紹。下面簡單做一個類似于iOS系統(tǒng)設(shè)置的導(dǎo)航程序，系統(tǒng)默認(rèn)進(jìn)入Settings視圖控制器，在Settin

45、gs界面點擊General進(jìn)行General視圖，點擊Sounds進(jìn)入Sounds視圖，就那么簡單。1.首先在Main.storyboard中拖拽一個UINavigationController將應(yīng)用啟動箭頭拖拽到新建的UINavigationController中將其作為默認(rèn)啟動視圖，在拖拽過程中會發(fā)現(xiàn)UINavigationController默認(rèn)會帶一個UITableViewController作為其根控制器。2.設(shè)置UITableViewController的標(biāo)題為“Settings”，同時設(shè)置UITableView為靜態(tài)表格并且包含兩行，分別在兩個UITableViewCell中放置

46、一個UILabel命名為”General”和“Sounds”。3.新建兩個UITableViewController，標(biāo)題分別設(shè)置為“General”、“Sounds”，按住Ctrl拖拽“Settings”的第一個UITableViewCell到視圖控制器“General”，同時選擇segue為“push”,拖拽第二個UITableViewCell到視圖控制器“Sounds”，同時選擇segue為“push”。到這里其實我們已經(jīng)可以通過Settings視圖導(dǎo)航到General和Sounds視圖了，但是storyboard是如何處理導(dǎo)航的呢？前面我們看到導(dǎo)航的過程是通過一個名為“Segue”連接

47、創(chuàng)建的（前面采用的是push方式），那么這個Segue是如何工作的呢？Segue的工作方式分為以下幾個步驟：1.創(chuàng)建目標(biāo)視圖控制器（也就是前面的General、Sounds視圖控制器）2.創(chuàng)建Segue對象3.調(diào)用源視圖對象的prepareForSegue:sender:方法4.調(diào)用Segue對象的perform方法將目標(biāo)視圖控制器推送到屏幕5.釋放Segue對象要解釋上面的過程首先我們定義一個KCSettingsTableViewController控制器，它繼承于UITableViewController，然后在storyboard中設(shè)置“Settings”視圖控制器的class屬性為KC

48、SettingsTableViewController。同時設(shè)置導(dǎo)航到“General”視圖控制器的segue的Identifier為“GeneralSegue”，設(shè)置導(dǎo)航到“Sounds”控制器的segue的Identifier為“SoundsSegue”。然后修改KCSettingsTableViewController.m添加如下代碼：#pragma mark - 導(dǎo)航-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender /源視圖控制器 UITableViewController *settingContr

49、oller=segue.sourceViewController; /目標(biāo)視圖控制器 UITableViewController *tableViewController=segue.destinationViewController; NSLog("sourceController:%,destinationController:%",settingController.navigationItem.title,tableViewController.navigationItem.title);此時運(yùn)行程序?qū)Ш轿覀儠l(fā)現(xiàn)此方法會被調(diào)用的同時可以打印源視圖控制器和目標(biāo)視圖控

50、制器的信息，這一步對應(yīng)上面所說的第三個步驟。接著在”Settings”視圖控制器的導(dǎo)航欄左右兩側(cè)分別放一個UIBarButtonItem并添加對應(yīng)事件代碼如下：- (IBAction)toGeneral:(id)sender self performSegueWithIdentifier:"GeneralSegue" sender:self;- (IBAction)toSounds:(id)sender self performSegueWithIdentifier:"SoundsSegue" sender:self;此時運(yùn)行程序發(fā)現(xiàn)，使用兩個按鈕同樣可

51、以導(dǎo)航到對應(yīng)的視圖控制器，這一步對應(yīng)上面第四個步驟，只是默認(rèn)情況下是自己執(zhí)行的，這里我們通過手動調(diào)用來演示了這個過程。運(yùn)行效果如下：模態(tài)窗口模態(tài)窗口只是視圖控制器顯示的一種方式（在iOS中并沒有專門的模態(tài)窗口類），模態(tài)窗口不依賴于控制器容器（例如前兩種視圖切換一個依賴于UITabBarController，另一個依賴于UINavigationController），通常用于顯示獨立的內(nèi)容，在模態(tài)窗口顯示的時其他視圖的內(nèi)容無法進(jìn)行操作。模態(tài)窗口使用起來比較容易，一般的視圖控制器只要調(diào)用- (void)presentViewController:(UIViewController *)viewCo

52、ntrollerToPresent animated: (BOOL)flag completion:(void ()(void)completion NS_AVAILABLE_IOS(5_0);方法那么參數(shù)中的視圖控制器就會以模態(tài)窗口的形式展現(xiàn)，同時調(diào)用- (void)dismissViewControllerAnimated: (BOOL)flag completion: (void ()(void)completion NS_AVAILABLE_IOS(5_0);方法就會關(guān)閉模態(tài)窗口。下面的示例中演示了一個登錄操作，點擊主界面左上方登錄按鈕以模態(tài)窗口的形式展現(xiàn)登錄界面，用戶點擊登錄界面中的

53、登錄按鈕就會返回到主界面。特別強(qiáng)調(diào)一點在下面的示例中導(dǎo)航欄是手動創(chuàng)建的，而不是采用UINavigationController，為了幫助大家熟悉導(dǎo)航欄使用同時也了解了UInavigationController中導(dǎo)航欄的本質(zhì)。1.首先創(chuàng)建一個登錄界面，在界面中只有兩個輸入框和一個登錄按鈕/ KCLoginViewController.m/ ViewTransition/ Created by Kenshin Cui on 14-3-15./ Copyright (c) 2014年 Kenshin Cui. All rights reserved./#import "KCLoginVi

54、ewController.h"interface KCLoginViewController ()endimplementation KCLoginViewController- (void)viewDidLoad super viewDidLoad; self addLoginForm;-(void)addLoginForm /用戶名 UILabel *lbUserName=UILabel allocinitWithFrame:CGRectMake(50, 150, 100, 30); lbUserName.text="用戶名：" self.view addSu

55、bview:lbUserName; UITextField *txtUserName=UITextField allocinitWithFrame:CGRectMake(120, 150, 150, 30); txtUserName.borderStyle=UITextBorderStyleRoundedRect; self.view addSubview:txtUserName; /密碼 UILabel *lbPassword=UILabel allocinitWithFrame:CGRectMake(50, 200, 100, 30); lbPassword.text="密碼：" self.view addSubview:lbPassword; UITextField *txtPassword=UITextField allocinitWithFrame:CGRectMake(120, 200, 150, 30); txtPassword.secureTextEn