之前做的例子，我們經常會用到.xib文件，在其中我們可以進行界面的設計。不過如果想切換視圖，我們就得自己寫很多代碼。自從蘋果推出了Storyboard，我們可以在一個編輯區域設計多個視圖，並通過可視化的方法進行各個視圖之間的切換。如下圖：
上圖中有兩種箭頭：左邊的箭頭表示程序剛開始運行時加載的控制器；右邊的稱爲Segue，這個表示視圖之間的切換，或者表示連接Navigation Controller的Root View Controller。
Storyboard功能強大，通過它不僅可以單獨設計每一個視圖，還能很簡單地實現各個視圖之間的切換。
接下來的例子主要顯示Storyboard的功能，順便用Storyboard實現了靜態表格等功能。爲了顯示Storyboard的功能，我們從Empty Application開始我們的例子。
1、運行Xcode 4.2，新建一個Empty Application，名稱爲Storyboard Test：
2、打開AppDelegate.m，找到didFinishLaunchingWithOptions方法，刪除其中代碼，使得只有return YES;語句。
3、創建一個Storyboard：
在菜單欄依次選擇File — New — New File，在彈出的窗口，左邊選擇iOS組中的User Interface，右邊選擇Storyboard：
之後單擊Next，選擇Device Family爲iPhone，單擊Next，輸入名稱MainStoryboard，並設好Group：
單擊Create，這樣就創建了一個Storyboard。
4、配置程序，使得從MainStoryboard啓動：
先單擊左邊帶藍色圖標的Storyboard Test，然後選擇Summary，接下來在Main Storyboard中選擇MainStoryboard：
這樣，當運行程序時，就從MainStoryboard加載內容了。
5、單擊MainStoryboard.storyboard，會發現編輯區域是空的。拖一個Navigation Controller到編輯區域：
6、選中右邊的View Controller，然後按Delete鍵刪除它。之後拖一個Table View Controller到編輯區域：
7、我們將在這個Table View Controller中創建靜態表格，不過先要將其設置爲左邊Navigation Controller的Root Controller：
選中Navigation Controller，按住Control鍵，向Table View Controller拉線：
鬆開鼠標後，在彈出菜單選擇Relationship - rootViewController：
之後，兩個框之間會出現一個連接線，這個就可以稱作是Segue。
8、選中Table View Controller中的Table View，之後打開Attribute Inspector，設置其Content屬性爲Static Cells：
這樣你會發現Table View中出現了三行Cell。在上圖你可以設置很多熟悉，比如Style、Section數量等。
9、設置行數：
選中Table View Section，在Attribute Inspector中設置其行數爲2：
然後選中每一行，設置其Style爲Basic：
設置第一行中Label的值爲：Date and Time，第二行中的Label爲List；之後選中下方的Navigation Item，在Attribute Inspector設置Title爲Root View，Back Button爲Root：
10、我們實現單擊表格中的Date and Time這一行實現頁面轉換，在新頁面顯示切換時的時間。
在菜單欄依次選擇File — New — New File，在彈出的窗口左邊選擇iOS中的Cocoa Touch，右邊選擇UIViewController subclass：
單擊Next，輸入名稱DateAndTimeViewController，但是不要選XIB：
之後，選好位置和Group，完成創建。
11、再次打開MainStoryboard.storyboard，拖一個View Controller到編輯區域，然後選中這個View Controller，打開Identity Inspector，設置class屬性爲DateAndTimeViewController：
這樣，我們就可以向DateAndTimeViewController創建映射了。
12、向新拖入的View Controller添加控件，如下圖：
然後將顯示爲Label的兩個標籤向DateAndTimeViewController.h中創建映射，名稱分別是dateLabel、timeLabel：
13、打開DateAndTimeViewController.m，在ViewDidUnload方法之後添加代碼：
//每次切換到這個試圖，顯示切換時的日期和時間 - (void)viewWillAppear:(BOOL)animated { NSDate *now = [NSDate date]; dateLabel.text = [NSDateFormatter localizedStringFromDate:now dateStyle:NSDateFormatterLongStyletimeStyle:NSDateFormatterNoStyle]; timeLabel.text = [NSDateFormatter localizedStringFromDate:now dateStyle:NSDateFormatterNoStyle timeStyle:NSDateFormatterLongStyle]; }
14、打開MainStoryboard.storyboard，選中表格的行Date and Time，按住Contrl，向View Controller拉線：
在彈出的菜單選擇Push：
這樣，Root View Controller與DateAndTimeViewController之間就出現了箭頭，運行時當點擊表格中的那一行，視圖就會切換到DateAndTimeViewController。
15、選中DateAndTimeViewController中的Navigation Item，在Attribute Inspector中設置其Title爲Date and Time：
16、運行一下，首先程序將加載靜態表格，表格中有兩行：Date and Time以及List，單擊Date and Time，視圖切換到相應視圖，單擊左上角的Root按鈕，視圖回到Root View。每次進入Date and Time視圖，顯示的時間都會不同：
17、接下來，我們將要實現，單擊List行，顯示一個表格，並且單擊表格中的某一行，我們可以在新彈出的視圖中編輯該行內容。首先創建ViewController文件：ListViewController、ListEditViewController，前者繼承UITableViewController，後者繼承UIViewController，參照第10步。都不要創建XIB文件。
然後打開MainStoryboard.storyboard，拖一個Table View Controller和View Controller到編輯區域，調整所有視圖在編輯區域的位置，如下圖：
設置新拖入的Table View Controller和View Controller的class屬性分別是ListViewController和ListEditViewController，參考第11步。
18、參照第14步，從Root View Controller中的List那一行向List View Controller拉線，並在彈出菜單也選擇Push。然後選中List View Controller的Navigation Item，設置Title及Back Button都爲List，可以參照第9步。
19、向List View Controller中的表格區域拖入一個Table View Cell，這樣其中就有兩個Cell了。設置第一個Cell的Identifier屬性爲GreenIdentifier。向第一個Cell中拖入一個Label，設置其字體顏色爲綠色。同樣對第二個Cell進行設置，Identifier屬性爲RedIdentifier，往其中拖入Label，設置字體顏色爲紅色。兩個Label的Tag屬性都設爲1。
20、打開ListViewController.m，向其中添加代碼：
20.1 在#import的下一行添加代碼：
@interface ListViewController () @property (strong, nonatomic) NSMutableArray *listArray; @property (copy, nonatomic) NSDictionary *editedSelection; @end
20.2 在@implementation之後添加代碼：
@synthesize listArray; @synthesize editedSelection;
20.3 找到viewDidLoad方法，向其中添加代碼：
- (void)viewDidLoad { [super viewDidLoad]; NSMutableArray *array = [[NSMutableArray alloc] initWithObjects: @"Horse", @"Sheep", @"Pig", @"Dog", @"Cat", @"Chicken", @"Duck", @"Goose", @"Tree", @"Flower", @"Grass", @"Fence", @"House", @"Table", @"Chair", @"Book", @"Swing" ,nil]; self.listArray = array; }
20.4 找到numberOfSectionsInTableView方法，使其返回1，並刪掉#warning。
20.5 找到numberOfRowsInSection方法，刪掉#warning，使其返回[listArray count]：
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // Return the number of rows in the section. return [listArray count]; }
20.6 找到cellForRowAtIndexPath方法，修改其中代碼：
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row = [indexPath row]; NSString *identifier = nil; if (row%2 == 0) { identifier = @"GreenIdentifier"; }else identifier = @"RedIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier]; UILabel *cellLabel = (UILabel *)[cell viewWithTag:1]; cellLabel.text = [listArray objectAtIndex:row]; return cell; }
21、運行一下，當單擊List行時，頁面切換到我們List視圖：
22、下面實現單擊List表格中的某一行，視圖切換，並且視圖中的內容與之前選中的行相關，然後可以對其進行編輯，返回後，原來的數據也會發生改變。
打開MainStoryboard.storyboard，仿照第14步，從List View Controller中的兩行向List Edit View Controller拉線，在彈出菜單選擇Push。這樣List Edit View Controller視圖中就出現了Navigation Item，選中它，設置Title爲Edit。這樣，單擊List表格中的某一行，視圖都會切換到List Edit View Controller。
23、打開ListViewController.m，在@end之前添加代碼：
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { //獲取目的ViewController UIViewController *destination = [segue destinationViewController]; if ([destination respondsToSelector:@selector(setPreViewController:)]) { //將自身傳遞給目的ViewController [destination setValue:self forKey:@"preViewController"]; } if ([destination respondsToSelector:@selector(setSelection:)]) { //目的ViewController中的selection屬性存儲的就是需要編輯的內容及其在表格中的位置 NSIndexPath *indexPath = [self.tableView indexPathForCell:sender]; id object = [self.listArray objectAtIndex:indexPath.row]; NSDictionary *selection = [NSDictionary dictionaryWithObjectsAndKeys: indexPath, @"indexPath", object, @"object", nil]; [destination setValue:selection forKey:@"selection"]; } }
在ViewDidUnload方法之後添加代碼：
- (void)setEditedSelection:(NSDictionary *)dict { if (![dict isEqual:editedSelection]) { editedSelection = dict; NSIndexPath *indexPath = [dict objectForKey:@"indexPath"]; id newValue = [dict objectForKey:@"object"]; [listArray replaceObjectAtIndex:indexPath.row withObject:newValue]; [self.tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationAutomatic]; } }
24、打開MainStoryboard.storyboard，找到Edit視圖，向其中拖一個Text Field：
然後爲這個Text Field向ListEditViewController.h中創建Outlet映射，名稱爲editText。
25、打開ListEditViewController.h，向其中添加屬性：
@property (copy, nonatomic) NSDictionary *selection; @property (weak, nonatomic) id preViewController;
26、打開ListEditViewController.m，添加代碼：
26.1 在@implementation的下一行添加代碼：
@synthesize preViewController; @synthesize selection;
26.2 找到ViewDidLoad方法，它默認是被註釋掉的，去掉其周圍註釋符，添加代碼如下：
- (void)viewDidLoad { [super viewDidLoad]; editText.text = [selection objectForKey:@"object"]; [editText becomeFirstResponder]; }
26.3 在ViewDidUnload方法之後添加代碼：
- (void)viewWillDisappear:(BOOL)animated { [super viewWillDisappear:animated]; if ([preViewController respondsToSelector:@selector(setEditedSelection:)]) { //結束編輯 [editText endEditing:YES]; NSIndexPath *indexPath = [selection objectForKey:@"indexPath"]; id object = editText.text; NSDictionary *editedSelection = [NSDictionary dictionaryWithObjectsAndKeys: indexPath, @"indexPath", object, @"object", nil]; //設置上一個ViewController中的editedSelection，由於設置editedSelection方法 //已經重寫，從而對應在表格中的數據會發生變化 [preViewController setValue:editedSelection forKey:@"editedSelection"]; } }
27、運行：
單擊List行時，視圖切換到上面右圖所示。然後單擊Pig那一行，視圖切換到Edit視圖，然後編輯內容，之後返回，這樣，原來表格中的內容就會發生改變：
