Xamarin.iOS のストーリーボード

このガイドでは、ストーリーボードとは何かを説明し、Segues などの主要なコンポーネントをいくつか調べます。 ストーリーボードを作成して使用する方法と、開発者にとってどのような利点があるかを見ていきます。

iOS アプリケーションの UI の視覚的表現として Apple によってストーリーボード ファイル形式が導入される前に、開発者はビュー コントローラーごとに XIB ファイルを作成し、各ビュー間のナビゲーションを手動でプログラミングしました。 ストーリーボードを使用すると、開発者はビュー コントローラーとそれらの間のナビゲーションの両方をデザイン サーフェイス上で定義し、アプリケーションのユーザー インターフェイスの WYSIWYG 編集を提供できます。

ストーリーボードは、Visual Studio for Mac で作成して開くことができます。 このガイドでは、Xcode インターフェイス ビルダーを使用してストーリーボードを作成し、C# を使用してナビゲーションをプログラミングする方法についても説明します。

要件

ストーリーボードは Xcode で使用でき、Visual Studio for Mac の Xamarin.iOS プロジェクト内から起動できます。

ストーリーボードとは

ストーリーボードは、アプリケーション内のすべての画面を視覚的に表現することです。 これには一連のシーンが含まれており、各シーンはビュー コントローラーとそのビューを表します。 これらのビューには、ユーザーがアプリケーションと対話できるようにするオブジェクトと コントロール が含まれている場合があります。 このビューとコントロール (または サブビュー) のコレクションは、コンテンツ ビュー階層と 呼ばれます。 シーンは、ビュー コントローラー間の遷移を表すセグエ オブジェクトによって接続されます。 これは通常、最初のビュー上のオブジェクトと接続ビューの間にセグエを作成することによって実現されます。 デザインサーフェイス上のリレーションシップを次の図に示します。

図に示すように、ストーリーボードは、コンテンツが既にレンダリングされている各シーンをレイアウトし、それらの間の接続を示しています。 i電話のシーンについて話すときは、ストーリーボード上の 1 つのシーンがデバイス上のコンテンツの 1 つの画面と等しいと仮定しても安全です。 ただし、iPad では、たとえば Popover ビュー コントローラーを使用して、複数のシーンを一度に表示することができます。

ストーリーボードを使用してアプリケーションの UI を作成するには、特に Xamarin を使用する場合に多くの利点があります。 まず、カスタム コントロールを含むすべてのオブジェクトがデザイン時にレンダリングされるため、UI を視覚的に表現します。 つまり、アプリケーションをビルドまたはデプロイする前に、その外観とフローを視覚化できます。 たとえば、前の画像を取得します。 デザイン サーフェイスを簡単に見ると、シーンの数、各ビューのレイアウト、およびすべてがどのように関連しているかを確認できます。 これがストーリーボードの強力な機能です。

ストーリーボードを使用してイベントを管理することもできます。 ほとんどの UI コントロールには、Properties Pad で考えられるイベントの一覧があります。 イベント ハンドラーは、ここに追加して、View Controllers クラスの部分メソッドで完了できます。

ストーリーボードの内容は XML ファイルとして格納されます。 ビルド時には、すべての .storyboard ファイルがニブと呼ばれるバイナリ ファイルにコンパイルされます。 実行時に、これらのニブは初期化され、新しいビューを作成するためにインスタンス化されます。

セグエ

Segue (セグエ オブジェクト) は、シーン間の遷移を表すために iOS 開発で使用されます。 セグエを作成するには、Ctrl キーを押しながら、シーン間をクリックしてドラッグします。 マウスをドラッグすると、セグエがリードする場所を示す青いコネクタが表示されます。 これは次の図に示されています。

マウスを上に置くと、セグエのアクションを選択できるメニューが表示されます。 次の図のようになります。

iOS 8 より前のクラスとサイズ クラス:

サイズ クラスとアダプティブ セグエを使用する場合:

重要

Windows 仮想マシンに VMWare を使用している場合、Ctrl キーを押しながらクリックすると、既定では右クリック マウス ボタンとしてマップされます。 セグエを作成するには、環境設定キーボードとマウス>のショートカットを使用してキーボード環境設定>を編集し、次に示すようにセカンダリボタンを再マップします。

ビュー コントローラー間に通常どおりセグエを追加できるようになりました。

さまざまな種類の画面切り替えがあり、それぞれが新しいビュー コントローラーをユーザーに表示する方法と、ストーリーボード内の他のビュー コントローラーと対話する方法を制御できます。 これらについて以下に詳しく説明します。 segue オブジェクトをサブクラス化してカスタム遷移を実装することもできます。

• 表示/プッシュ – プッシュ セグエによってビュー コントローラーがナビゲーション スタックに追加されます。 プッシュ元のビュー コントローラーが、スタックに追加されるビュー コントローラーと同じナビゲーション コントローラーの一部であることを前提としています。 これは、画面のデータ間に pushViewController 何らかの関係がある場合に一般的に使用されます。 プッシュ セグエを使用すると、戻るボタンとタイトルがスタック上の各ビューに追加されたナビゲーション バーが用意され、ビュー階層のナビゲーションをドリルダウンできます。

• モーダル – モーダル セグエは、アニメーション化された画面切り替えを表示するオプションを使用して、プロジェクト内の任意の 2 つのビュー コントローラー間にリレーションシップを作成します。 子ビュー コントローラーは、ビューに取り込まれると、親ビュー コントローラーを完全に隠します。 戻るボタンを追加するプッシュ セグエとは異なり、前のビュー コントローラーに戻るには、モーダル セグエを使用するときに a を使用 DismissViewController する必要があります。

• Custom – 任意のカスタム セグエをサブクラス UIStoryboardSegueとして作成できます。

• アンワインド – アンワインド セグエを使用すると、モーダル表示ビュー コントローラーを閉じるなどして、プッシュまたはモーダル セグエ内を戻ることができます。 これに加えて、1 つだけでなく、一連のプッシュおよびモーダル セグエを使用してアンワインドし、1 つのアンワインド アクションを使用してナビゲーション階層内の複数のステップに戻ることができます。 iOS でアンワインド セグエを使用する方法については、「アンワインド セグエの作成」レシピを参照してください。

• ソースレス – ソースレス セグエは、初期ビュー コントローラーを含むシーンを示すため、ユーザーが最初に表示するビューを示します。 これは、次に示すセグエによって表されます。

  

アダプティブ セグエ型

iOS 8 ではサイズ クラスが導入され、iOS ストーリーボード ファイルが使用可能なすべての画面サイズで動作し、開発者はすべての iOS デバイスに対して 1 つの UI を作成できるようになりました。 既定では、すべての新しい Xamarin.iOS アプリケーションでサイズ クラスが使用されます。 古いプロジェクトのサイズ クラスを使用するには、「統合ストーリーボードの 概要」ガイドを 参照してください。

サイズ クラスを使用するアプリケーションでは、新しいアダプティブ セグエも使用されます。 サイズ クラスを使用する場合は、i電話 または iPad のどちらを使用しているかを直接指定していないことを覚えておいてください。 つまり、使用する必要がある不動産の量に関係なく、常に同じように見える 1 つの UI を作成します。 アダプティブ セグエは、環境を判断し、コンテンツを提示する最善の方法を決定することによって機能します。 アダプティブ セグエを次に示します。

移る	説明
表示	これはプッシュセグエによく似ていますが、画面の内容を考慮します。
詳細の表示	アプリにマスター ビューと詳細ビューが表示される場合 (たとえば、iPad の分割ビュー コントローラー内)、コンテンツによって詳細ビューが置き換えられます。 アプリにマスターまたは詳細のみが表示される場合は、ビュー コントローラー スタックの上部がコンテンツによって置き換えられます。
プレゼンテーション	これはモーダル セグエに似ていて、プレゼンテーションスタイルと切り替えスタイルを選択できます。
ポップオーバー プレゼンテーション	これにより、コンテンツがポップオーバーとして表示されます。

Segues を使用したデータの転送

セグエの利点は、移行で終わることはありません。 ビュー コントローラー間のデータ転送を管理するためにも使用できます。 これは、初期ビュー コントローラーでメソッドを PrepareForSegue オーバーライドし、データを自分で処理することで実現されます。 セグエがトリガーされると (ボタンを押した場合など)、アプリケーションはこのメソッドを呼び出し、ナビゲーションが発生する前に新しいビュー コントローラーを準備する機会を提供します。 電話word サンプルの次のコードは、これを示しています。

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 ユーザーによってセグエがトリガーされたときにメソッドが呼び出されます。 まず、"receiving" ビュー コントローラーのインスタンスを作成し、これをセグエの宛先ビュー コントローラーとして設定する必要があります。 これは、次のコード行によって行われます。

var callHistoryController = segue.DestinationViewController as CallHistoryController;

メソッドにプロパティを設定する機能が追加されました。DestinationViewController この例では、呼び出された PhoneNumbers リストを渡し、同じ名前のオブジェクトに CallHistoryController 割り当てることで、その機能を利用します。

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

切り替えが完了すると、ユーザーに入力された一覧が表示 CallHistoryController されます。

ストーリーボード以外のプロジェクトへのストーリーボードの追加

場合によっては、ストーリーボード以外のファイルにストーリーボードを追加することが必要になる場合があります。 次の手順に従って、Visual Studio for Mac のプロセスを効率化できます。

Visual Studio for Mac

1. 新しいファイル iOS > ストーリーボードを参照して、新しいストーリーボード ファイルを>>作成します。

   

2. Info.plist のメイン インターフェイス セクションにストーリーボード名を追加します。

   

   これは、アプリ デリゲート内のメソッドで初期ビュー コントローラーを FinishedLaunching インスタンス化することと同じです。 このオプションを設定すると、アプリケーションはウィンドウをインスタンス化し (次の手順を参照)、メインストーリーボードを読み込み、ストーリーボードの初期ビュー コントローラー (ソースレス セグエの横にあるもの) のインスタンスをウィンドウのプロパティとしてRootViewController割り当てます。 その後、ウィンドウが画面に表示されます。

3. AppDelegateで、既定Windowのメソッドを次のコードでオーバーライドして、window プロパティを実装します。

   public override UIWindow Window {
       get;
       set;
   }
   

Visual Studio

1. プロジェクトを右クリックして新しいストーリーボード ファイルを作成し、新しいファイル > iOS > 空のストーリーボードを追加>します。

   

2. iOS アプリケーションのメイン インターフェイス セクションにストーリーボード名を追加します。

   

   これは、アプリ デリゲート内のメソッドで初期ビュー コントローラーを FinishedLaunching インスタンス化することと同じです。 このオプションを設定すると、アプリケーションはウィンドウをインスタンス化し (次の手順を参照)、メインストーリーボードを読み込み、ストーリーボードの初期ビュー コントローラー (ソースレス セグエの横にあるもの) のインスタンスをウィンドウのプロパティとしてRootViewController割り当てます。 その後、ウィンドウが画面に表示されます。

3. AppDelegateで、既定Windowのメソッドを次のコードでオーバーライドして、window プロパティを実装します。

   public override UIWindow Window {
       get;
       set;
   }
   

Xcode を使用したストーリーボードの作成

ストーリーボードは、Visual Studio for Mac で開発された iOS アプリで使用するために Xcode を使用して作成および変更できます。

ストーリーボードはプロジェクト内の個々の XIB ファイルを完全に置き換えますが、ストーリーボード内の個々のビュー コントローラーは Storyboard.InstantiateViewController、

アプリケーションには、デザイナーによって提供される組み込みのストーリーボード遷移では処理できない特別な要件がある場合があります。 たとえば、アプリケーションの現在の状態に応じて、同じボタンから異なる画面を起動するアプリケーションを作成する場合は、ビュー コントローラーを手動でインスタンス化し、移行を自分でプログラムすることができます。

次のスクリーンショットは、デザイン サーフェイス上の 2 つのビュー コントローラーの間にセグエがない状態を示しています。 次のセクションでは、コードでその遷移を設定する方法について説明します。

1. 既存のプロジェクトに空の i電話 ストーリーボードを追加します。

   

2. ストーリーボード ファイルをダブルクリックするか、右クリックして [Xcode インターフェイス ビルダーで>開く] を選択して Xcode のインターフェイス ビルダーで開きます。

3. Xcode でライブラリを開き ([ライブラリの表示>] または [Shift + Command + L] を使用して)、ストーリーボードに追加できるオブジェクトの一覧を表示します。 Navigation Controllerリストからストーリーボードにオブジェクトをドラッグしてストーリーボードに a を追加します。 既定では、 Navigation Controller 2 つの画面が提供されます。 右側の画面は TableViewController 、ビューをクリックして Delete キーを押すことで削除できるように、より単純なビューに置き換えるものです。

   

4. このビュー コントローラーには独自のカスタム クラスがあり、独自のストーリーボード ID も必要です。 この新しく追加されたビューの上にあるボックスをクリックすると、3 つのアイコンが表示され、その左端がビューのビュー コントローラーを表します。 このアイコンを選択すると、右側のウィンドウの ID タブでクラスと ID の値を設定できます。これらの値を a0/MainViewController&チェック に設定し、確実にチェックUse Storyboard IDします。

   

5. ライブラリをもう一度使用して、ビュー コントローラー コントロールを画面にドラッグします。 これはルート ビュー コントローラーとして設定されます。 コントロール キーを押しながら、左側のナビゲーション コントローラーから右側に新しく追加されたビュー コントローラーをクリックしてドラッグし、メニューでルート ビュー コントローラーを選択します。

   

6. このアプリは別のビューに移動するため、前と同じようにストーリーボードにもう 1 つのビューを追加します。 それをPinkViewController呼び出し、これらの値を設定するのと同じ方法で、MainViewController

   

7. ビュー コントローラはピンク色の背景を持つことになりますので、次のドロップダウンを使用して属性パネルでそのプロパティを設定します Background。

   

8. に移動PinkViewControllerする必要MainViewControllerがあるため、前者は操作するボタンが必要です。 ライブラリを使用してボタンを追加します 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 にクラス名を MainViewcontroller.cs 追加したときに、IDE によってクラスとそれに対応する *.designer.cs ファイルが作成されていることに注目してください。 このクラスは、基底クラスを含む特別なコンストラクターを作成しました。

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

Xcode を使用してストーリーボードを作成すると、IDE は自動的に [Register] 属性をクラスの先頭に追加し、前の*.designer.cs手順で指定したストーリーボード ID と同じ文字列識別子を渡します。 これにより、C# がストーリーボード内の関連するシーンにリンクされます。

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

クラスとメソッドの登録の詳細については、「型Registrar」を参照してください。

このクラスの最後の手順は、ボタンとピンクのビュー コントローラーへの切り替えを接続することです。 ストーリーボードからインスタンス化 PinkViewController します。次のコード例に示すように、プッシュ セグエを PushViewControllerプログラムします。

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 画面のアプリケーションが生成されます。

条件付きセグエ

多くの場合、ビュー コントローラー間の移動は、特定の条件に依存します。 たとえば、単純なログイン画面を作成していた場合は、ユーザー名とパスワードが検証されている場合にのみ、次の画面に移動します。

次の例では、前のサンプルにパスワード フィールドを追加します。 ユーザーは、正しいパスワードを 入力した場合にのみ PinkViewController にアクセスでき、それ以外の場合はエラーが表示されます。

開始する前に、前の手順 1 ~ 8 に従います。 これらの手順では、ストーリーボードを作成し、UI の作成を開始し、RootViewController として使用するビュー コントローラーをアプリ デリゲートに指示します。

1. 次に、UI を構築し、次のスクリーンショットのように表示されるように、一覧表示されている MainViewController 追加のビューを追加します。

   • UITextField
     • 名前: PasswordTextField
     • プレースホルダー: 'シークレット パスワードの入力'
   • UILabel
     • テキスト: 'Error: Wrong Password. 渡すな!
     • [Color]: 赤色
     • 配置: 中央
     • 行数: 2
     • 'Hidden' チェックbox チェックed

   

2. PinkButton から PinkViewController にコントロールをドラッグし、[マウスを上にプッシュ] を選択して、[ピンクへ移動] ボタンとビュー コントローラーの間にセグエを作成します。

3. セグエをクリックして識別子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 をセグエと SegueToPink 一致させたので、条件 (この場合は有効なパスワード) をテストできます。 私たちの条件が返された true場合、セグエは実行し、提示します PinkViewController. この場合 false、新しいビュー コントローラーは表示されません。

この方法は、このビュー コントローラー上の任意の Segue に適用できます。segueIdentifier 引数を ShouldPerformSegue メソッドにチェックします。 この場合、セグエ識別子は 1 つだけです SegueToPink。

実際の例については、手動ストーリーボードサンプルの Storyboards.Conditional ソリューションを参照してください。

まとめ

この記事では、ストーリーボードの概念と、それらが iOS アプリケーションの開発にどのように役立つのかについて説明します。 シーン、ビュー コントローラー、ビュー、ビュー階層、シーンをさまざまな種類のセグエとリンクする方法について説明します。 また、ストーリーボードからビュー コントローラーを手動でインスタンス化し、条件付きセグエを作成する方法についても説明します。

関連リンク

• 手動ストーリーボード (サンプル)
• iOS Designer の概要
• ストーリーボードへの変換
• UIStoryboard クラス リファレンス