Storyboard 的簡單使用

今天看了一個巨人的文章，很是喜歡，轉載一下

以前作的例子，咱們常常會用到.xib文件，在其中咱們能夠進行界面的設計。不過若是想切換視圖，咱們就得本身寫不少代碼。自從蘋果推出了Storyboard，咱們能夠在一個編輯區域設計多個視圖，並經過可視化的方法進行各個視圖之間的切換。以下圖：

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

Storyboard功能強大，經過它不只能夠單獨設計每個視圖，還能很簡單地實現各個視圖之間的切換。

接下來的例子主要顯示Storyboard的功能，順便用Storyboard實現了靜態表格等功能。爲了顯示Storyboard的功能，咱們從Empty Application開始咱們的例子。

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

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

三、建立一個Storyboard：

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

以後單擊Next，選擇Device Family爲iPhone，單擊Next，輸入名稱MainStoryboard，並設好Group：

單擊Create，這樣就建立了一個Storyboard。

四、配置程序，使得從MainStoryboard啓動：

先單擊左邊帶藍色圖標的Storyboard Test，而後選擇Summary，接下來在Main Storyboard中選擇MainStoryboard：

這樣，當運行程序時，就從MainStoryboard加載內容了。

五、單擊MainStoryboard.storyboard，會發現編輯區域是空的。拖一個Navigation Controller到編輯區域：

六、選中右邊的View Controller，而後按Delete鍵刪除它。以後拖一個Table View Controller到編輯區域：

七、咱們將在這個Table View Controller中建立靜態表格，不過先要將其設置爲左邊Navigation Controller的Root Controller：

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

鬆開鼠標後，在彈出菜單選擇Relationship - rootViewController：

以後，兩個框之間會出現一個鏈接線，這個就能夠稱做是Segue。

八、選中Table View Controller中的Table View，以後打開Attribute Inspector，設置其Content屬性爲Static Cells：

這樣你會發現Table View中出現了三行Cell。在上圖你能夠設置不少熟悉，好比Style、Section數量等。

九、設置行數：

選中Table View Section，在Attribute Inspector中設置其行數爲2：

而後選中每一行，設置其Style爲Basic：

設置第一行中Label的值爲：Date and Time，第二行中的Label爲List；以後選中下方的Navigation Item，在Attribute Inspector設置Title爲Root View，Back Button爲Root：

十、咱們實現單擊表格中的Date and Time這一行實現頁面轉換，在新頁面顯示切換時的時間。

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

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

以後，選好位置和Group，完成建立。

十一、再次打開MainStoryboard.storyboard，拖一個View Controller到編輯區域，而後選中這個View Controller，打開Identity Inspector，設置class屬性爲DateAndTimeViewController：

這樣，咱們就能夠向DateAndTimeViewController建立映射了。

十二、向新拖入的View Controller添加控件，以下圖：

而後將顯示爲Label的兩個標籤向DateAndTimeViewController.h中建立映射，名稱分別是dateLabel、timeLabel：

1三、打開DateAndTimeViewController.m，在ViewDidUnload方法以後添加代碼：

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

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

在彈出的菜單選擇Push：

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

1五、選中DateAndTimeViewController中的Navigation Item，在Attribute Inspector中設置其Title爲Date and Time：

1六、運行一下，首先程序將加載靜態表格，表格中有兩行：Date and Time以及List，單擊Date and Time，視圖切換到相應視圖，單擊左上角的Root按鈕，視圖回到Root View。每次進入Date and Time視圖，顯示的時間都會不一樣：

      

1七、接下來，咱們將要實現，單擊List行，顯示一個表格，而且單擊表格中的某一行，咱們能夠在新彈出的視圖中編輯該行內容。首先建立ViewController文件：ListViewController、ListEditViewController，前者繼承UITableViewController，後者繼承UIViewController，參照第10步。都不要建立XIB文件。

而後打開MainStoryboard.storyboard，拖一個Table View Controller和View Controller到編輯區域，調整全部視圖在編輯區域的位置，以下圖：

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

1八、參照第14步，從Root View Controller中的List那一行向List View Controller拉線，並在彈出菜單也選擇Push。而後選中List View Controller的Navigation Item，設置Title及Back Button都爲List，能夠參照第9步。

1九、向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;
}

2一、運行一下，當單擊List行時，頁面切換到咱們List視圖：

   

2二、下面實現單擊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。

2三、打開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];
    }
}

2四、打開MainStoryboard.storyboard，找到Edit視圖，向其中拖一個Text Field：

而後爲這個Text Field向ListEditViewController.h中建立Outlet映射，名稱爲editText。

2五、打開ListEditViewController.h，向其中添加屬性：

@property (copy, nonatomic) NSDictionary *selection; 
@property (weak, nonatomic) id preViewController;

2六、打開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"];
    }
}

2七、運行：

   

單擊List行時，視圖切換到上面右圖所示。而後單擊Pig那一行，視圖切換到Edit視圖，而後編輯內容，以後返回，這樣，原來表格中的內容就會發生改變：

   

最終代碼：http://www.oschina.net/code/snippet_164134_10535