之前做的例子，我們經(jīng)常會用到.xib文件，在其中我們可以進行界面的設(shè)計。不過如果想切換視圖，我們就得自己寫很多代碼。自從蘋果推出了Storyboard，我們可以在一個編輯區(qū)域設(shè)計多個視圖，并通過可視化的方法進行各個視圖之間的切換。如下圖：

上圖中有兩種箭頭：左邊的箭頭表示程序剛開始運行時加載的控制器；右邊的稱為Segue，這個表示視圖之間的切換，或者表示連接Navigation Controller的Root View Controller。

Storyboard功能強大，通過它不僅可以單獨設(shè)計每一個視圖，還能很簡單地實現(xiàn)各個視圖之間的切換。

接下來的例子主要顯示Storyboard的功能，順便用Storyboard實現(xiàn)了靜態(tài)表格等功能。為了顯示Storyboard的功能，我們從Empty Application開始我們的例子。

1、運行Xcode 4.2，新建一個Empty Application，名稱為Storyboard Test：

2、打開AppDelegate.m，找到didFinishLaunchingWithOptions方法，刪除其中代碼，使得只有return YES;語句。

3、創(chuàng)建一個Storyboard：

在菜單欄依次選擇File — New — New File，在彈出的窗口，左邊選擇iOS組中的User Interface，右邊選擇Storyboard：

之后單擊Next，選擇Device Family為iPhone，單擊Next，輸入名稱MainStoryboard，并設(shè)好Group：

單擊Create，這樣就創(chuàng)建了一個Storyboard。

4、配置程序，使得從MainStoryboard啟動：

先單擊左邊帶藍色圖標(biāo)的Storyboard Test，然后選擇Summary，接下來在Main Storyboard中選擇MainStoryboard：

這樣，當(dāng)運行程序時，就從MainStoryboard加載內(nèi)容了。

5、單擊MainStoryboard.storyboard，會發(fā)現(xiàn)編輯區(qū)域是空的。拖一個Navigation Controller到編輯區(qū)域：

6、選中右邊的View Controller，然后按Delete鍵刪除它。之后拖一個Table View Controller到編輯區(qū)域：

7、我們將在這個Table View Controller中創(chuàng)建靜態(tài)表格，不過先要將其設(shè)置為左邊Navigation Controller的Root Controller：

選中Navigation Controller，按住Control鍵，向Table View Controller拉線：

松開鼠標(biāo)后，在彈出菜單選擇Relationship - rootViewController：

之后，兩個框之間會出現(xiàn)一個連接線，這個就可以稱作是Segue。

8、選中Table View Controller中的Table View，之后打開Attribute Inspector，設(shè)置其Content屬性為Static Cells：

這樣你會發(fā)現(xiàn)Table View中出現(xiàn)了三行Cell。在上圖你可以設(shè)置很多熟悉，比如Style、Section數(shù)量等。

9、設(shè)置行數(shù)：

選中Table View Section，在Attribute Inspector中設(shè)置其行數(shù)為2：

然后選中每一行，設(shè)置其Style為Basic：

設(shè)置第一行中Label的值為：Date and Time，第二行中的Label為List；之后選中下方的Navigation Item，在Attribute Inspector設(shè)置Title為Root View，Back Button為Root：

10、我們實現(xiàn)單擊表格中的Date and Time這一行實現(xiàn)頁面轉(zhuǎn)換，在新頁面顯示切換時的時間。

在菜單欄依次選擇File — New — New File，在彈出的窗口左邊選擇iOS中的Cocoa Touch，右邊選擇UIViewController subclass：

單擊Next，輸入名稱DateAndTimeViewController，但是不要選XIB：

之后，選好位置和Group，完成創(chuàng)建。

11、再次打開MainStoryboard.storyboard，拖一個View Controller到編輯區(qū)域，然后選中這個View Controller，打開Identity Inspector，設(shè)置class屬性為DateAndTimeViewController：

這樣，我們就可以向DateAndTimeViewController創(chuàng)建映射了。

12、向新拖入的View Controller添加控件，如下圖：

然后將顯示為Label的兩個標(biāo)簽向DateAndTimeViewController.h中創(chuàng)建映射，名稱分別是dateLabel、timeLabel：

13、打開DateAndTimeViewController.m，在ViewDidUnload方法之后添加代碼：

//每次切換到這個試圖，顯示切換時的日期和時間 - (void)viewWillAppear:(BOOL)animated {NSDate *now = [NSDate date];dateLabel.text = [NSDateFormatterlocalizedStringFromDate:nowdateStyle:NSDateFormatterLongStyletimeStyle:NSDateFormatterNoStyle];timeLabel.text = [NSDateFormatterlocalizedStringFromDate:nowdateStyle:NSDateFormatterNoStyletimeStyle:NSDateFormatterLongStyle]; }

14、打開MainStoryboard.storyboard，選中表格的行Date and Time，按住Contrl，向View Controller拉線：

在彈出的菜單選擇Push：

這樣，Root View Controller與DateAndTimeViewController之間就出現(xiàn)了箭頭，運行時當(dāng)點擊表格中的那一行，視圖就會切換到DateAndTimeViewController。

15、選中DateAndTimeViewController中的Navigation Item，在Attribute Inspector中設(shè)置其Title為Date and Time：

16、運行一下，首先程序?qū)⒓虞d靜態(tài)表格，表格中有兩行：Date and Time以及List，單擊Date and Time，視圖切換到相應(yīng)視圖，單擊左上角的Root按鈕，視圖回到Root View。每次進入Date and Time視圖，顯示的時間都會不同：

????

17、接下來，我們將要實現(xiàn)，單擊List行，顯示一個表格，并且單擊表格中的某一行，我們可以在新彈出的視圖中編輯該行內(nèi)容。首先創(chuàng)建ViewController文件：ListViewController、ListEditViewController，前者繼承UITableViewController，后者繼承UIViewController，參照第10步。都不要創(chuàng)建XIB文件。

然后打開MainStoryboard.storyboard，拖一個Table View Controller和View Controller到編輯區(qū)域，調(diào)整所有視圖在編輯區(qū)域的位置，如下圖：

設(shè)置新拖入的Table View Controller和View Controller的class屬性分別是ListViewController和ListEditViewController，參考第11步。

18、參照第14步，從Root View Controller中的List那一行向List View Controller拉線，并在彈出菜單也選擇Push。然后選中List View Controller的Navigation Item，設(shè)置Title及Back Button都為List，可以參照第9步。

19、向List View Controller中的表格區(qū)域拖入一個Table View Cell，這樣其中就有兩個Cell了。設(shè)置第一個Cell的Identifier屬性為GreenIdentifier。向第一個Cell中拖入一個Label，設(shè)置其字體顏色為綠色。同樣對第二個Cell進行設(shè)置，Identifier屬性為RedIdentifier，往其中拖入Label，設(shè)置字體顏色為紅色。兩個Label的Tag屬性都設(shè)為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、運行一下，當(dāng)單擊List行時，頁面切換到我們List視圖：

??

22、下面實現(xiàn)單擊List表格中的某一行，視圖切換，并且視圖中的內(nèi)容與之前選中的行相關(guān)，然后可以對其進行編輯，返回后，原來的數(shù)據(jù)也會發(fā)生改變。

打開MainStoryboard.storyboard，仿照第14步，從List View Controller中的兩行向List Edit View Controller拉線，在彈出菜單選擇Push。這樣List Edit View Controller視圖中就出現(xiàn)了Navigation Item，選中它，設(shè)置Title為Edit。這樣，單擊List表格中的某一行，視圖都會切換到List Edit View Controller。

23、打開ListViewController.m，在@end之前添加代碼：

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {//獲取目的ViewControllerUIViewController *destination = [segue destinationViewController];if ([destination respondsToSelector:@selector(setPreViewController:)]) {//將自身傳遞給目的ViewController[destination setValue:self forKey:@"preViewController"];}if ([destination respondsToSelector:@selector(setSelection:)]) {//目的ViewController中的selection屬性存儲的就是需要編輯的內(nèi)容及其在表格中的位置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中創(chuàng)建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方法，它默認(rèn)是被注釋掉的，去掉其周圍注釋符，添加代碼如下：

- (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:)]) {//結(jié)束編輯[editText endEditing:YES];NSIndexPath *indexPath = [selection objectForKey:@"indexPath"];id object = editText.text;NSDictionary *editedSelection = [NSDictionary dictionaryWithObjectsAndKeys:indexPath, @"indexPath",object, @"object",nil];//設(shè)置上一個ViewController中的editedSelection，由于設(shè)置editedSelection方法//已經(jīng)重寫，從而對應(yīng)在表格中的數(shù)據(jù)會發(fā)生變化[preViewController setValue:editedSelection forKey:@"editedSelection"];} }

27、運行：

??

單擊List行時，視圖切換到上面右圖所示。然后單擊Pig那一行，視圖切換到Edit視圖，然后編輯內(nèi)容，之后返回，這樣，原來表格中的內(nèi)容就會發(fā)生改變：

??

總結(jié)

以上是生活随笔為你收集整理的Storyboard的简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。