Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Xamarin逆引きTips

Xamarin逆引きTips

Xamarin.iOSで画面遷移を行うには?(Storyboard使用)

2014年8月6日

Xamarin.iOSでのStoryboardによる画面遷移を、Xamarin StudioのiOSデザイナーを使用して行う方法を解説。また、コードで画面遷移を実装する方法も説明する。

奥山 裕紳(@amay077
  • このエントリーをはてなブックマークに追加

 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」を設定している)。

図1 Xamarin StudioのiOSデザイナー

 次に、Toolboxから「Navigation Controller」をドラッグ&ドロップし、図2のように配置する。

図2 Navigation Controllerの配置

 次に、Navigation Controllerの下部を選択して、プロパティの[Is Initial View Controller]にチェックを入れる。これで最初(緑)のViewControllerについていた矢印が、Navigation Controllerへ移動するはずだ。

図3 初期ViewControllerの設定

 続いて、中央(白)のViewControllerに、ToolBoxから「Button」をドラッグ&ドロップして適当な位置へ配置する。そのボタンをControlキーを押しながら、右(緑)のViewControllerへドラッグ&ドロップする。すると「Action Segue」を選択するポップアップが表示されるので[Push]を選択する(図4)。

図4 ボタンの追加

 すると2つのViewController間に「セグエ(Segue)」と呼ばれる線が作成されるので、それをクリックして選択し、プロパティから[Identifier]に「goto_green」と入力する(図5)。このIdentifierは、後に複数のViewControllerへ遷移する際の識別子となるものだ。

図5 Segue identifierの設定

 ここまでのプログラムを実行すると、図6のようになる。

図6 単純な画面遷移の例

 ボタンなどのコントロールにセグエを関連付けることで、コードを書くことなく画面遷移が行える。最も単純な画面遷移の手法だ。

2. コードによる画面遷移を行う

 次に、コードで画面遷移を行う方法を解説する。

 まず、図7のように、iOSデザイナーでToolboxから「ViewController」をドラッグ&ドロップで配置する。ここでも識別のため、背景色を青に変更している(=Viewを選択した状態で、[Background]プロパティに「Cyan」を設定している)。

図7 新しいViewControllerの追加

 次にセグエの作成を行うが、今回は中央(白)のViewControllerの下部を選択して、Controlキーを押しながらドラッグを開始する。ドロップ先は右下(青)のViewControllerだ。「Action Segue」は先ほどと同様に[Push]を選択する(図8)。

図8 新しいViewControllerの追加

 先ほどと同様に、セグエの[Identifier]を設定する。ここでは「goto_blue」とする。

図9 新しいViewControllerの追加

 続いて、中央(白)のViewControllerを選択した状態で、プロパティの[Class]に「FirstViewController」と入力する(図10)。するとプロジェクトにFirstViewController.csファイル(と、FirstViewController.designer.csファイル)が作成される。

図10 新しいViewControllerの追加

 さらにFirstViewControllerに、図11のように「Switch」「Label」「Button」を配置する。Buttonコントロール(=[Goto Next]ボタン)を選択し、プロパティの[Name]に「buttonGotoNext」と設定する。Switchコントロールも同様に[Name]に「switchView」と設定する。

図11 Outletの設定

 ここでFirstViewControllerの[Goto Next]ボタンをダブルクリックすると、クリックイベントハンドラーが自動的にFirstViewController.csファイルに挿入される(図12)。いわゆるVisual Studioライクな機能だ。もちろんこの機能に頼らずに自分でbuttonGotoNext.TouchUpInside += (sender, e)……と記述してもよい。

図12 イベントハンドラーの自動生成

 この自動生成されたイベントハンドラーに、画面遷移のコードを以下のように記述する。

C#
……省略……
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に遷移している。

 ここまでのプログラムを実行すると、以下の画面のようになる。

図13 イベントハンドラーの自動生成

まとめ

 Xamarin.iOSでのStoryboardによる画面遷移を、Xamarin StudioのiOSデザイナーを使用して行う方法を解説した。Xcodeに慣れている人は、ソリューション上のMainStoryboard.storyboardファイルをマウスで右クリックして、Xcode Interface Builderを利用することも可能だ。

 次回以降は、画面遷移時にデータを渡す方法や、画面を戻る際のセグエ(Unwind Segue)などについて解説していく予定だ。

※以下では、本稿の前後を合わせて5回分(第12回~第16回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

Xamarin逆引きTips
12. Xamarin.Formsの既存のコントロールを拡張するには?

Xamarin.Formsのコントロールにはプラットフォーム共通の基本的な機能しか含まれていない。既存のコントロールを拡張して、ネイティブ側で機能を追加する方法を解説。

Xamarin逆引きTips
13. Xamarin.Formsで新しいコントロールを作成するには?

Xamarin.Formsでは、既存のコントロールを拡張できるだけでなく、全く新しいコントロールを作成することもできる。その内部には、iOS/Androidで違うコントロールを含めたりできる。その作成方法を解説。

Xamarin逆引きTips
14. 【現在、表示中】≫ Xamarin.iOSで画面遷移を行うには?(Storyboard使用)

Xamarin.iOSでのStoryboardによる画面遷移を、Xamarin StudioのiOSデザイナーを使用して行う方法を解説。また、コードで画面遷移を実装する方法も説明する。

Xamarin逆引きTips
15. Xamarin.iOSで画面遷移先にデータを渡すには?(Storyboard使用)

Xamarin.iOSでStoryboardにより画面遷移を行う際に、遷移元から遷移先にデータを渡す方法を解説する。

Xamarin逆引きTips
16. Xamarin.iOSでの画面遷移で「戻る」を実現するには?(Storyboard、Unwind Segue使用)

画面遷移で戻る処理を実装する方法として、Xamarin StudioのiOSデザイナーで「Unwind Segue」を使う方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!