Xamarin逆引きTips
Xamarin.iOSで画面遷移を行うには？（Storyboard使用）
Xamarin.iOSでのStoryboardによる画面遷移を、Xamarin StudioのiOSデザイナーを使用して行う方法を解説。また、コードで画面遷移を実装する方法も説明する。
Xamarin.iOSで画面遷移を行う方法を解説する。iOSでの画面遷移は、Storyboardを利用する場合と、.xibファイルを利用した場合があるが、本稿では現在主流であるStoryboardを使う方法を述べる。また、Xamarin Studio 5.0から、iOSデザイナーが正式機能として搭載されたため、本稿ではiOSデザイナーを使った説明を行う。
1. iOSデザイナーで画面遷移を定義する
「Tips: Xamarin.iOSで画面をレイアウトするには？（Xcode利用／ビルトインiOS用UIデザイナー）」の手順で新規プロジェクトを作成し、生成されたMainStoryboard.storyboardファイルを［ソリューション］パッド上でダブルクリックすると、図1のようにXamarin StudioのiOSデザイナーが表示される。なお、この画面例では、ViewControllerを識別するために意図的に背景色を変えている（＝Viewを選択した状態で、［Background］プロパティに「Green」を設定している）。
次に、Toolboxから「Navigation Controller」をドラッグ＆ドロップし、図2のように配置する。
次に、Navigation Controllerの下部を選択して、プロパティの［Is Initial View Controller］にチェックを入れる。これで最初（緑）のViewControllerについていた矢印が、Navigation Controllerへ移動するはずだ。
続いて、中央（白）のViewControllerに、ToolBoxから「Button」をドラッグ＆ドロップして適当な位置へ配置する。そのボタンをControlキーを押しながら、右（緑）のViewControllerへドラッグ＆ドロップする。すると「Action Segue」を選択するポップアップが表示されるので［Push］を選択する（図4）。
すると2つのViewController間に「セグエ（Segue）」と呼ばれる線が作成されるので、それをクリックして選択し、プロパティから［Identifier］に「goto_green」と入力する（図5）。このIdentifierは、後に複数のViewControllerへ遷移する際の識別子となるものだ。
ここまでのプログラムを実行すると、図6のようになる。
ボタンなどのコントロールにセグエを関連付けることで、コードを書くことなく画面遷移が行える。最も単純な画面遷移の手法だ。
2. コードによる画面遷移を行う
次に、コードで画面遷移を行う方法を解説する。
まず、図7のように、iOSデザイナーでToolboxから「ViewController」をドラッグ＆ドロップで配置する。ここでも識別のため、背景色を青に変更している（＝Viewを選択した状態で、［Background］プロパティに「Cyan」を設定している）。
次にセグエの作成を行うが、今回は中央（白）のViewControllerの下部を選択して、Controlキーを押しながらドラッグを開始する。ドロップ先は右下（青）のViewControllerだ。「Action Segue」は先ほどと同様に［Push］を選択する（図8）。
先ほどと同様に、セグエの［Identifier］を設定する。ここでは「goto_blue」とする。
続いて、中央（白）のViewControllerを選択した状態で、プロパティの［Class］に「FirstViewController」と入力する（図10）。するとプロジェクトにFirstViewController.csファイル（と、FirstViewController.designer.csファイル）が作成される。
さらにFirstViewControllerに、図11のように「Switch」「Label」「Button」を配置する。Buttonコントロール（＝［Goto Next］ボタン）を選択し、プロパティの［Name］に「buttonGotoNext」と設定する。Switchコントロールも同様に［Name］に「switchView」と設定する。
ここでFirstViewControllerの［Goto Next］ボタンをダブルクリックすると、クリックイベントハンドラーが自動的にFirstViewController.csファイルに挿入される（図12）。いわゆるVisual Studioライクな機能だ。もちろんこの機能に頼らずに自分でbuttonGotoNext.TouchUpInside += (sender, e)……と記述してもよい。
この自動生成されたイベントハンドラーに、画面遷移のコードを以下のように記述する。
|
……省略……
partial class FirstViewController : UIViewController
{
public FirstViewController (IntPtr handle) : base (handle)
{
}
partial void buttonGotoNext_TouchUpInside(UIButton sender)
{
if (switchView.On) {
this.PerformSegue("goto_blue", this);
} else {
this.PerformSegue("goto_green", this);
}
}
}
|
画面遷移は、PerformSegueメソッドで行う。画面の通り、SwitchがONなら青のViewConrollerに、OFFなら緑のViewConrollerに遷移している。
ここまでのプログラムを実行すると、以下の画面のようになる。
まとめ
Xamarin.iOSでのStoryboardによる画面遷移を、Xamarin StudioのiOSデザイナーを使用して行う方法を解説した。Xcodeに慣れている人は、ソリューション上のMainStoryboard.storyboardファイルをマウスで右クリックして、Xcode Interface Builderを利用することも可能だ。
次回以降は、画面遷移時にデータを渡す方法や、画面を戻る際のセグエ（Unwind Segue）などについて解説していく予定だ。
※以下では、本稿の前後を合わせて5回分（第12回～第16回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
12. Xamarin.Formsの既存のコントロールを拡張するには？
Xamarin.Formsのコントロールにはプラットフォーム共通の基本的な機能しか含まれていない。既存のコントロールを拡張して、ネイティブ側で機能を追加する方法を解説。
13. Xamarin.Formsで新しいコントロールを作成するには？
Xamarin.Formsでは、既存のコントロールを拡張できるだけでなく、全く新しいコントロールを作成することもできる。その内部には、iOS／Androidで違うコントロールを含めたりできる。その作成方法を解説。
14. 【現在、表示中】≫ Xamarin.iOSで画面遷移を行うには？（Storyboard使用）
Xamarin.iOSでのStoryboardによる画面遷移を、Xamarin StudioのiOSデザイナーを使用して行う方法を解説。また、コードで画面遷移を実装する方法も説明する。
15. Xamarin.iOSで画面遷移先にデータを渡すには？（Storyboard使用）
Xamarin.iOSでStoryboardにより画面遷移を行う際に、遷移元から遷移先にデータを渡す方法を解説する。
16. Xamarin.iOSでの画面遷移で「戻る」を実現するには？（Storyboard、Unwind Segue使用）
画面遷移で戻る処理を実装する方法として、Xamarin StudioのiOSデザイナーで「Unwind Segue」を使う方法を説明する。
