共用方式為

Xamarin.iOS 中的分鏡腳本

  • 發行項

在本指南中，我們將說明分鏡腳本是什麼，並檢查一些重要元件，例如 Segues。 我們將探討如何建立及使用分鏡腳本，以及他們對於開發人員的優點。

在 Apple 將 Storyboard 檔格式介紹為 iOS 應用程式的 UI 可視化表示之前，開發人員會為每個檢視控制器建立 XIB 檔案，並手動設計每個檢視之間的流覽。 使用分鏡腳本可讓開發人員在設計介面上定義檢視控制器和它們之間的流覽，並提供應用程式的使用者介面 WYSIWYG 編輯。

您可以使用 Visual Studio for Mac 建立及開啟分鏡腳本。 本指南也會逐步解說如何使用 Xcode 介面產生器，在使用 C# 來撰寫導覽程式時建立腳本。

需求

分鏡腳本可以搭配 Xcode 使用，並從 Visual Studio for Mac 上的 Xamarin.iOS 專案中啟動。

什麼是分鏡腳本？

分鏡腳本是應用程式中所有畫面的視覺表示法。 它包含一連串的場景，每個場景都代表 檢視控制器 及其 檢視。 這些檢視可能包含可讓使用者與應用程式互動的物件和 控件 。 這個檢視和控件集合（或子檢視）稱為內容檢視階層。 場景是由 segue 物件所連接，代表檢視控制器之間的轉換。 這通常是藉由在初始檢視和連接檢視上建立 對象之間的 Segue 來達成。 設計介面上的關聯性如下圖所示：

此影像說明設計介面上的關聯性

如圖所示，分鏡腳本會配置每個已呈現內容的場景，並說明它們之間的連線。 當我們談論 iPhone 上的場景時，可以放心地假設分鏡腳本上的一個 場景 等於裝置上的一個 內容畫面 。 不過，使用 iPad 時，可以使用 Popover 檢視控制器一次顯示多個場景。

使用分鏡腳本來建立應用程式的UI有許多優點，尤其是在使用 Xamarin 時。 首先，它是UI的視覺表示法，因為設計時間會轉譯所有物件，包括 自定義控件 。 這表示在建置或部署應用程式之前，您可以將其外觀和流程可視化。 例如，擷取上一個影像。 我們可以快速查看設計介面有多少場景、每個檢視的配置，以及所有專案如何相關。 這就是讓分鏡腳本如此強大。

您也可以使用分鏡腳本來管理事件。 大部分的UI控制件都有 Properties Pad 中可能的事件清單。 您可以在此新增事件處理程式，並在 View Controllers 類別的部分方法中完成。

分鏡腳本的內容會儲存為 XML 檔案。 在建置階段，任何 .storyboard 檔案會編譯成稱為 nibs 的二進位檔。 在運行時間，這些 nibs 會初始化並具現化，以建立新的檢視。

Segues

在 iOS 開發中使用 Segue 或 Segue 物件來代表場景之間的轉換。 若要建立 Segue，請按住 Ctrl 鍵，然後從一個場景按下拖曳到另一個場景。 當您拖曳滑鼠時，會出現藍色連接器，指出segue將導向的位置。 如下圖所示：

藍色連接器隨即出現，指出 segue 將引導的位置，如此影像所示

在滑鼠上，會出現一個功能表，可讓您選擇 segue 的動作。 其看起來可能類似下列影像：

iOS 8 和大小類別：

不含 Size 類別的動作 Segue 下拉式清單

使用大小類別和自適性 Segue 時：

大小類別的動作 Segue 下拉式清單

重要

如果您針對 Windows 虛擬機使用 VMWare，按 Ctrl 鍵預設會對應為 滑鼠右鍵 按鈕。 若要建立 Segue，請透過 [喜好設定>] 鍵盤和滑鼠滑鼠>快捷方式編輯您的鍵盤喜好設定，然後重新對應您的 [次要] 按鈕，如下所示：

鍵盤和滑鼠喜好設定

您現在應該能夠如常在檢視控制器之間新增 Segue。

有不同類型的轉換，每個轉換都會控制如何向用戶呈現新的檢視控制器，以及如何與分鏡腳本中的其他檢視控制器互動。 以下將說明這些內容。 您也可以將 segue 物件子類別化，以實作自訂轉換：

  • 顯示/推送 – 推送 segue 會將檢視控制器新增至瀏覽堆疊。 它假設源自推送的檢視控制器是與新增至堆疊之檢視控制器相同的流覽控制器的一部分。 這與 相同， pushViewController 而且通常會在畫面上的數據之間有一些關聯性時使用。 使用推送 Segue 可讓您擁有一個導覽列，並在堆疊上新增每個檢視的返回按鈕和標題，讓您能夠向下切入瀏覽檢視階層。

  • Modal – 強制回應 segue 會在專案中的任何兩個檢視控制器之間建立關聯性，並顯示動畫轉換的選項。 子檢視控制器會在帶入檢視時完全遮蔽父檢視控制器。 不同於新增我們返回按鈕的推送 segue，您必須在使用強制回應 segue 時使用 DismissViewController ，才能返回上一個檢視控制器。

  • Custom – 任何自定義 Segue 都可以建立為 的 UIStoryboardSegue子類別。

  • 回溯 – 回 溯 segue 可用來透過推送或強制回應 segue 來巡覽，例如，藉由關閉強制回應呈現的檢視控制器。 除此之外，您還可以透過一連串的推送和強制回應 segue 來回溯，並使用單一回溯動作，在瀏覽階層中回溯多個步驟。 若要瞭解如何在 iOS 中使用回溯 Segue，請閱讀 建立回溯 Segues 配方。

  • 無來源 – 無來源 Segue 表示包含初始檢視控制器的場景，因此使用者會先看到哪些檢視。 其以此處所示的 segue 表示：

    無來源 Segue

自適性 Segue 類型

iOS 8 引進 了大小類別 ，可讓 iOS 分鏡腳本檔案使用所有可用的螢幕大小，讓開發人員為所有 iOS 裝置建立一個 UI。 根據預設，所有新的 Xamarin.iOS 應用程式都會使用大小類別。 若要從較舊的專案使用大小類別，請參閱 整合分鏡腳本 簡介指南。

任何使用大小類別的應用程式也會使用新的 Adaptive Segues。 使用大小類別時，請記住，您不會直接指定您是否使用 iPhone 或 iPad。 換句話說，您要建立一個一律會看起來相同的UI，無論它必須處理多少房地產。 自適性 Segues 的運作方式是判斷環境，並判斷如何最好呈現內容。 調適型 Segue 如下所示：

調適型 Segues 下拉式清單

Segue 描述
顯示 這與推送 segue 非常類似，但它會將畫面的內容納入考慮。
顯示詳細資料 如果應用程式顯示主要和詳細數據檢視（例如，在iPad上的分割檢視控制器中），內容將會取代詳細數據檢視。 如果應用程式只顯示主要或詳細數據，內容將會取代檢視控制器堆疊的頂端。
簡報 這類似於Modal segue，並允許選取簡報和轉換樣式。
Popover 簡報 這會將內容呈現為快顯。

使用 Segue 傳輸數據

Segue 的優點不會以轉換結束。 它們也可以用來管理檢視控制器之間的數據傳輸。 這是藉由覆寫 PrepareForSegue 初始檢視控制器上的方法，並自行處理數據來達成。 觸發 segue 時 – 例如，按下按鈕時，應用程式會呼叫此方法，提供在發生任何流覽之前準備新檢視控制器的機會。 下列程式碼將示範此作業：

public override void PrepareForSegue (UIStoryboardSegue segue,
NSObject sender)
{
    base.PrepareForSegue (segue, sender);

    var callHistoryController = segue.DestinationViewController
                                  as CallHistoryController;

    if (callHistoryController != null) {
        callHistoryController.PhoneNumbers = PhoneNumbers;
    }
}

在此範例中， PrepareForSegue 當使用者觸發 segue 時，將會呼叫 方法。 您必須先建立「接收」檢視控制器的實例，並將它設定為 segue 的目的地檢視控制器。 這由下列程式代碼行完成：

var callHistoryController = segue.DestinationViewController as CallHistoryController;

方法現在能夠在 上 DestinationViewController設定屬性。 此範例會藉由將名為 PhoneNumbers 的清單傳遞至 ，並將它指派給 CallHistoryController 相同名稱的物件，以利用此功能：

if (callHistoryController != null) {
        callHistoryController.PhoneNumbers = PhoneNumbers;
    }

轉換完成後，使用者會看到 CallHistoryController 填入的清單。

將分鏡腳本新增至非分鏡腳本專案

有時候，您可能需要將分鏡腳本新增至先前的非分鏡腳本檔案。 您可以遵循下列步驟，簡化 Visual Studio for Mac 中的程式：

  1. 流覽至 [檔案>新檔案 iOS > 分鏡腳本] 來建立新的分鏡腳本檔案>。

    [新增檔案] 對話框

  2. 將分鏡腳本名稱新增至 Info.plist 的 [主要介面] 區段。

    Info.plist 編輯器

    這相當於在應用程式委派內的方法中 FinishedLaunching 具現化初始檢視控制器。 設定此選項後，應用程式會具現化視窗（請參閱下一個步驟）、載入主分鏡腳本，並將分鏡腳本的初始檢視控制器實例（位於無來源 Segue 旁的實例）指派為 RootViewController 視窗的 屬性。 然後，它會在畫面上顯示視窗。

  3. 在 中 AppDelegate，使用下列程式代碼覆寫預設 Window 方法，以實作 window 屬性：

    public override UIWindow Window {
    get;
    set;
}

使用 Xcode 建立分鏡腳本

您可以使用 Xcode 來建立及修改分鏡腳本，以在 Visual Studio for Mac 開發的 iOS 應用程式中使用。

分鏡腳本會完全取代專案中的個別 XIB 檔案，不過分鏡腳本中的個別檢視控制器仍然可以使用 Storyboard.InstantiateViewController具現化。

有時候應用程式有特殊需求，無法使用設計工具所提供的內建分鏡腳本轉換來處理。 例如，如果您要建立從相同按鈕啟動不同畫面的應用程式，視應用程式的目前狀態而定，您可能想要手動具現化檢視控制器，並自行設計轉換程式。

下列螢幕快照顯示設計介面上的兩個檢視控制器，兩者之間沒有 Segue。 下一節將逐步解說如何在程式碼中設定轉換。

  1. 將 空白 iPhone 分鏡文稿 新增至現有的專案：

    新增分鏡腳本

  2. 按兩下分鏡腳本檔案，或以滑鼠右鍵按兩下，然後選取 [以 > Xcode 介面產生器 開啟] 以在 Xcode 的 [介面產生器] 中開啟它。

  3. 在 Xcode 中，開啟 [連結庫] [檢視>顯示連結庫] 或 [Shift + 命令 + L] 以顯示可新增至分鏡腳本的物件清單。 Navigation Controller將 物件從清單拖曳到 Storyboard，以將 新增至 Storyboard。 根據預設， Navigation Controller 會提供兩個畫面。 右邊的畫面是 TableViewController 您將用更簡單的檢視取代的畫面，以便單擊檢視並按Delete鍵加以移除。

    從連結庫新增 NavigationController

  4. 此檢視控制器將有自己的自定義類別，而且也需要自己的分鏡腳本標識碼。 當您按下這個新增檢視上方的方塊時，有三個圖示，最左邊代表檢視的檢視控制器。 選取此圖示，即可在右窗格的 [身分識別] 索引卷標上設定類別和標識符值。將這些值設定為 ， MainViewController 並確定要檢查 Use Storyboard ID。

    在身分識別面板中設定MainViewController

  5. 再次使用連結庫，將檢視控制器控件拖曳到畫面上。 這會設定為根檢視控制器。 按住 [控制] 鍵，從左側的 [流覽控制器] 按下並拖曳至右側新增的 [檢視控制器]，然後選取功能表中的根檢視控制器。

    從連結庫新增 NavigationController，並將 MainViewController 設定為根檢視控制器

  6. 此應用程式會巡覽至另一個檢視，因此請將一個檢視新增至分鏡腳本，就像之前一樣。 呼叫它 PinkViewController，並以 與 MainViewController相同的方式設定這些值。

    此螢幕快照顯示具有三個檢視的分鏡腳本。

  7. 由於檢視控制器會有粉紅色的背景，請使用 旁邊的 Background下拉式清單，在屬性面板中設定該屬性。

    此螢幕快照顯示上一個步驟的分鏡腳本，最右邊的畫面已變更為粉紅色背景。

  8. 因為我們想要 MainViewController 巡覽至 PinkViewController，因此前者需要按鈕才能與其互動。 使用連結函式庫會按鍵新增至 MainViewController。

    將 Button 新增至 MainViewController

分鏡腳本已完成，但如果您現在部署專案，您將會看到空白畫面。 這是因為您仍然需要告訴 IDE 使用分鏡腳本，並設定根檢視控制器作為第一個檢視。 通常這可以透過項目選項來完成，如先前所示。 不過，在此範例中，我們會將下列程式代碼新增至 AppDelegate ，以達到相同的結果：

public partial class AppDelegate : UIApplicationDelegate
{
    UIWindow window;
    public static UIStoryboard Storyboard = UIStoryboard.FromName ("MainStoryboard", null);
    public static UIViewController initialViewController;

    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
        window = new UIWindow (UIScreen.MainScreen.Bounds);

        initialViewController = Storyboard.InstantiateInitialViewController () as UIViewController;

        window.RootViewController = initialViewController;
        window.AddSubview(initialViewController.View);
        window.MakeKeyAndVisible ();
        return true;
    }
}

這是很多程序代碼，但只有幾行不熟悉。 首先，您會透過傳入分鏡腳本的名稱MainStoryboard，向AppDelegate註冊分鏡腳本。 接下來，您會在分鏡腳本上呼叫 InstantiateInitialViewController ，告知應用程式從分鏡腳本具現化初始檢視控制器，並將該檢視控制器設定為應用程式的根檢視控制器。 此方法會決定使用者看到的第一個畫面，並建立該檢視控制器的新實例。

請注意，當您將類別名稱新增至步驟 4 中的 Properties Pad 時，IDE 會在解決方案窗格中建立類別 MainViewcontroller.cs 及其對應的 *.designer.cs 檔案。 這個類別建立了包含基類的特殊建構函式：

public MainViewController (IntPtr handle) : base (handle)
{
}

使用 Xcode 建立分鏡腳本時，IDE 會自動在類別頂端*.designer.cs新增 [Register] 屬性，並傳入字串標識碼，這與上一個步驟中指定的分鏡腳本標識符相同。 這會將 C# 連結到分鏡腳本中的相關場景。

[Register ("MainViewController")]
public partial class MainViewController : UIViewController
{
    public MainViewController (IntPtr handle) : base (handle)
    {
    }
    //...
}

如需註冊類別與方法的詳細資訊，請參閱 類型 Registrar。

此類別的最後一個步驟是連接按鈕，以及轉換至粉紅色檢視控制器。 您將從 Storyboard 具現化 PinkViewController ;然後，您將使用 PushViewController來撰寫推送 Segue 的程序代碼，如下列範例程式代碼所示：

public partial class MainViewController : UIViewController
{
    UIViewController pinkViewController;

    public MainViewController (IntPtr handle) : base (handle)
    {
    }

    public override void AwakeFromNib ()
    {
        // Called when loaded from xib or storyboard.
        this.Initialize ();
    }

    public void Initialize()
    {
        //Instantiating View Controller with Storyboard ID 'PinkViewController'
        pinkViewController = Storyboard.InstantiateViewController ("PinkViewController") as PinkViewController;
    }

    public override void ViewDidLoad ()
    {
        base.ViewDidLoad ();

        //When we push the button, we will push the pinkViewController onto our current Navigation Stack
        PinkButton.TouchUpInside += (o, e) =>
        {
            this.NavigationController.PushViewController (pinkViewController, true);
        };
    }
}

執行應用程式會產生 2 個畫面的應用程式：

範例應用程式執行畫面

條件式 Segues

通常，從一個檢視控制器移至下一個檢視控制器取決於特定條件。 例如，如果我們製作了簡單的登入畫面，只有在使用者名稱和密碼已驗證時，才會想要移至下一個畫面。

在下一個範例中，我們會將密碼字段新增至上一個範例。 如果使用者輸入正確的密碼，則只能存取 PinkViewController ，否則會顯示錯誤。

開始之前，請遵循先前的步驟 1 – 8。 在這些步驟中，我們會建立分鏡腳本，開始建立UI，並告知應用程式委派要使用哪個檢視控制器作為其RootViewController。

  1. 現在，讓我們建置 UI，並將列出的其他檢視新增至 MainViewController ，使其看起來像在下列螢幕快照中：

    • UITextField
      • 名稱：PasswordTextField
      • 佔位元：'輸入密碼'
    • UILabel
      • 文字：『錯誤：密碼錯誤。 你不應該通過！
      • 顏色：紅色
      • 對齊：置中
      • 行：2
      • 核取 [隱藏] 複選框

    置中線

  2. 從 PinkButton 拖曳至 PinkViewController，然後選取 [按滑鼠上推]，在 [移至粉紅色] 按鈕與檢視控制器之間建立 Segue。

  3. 按兩下 Segue，並將識別碼SegueToPink提供給它：

    按兩下 Segue 並將識別碼命名為 SegueToPink

  4. 最後，將下列 ShouldPerformSegue 方法新增至 MainViewController 類別：

    public override bool ShouldPerformSegue (string segueIdentifier, NSObject sender)
{

    if(segueIdentifier == "SegueToPink"){
        if (PasswordTextField.Text == "password") {
            PasswordTextField.ResignFirstResponder ();
            return true;
        }
        else{
            ErrorLabel.Hidden = false;
            return false;
        }
    }
    return base.ShouldPerformSegue (segueIdentifier, sender);
}

在此程式代碼中，我們已將 segueIdentifier 比對至 segue SegueToPink ，因此我們可以接著測試條件;在此案例中為有效的密碼。 如果我們的條件傳 true回 ，Segue 會執行並呈現 PinkViewController。 如果 false為 ，則不會顯示新的檢視控制器。

我們可以將此方法套用至此檢視控制器上的任何 Segue，方法是將 segueIdentifier 自變數檢查至 ShouldPerformSegue 方法。 在此情況下，我們只有一個 Segue 識別元 – SegueToPink。

摘要

本文介紹分鏡腳本的概念，以及如何在開發 iOS 應用程式方面有所説明。 它會討論場景、檢視控制器、檢視和檢視階層，以及場景如何與不同類型的 Segues 連結。 它也會從分鏡腳本手動探索具現化檢視控制器，以及建立條件式 Segues。