Xamarin逆引きTips

Xamarin逆引きTips

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

2014年8月27日

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

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

 Xamarin.iOSでは、「Unwind Segue」という機能で「画面を戻る」ときの処理をカスタマイズできる。今回は、この方法について解説する。

 今回も、「Tips:Xamarin.iOSで画面遷移先にデータを渡すには?(Storyboard使用)」の続きとして解説するので、プロジェクトの準備は前回を参照してほしい。

1. 画面を準備する

 前回終了時点で、MainStoryboard.storyboardファイルを開くと、以下の画面のようになっているはずだ。

図1 前回終了時点のStoryboard

 図2に示すように、ViewControllerを新たに追加し、背景色を黄色とする。また、青のViewControllerにボタン「Goto Yellow」を配置し、Controlキーを押しながら黄色のViewControllerにドラッグ&ドロップし、画面遷移(=[Push]のセグエ)を作る。

図2 黄色のViewControllerを追加したStoryboard

2. 任意のViewControllerへ「戻る」処理を実装する

 黄色のViewControllerから、白のFirstViewControllerへ戻る処理を実装する。

 まず、FirstViewController.csファイルを開いて、「画面遷移で戻ってきた際に呼ばれるメソッド」を以下のように実装する。

C#
partial class FirstViewController : UIViewController
{
  ……省略……

  [Action ("BackToWhiteViewController:")]
  public void BackToWhiteViewController(UIStoryboardSegue segue)
  {
  }
}
画面遷移で戻ってきた際に呼ばれるメソッド(FirstViewController.cs)

 UIStoryboardSegueオブジェクトを引数とするメソッドを定義し、[Action]属性を付与する。今は、戻ってきた際に行う処理は何も無いので実装はない。

 次に、MainStoryboard.storyboardファイルを開き、黄色のViewControllerにボタンを追加し、[Title]を「Back to White」とする。そしてボタンを、Controlキーを押しながら、ViewControllerの下部にある[Scene Exit]アイコンにドラッグ&ドロップする。するとAction Segueを選択するポップアップが表示され、先ほど追加したBackToWhiteViewControllerが現れるので、それを選択する。こうして作成したものが「Unwind Segue」だ。「Scene Exit」を選択すると、プロパティウィンドウに作成したUnwind Segueが表示される。

図3 黄色から白への戻りを定義したStoryboard

 この操作により、「[Back To White]ボタンを押すと、白のViewControllerへ戻る」という処理が定義される。

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

図4 プログラムの実行結果(黄色から白へ戻る)

3. 「戻る」際にデータを渡す

 表示した画面で入力したデータを呼び出し元で使用したいときも、Unwind Segueを使用する。

 例として、黄色のViewControllerで入力した文字列を、白のViewControllerに表示する実装を行う。

 まず、黄色のViewControllerにテキストフィールドを配置し、[Name]を「textCity」とする。同時に、ViewControllerの[Class]を「FourthViewController」とする。

図5 黄色のViewControllerにテキストフィールドを配置したStoryboard

 FourthViewController.csファイルが作成されているので、それを開いて、以下のように実装する。

C#
partial class FourthViewController : UIViewController
{
  public FourthViewController (IntPtr handle) : base (handle)
  {
  }

  public string City //<--1
  {
    get;
    private set;
  }

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

    textCity.EditingChanged += (sender, e) => 
      this.City = textCity.Text; //<--2
  }
}
データを渡す側のViewController(FourthViewController.cs)

 Cityプロパティを用意する(1)。このプロパティは、戻ったViewControllerからデータを取得するためのものだ。そして、テキストフィールドの編集終了時に、このプロパティを更新する(2)。

 次に、白のFirstViewController.csファイルを以下のように修正する。

C#
partial class FirstViewController : UIViewController
{
  ……省略……

  [Action ("BackToWhiteViewController:")]
  public void BackToWhiteViewController(UIStoryboardSegue segue)
  {
    var vc = segue.SourceViewController as FourthViewController; //<--1
    if (vc != null)
    {
      textCountry.Text = vc.City;
    }
  }
}
データを受け取る側のViewController(FirstViewController.cs)

textCountryは、前回作成したテキストフィールド。

 黄色のViewControllerから戻った際のBackToWhiteViewControllerで、引数であるsegueオブジェクトのSourceViewControllerプロパティから、戻り元のFourthViewControllerが取り出せるので、Cityプロパティからデータを取り出している(1)。

4. プログラムを実行する

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

図6 プログラムの実行結果

 黄色のViewControllerで文字列を入力して白のViewControllerに戻ると、入力した値が表示される。

まとめ

 前々回前回、そして今回とXamarin StudioのiOSデザイナーを利用した画面遷移の方法を解説した。iOSデザイナーは非常に強力で、XcodeのInterface Builderで行えるほとんどのことには対応しており、中には本家より使いやすい機能もある。

 まだ一部、iOSデザイナーが対応していない機能もあるが、そのような機能を使いたい場合はXcodeのInterface Builderを使えばよい。これは、.storyboardファイルをマウスで右クリックして[Xcode Interface Builder]を選択することで使用できる。Xcodeで行った変更は、すぐにXamarin Studioにも反映されるので、両者を切り替えながら作業できる。Xcodeを利用した画面の作成については、「Tips:Xamarin.iOSで画面をレイアウトするには?(Xcode利用/ビルトインiOS用UIデザイナー)」を参照してほしい。

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

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」を使う方法を説明する。

17. Xamarin.iOSで地図を表示するには?(MapKit使用)

Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って地図を表示する方法を解説。また、地図の種類の変更、ジェスチャの有効/無効の切り替えなども説明する。

18. Xamarin.iOSで地図に図形を表示するには?(MapKit使用)

Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って、ライン、ポリゴン、円などの図形を地図上に表示する方法を解説する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社