Storyboard 聯線教程-在視圖控制器間傳遞數據

首先，咱們快速回顧一下咱們已經完成的工做。以前，咱們學習了使用Storyboards完成的一些工做：

• 將一個正常的視圖控制器嵌入到導航控制器中；

• 建立了一個表視圖，並填充了菜單列表；

• 使用聯線（Segue）從一個視圖控制器切換到另外一個視圖控制器；

本文完成最後的一部分工做。在App啓動的時候，顯示菜單列表。輕拍其中任何一個菜單項，就切換到另一個視圖，並顯示該菜單的詳細信息。

咱們尚未實現詳細視圖，該視圖如今顯示一個靜態的標籤。咱們將繼續完成這個項目，完善這個應用程序。

賦值視圖控制器類

在第一部分教程中，咱們簡單建立了一個視圖控制器，在Storyboard編輯器中做爲一個菜單的詳細視圖。視圖控制器默認賦值爲 UIViewController 類。

回到咱們的問題。視圖中的標籤應該隨着選擇的菜單發生變化。顯然，在UIViewController 中須要一個變量存放菜單的名稱。
事實是UIViewConroller類僅僅提供了基本的視圖管理模型，至關於一個空白的視圖，沒有變量用於存儲菜單名稱。所以，不能直接使用UIViewController類，咱們擴展這一類，並建立本身的類（也就是UIViewController的子類）。
在項目導航欄中，右擊 RecipeBook 文件夾，選擇 New File …..

選擇 Cocoa Touch 欄目下的Objective-C Class做爲類模板。

將類命名爲RecipeDetailViewController，選擇子類爲 UIViewController。注意不要選擇 With XIB for user interface選項，由於咱們將使用Storyboards 設計用戶界面，咱們沒必要建立獨立的interface builder文件。點擊 Next 按鈕，保存文件在項目文件夾中。

接着，咱們賦值RecipeDetailViewController 類給視圖控制器。返回Storyboards編輯器，選擇詳細視圖控制器。在Identity Inspector 窗口，更改類爲 RecipeDetailViewController。

添加變量到定製的類中

前面剛剛經過繼承UIViewController類，建立了定製的視圖控制器類。然而，這個類和父類沒有任何不一樣，除非咱們添加本身的變量和方法。還有一些工做咱們須要實現的：

• 賦值一個變量（recipeName）用於數據傳遞 – 當用戶選擇Recipe視圖中的一個菜單時，必須傳遞菜單名稱到詳細視圖；

• 賦值變量（recipeLabel）給文本標籤 – 當前標籤是靜態的，但應該在菜單名稱變化時，更新文本標籤；

OK，如今添加2個變量（recipeLabel 和 recipeName）。選擇RecipeDetailViewController.h 文件，爲接口添加2個屬性：
@interface RecipeDetailViewController : UIViewController
@property (nonatomic, strong) IBOutlet UILabel *recipeLabel;
@property (nonatomic, strong) NSString *recipeName;
@end

選擇RecipeDetailViewController.m文件，爲上述變量添加 synthesis。確保代碼在@implementation RecipeDetailViewController 下面：
@implementation RecipeDetailViewController
@synthesize recipeLabel;
@synthesize recipeName;

若是你忘記了接口和實現的內容，可返回訪問本教程，並回顧相應的概念。

創建變量和UI 元素之間的鏈接

接下來，咱們須要鏈接recipeLabel 變量到可視化的Label 標籤。在Storyboards編輯器，按住Control鍵，並點擊Recipe Detail View Controller 圖標，拖拉到Label 對象上。釋放按鈕，彈出變量列表供你選擇，選擇 recipeLabel 變量。

如今，已經鏈接了變量和Label UI元素，變量的任何變化將可視化地顯示出來。可是，仍然有一項工做沒有處理。咱們還須要標籤顯示菜單的名稱。所以，在viewDidLoad 方法中，咱們添加以下代碼，並設置標籤文本和菜單名稱一致。
- (void)viewDidLoad
{
[super viewDidLoad];
// Set the Label text with the selected recipe
recipeLabel.text = recipeName;
}

嘗試編譯並運行你的App。哦，在選擇任一菜單項後，詳細視圖徹底顯示空白。這是指望的效果，由於咱們尚未編寫任何代碼傳遞菜單名稱，recipeName 變量是空白的，致使文本標籤也是空白的。

使用聯線（Segue）傳遞數據

如今到了本教程的核心內容了 – 如何使用聯線（Segue）在視圖控制器之間傳遞數據。聯線管理視圖控制器之間的切換。在此基礎之上，聯線（Segue）對象用來準備視圖控制器之間的切換。當聯線觸發時，在可視化的視圖切換髮生以前，storyboard運行時調用當前視圖控制器的 prepareForSegue:sender: 方法（在本示例中，是RecipeBookViewController）。經過實現該方法，咱們可傳遞任何須要的數據給即將顯示的視圖控制器。
然而，最好的辦法是給Storyboards中每個聯線一個惟一的標識符（identifier），標識符是一個字符串，應用程序使用該字符串來區別不一樣的聯線。隨着App愈來愈複雜，在視圖控制器中，將有更多的聯線（Segue）。
選擇聯線，在Identity Inspector窗口，設置identifier屬性值。這裏，咱們將該聯線命名爲 showRecipeDetail。

接着，咱們將在Recipe Book View Controller視圖控制器中實現 prepareForSegue:sender: 方法，是聯線的源視圖控制器。選擇 RecipeBookViewController.m文件，添加以下代碼：
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
if ([segue.identifier isEqualToString:@"showRecipeDetail"]) {
NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
RecipeDetailViewController *destViewController = segue.destinationViewController;
destViewController.recipeName = [recipes objectAtIndex:indexPath.row];
}
}

在視圖切換開始的時候，調用 prepareForSegue 方法。第一行用來驗證segue的標識符。在本示例中，識別符爲 showRecipeDetail。第二行調用 tableView:indexPathForSelectedRow 獲取選擇的錶行。一旦獲取到選擇的行，咱們將傳遞給 RecipeDetailViewController 視圖控制器。一個Segue 對象包含了須要在轉換結束後在視圖控制器中顯示的內容。你可使用 segue.destinationViewController 獲取目的視圖控制器。在本範例中，目的視圖控制器爲 RecipeDetailViewController。剩下了的代碼就是傳遞菜單名稱給目的控制器。

你如今沒法運行App。在你複製和粘貼上述方法代碼到 RecipeBookViewController.m 文件中後，你應該看到一些錯誤信息：

上圖顯示了3個錯誤，可總結爲2類：

• tableView 屬性在RecipeBookViewController 中沒有找到；

• RecipeDetailViewController 是什麼？Xcode 不知道它是什麼？

咱們先討論第二個錯誤。在RecipeBookViewController 中，它不知道RecipeDetailViewController。在Objective-C中，可以使用 #import 指令引入其餘類的頭文件。經過引入 RecipeDetailViewController 的頭文件，RecipeBookViewController 能夠訪問詳細視圖控制器的屬性和方法。將以下代碼放置在 RecipeBookViewController文件的頭部糾正錯誤：
#import 「RecipeDetailViewController.h」

關於第一個錯誤，你應該知道如何解決，和咱們以前討論的Label UI 元素類似。應該有相應的tableView 變量鏈接 UI 元素。
所以，在RecipeBookViewController.h文件中，在@end 以前添加以下代碼：
@property (nonatomic, strong) IBOutlet UITableView *tableView;

在RecipeBookViewController.m文件，添加synthesis指令，告訴編譯器爲該tableView變量生成訪問方法。
@implementation RecipeBookViewController {
NSArray *recipes;
}

@synthesize tableView; // Add this line of code

最後，返回Storyboards，鏈接變量到 UI 元素。在Recipe Book View Controller中，按住Control 鍵，點擊視圖控制器圖片，拖拉到表視圖中，釋放按鈕，選擇 tableView 變量。

如今，全部的錯誤應該都解決了。如今嘗試編譯和運行App。此次，App應該如所指望的效果運行了。選擇任一菜單項，詳細視圖應該顯示所選擇的菜單項信息。

接下來是什麼？

使用導航界面建立App簡單麼？經過引入 Storyboard，能夠顯著減小須要編寫的代碼量。更重要的是，Storyboard界面提供了高層次地預覽App的操做流程。咱們但願這兩篇文章讓你理解Storyboard是如何工做的，已經如何使用Storyboard構建你本身的App。儘管咱們建立的App比較簡單，且都是一些基本的UI元素，可是它詳細闡述了基本的概念，你能夠基於這些知識建立更復雜的App。

在隨後的教程中，咱們將研究靜態表單元格，並繼續使用tab控制器完善App。