Xamarin.forms navigation overview

Editor's Notes

• #2: おつかれさまです！ニュイこと中村です。 皆さんもうお疲れでしょうけれど、もう少しお付き合いください。 さて本日ですが Xamarin.Forms Navigation Overview という表題で発表させていただきます。
• #3: 今回、時間が本気で足りないので自己紹介は割愛します。
• #4: さて、今日の内容ですが
• #5: 主にこの二つについてお話したいと思います。 ひとつはXamarin.Formsの画面遷移について基本を０からおさらいを。 そしてもう一つは、アプリケーションを開発する際に 画面遷移サービスを構築するために 必要な機構と、その実現のアイディアをお話しします。
• #6: それでは具体的な話に入りましょう。
• #7: まずは画面遷移の最も基本的なところから おさらいしたいと思います。
• #8: 皆さんもご存知の通り、Formsは多数のPageを、提供しています。
• #9: Formsでは、 これらのPageをPush＞Push＞Pushとすることで、画面遷移を実現します。 この時、Pushした画面はStack上で管理されています。
• #10: このため、逆にPOP＞POP＞POPとすることで、画面を戻ることができます。
• #11: さて、このStackですが2種類あります。
• #12: Modal StackとNavigation Stackです。 それぞれのStackごとに、個別のPushとPopのメソッドがあります。 Stackは、いずれか選んで利用するというわけではなく 組み合わせて利用する事もできます。 そうすることで、自由な画面遷移を実現することができます。 具体的に例を見ていきましょう。
• #13: ここではNavigationPageとContentPageのみを利用します。 まずNavigationPageをMainPageに設定します。 するとModal StackとNavigation Stackがひとつづつ作成されます。 MainPageはModalStackに含まれていないのがポイントです。 ここでPushAsyncをよびだすと、NavigationStackにPageが追加され 表示上もその画面に遷移します。 さらにPushAsyncをよぶと、三番目のPageに遷移しますね。 ここでPushModalAsyncを呼び出してみましょう。 するとModalStack上に NavigationPageが設定され、新しいNavigation Stackがもう一つ増えます。 つまり、 Navigation StackはNavigationPageと １：１で存在し、NavigationPageが増えればその分増えます。 それに対してModalStackはシステムに１つのみ存在することになります。 これらを組み合わせて比較的自由な画面遷移が構築できます。
• #14: 続いて戻るケースです。 この状態で PopAsyncを呼ぶと、NavigationStackからページが一つ削除され、まえのページに戻ります。 さらにPopModalAsyncを呼ぶと、ModalStackからNavigationPageと そのPageが管理しているNavigationStackも削除されます。 結果、2番目のNavigationStackの最後のページが表示された状態となります。 それでは、この状態でPopModalAsyncを呼び出したらどうなるでしょう？ そうです。ModalStackからNavigationPageが削除され、紐づくNavigationStackも削除されます。 結果、ひとつめのNavigationStackの最後のページが表示されます。 ウィザード形式の画面構成で、処理を途中で中断するような場合に使えるかもしれません。 さて、最後にPopToRootAsyncも紹介ししておきましょう。 PopToRootAsyncこれを呼び出すと、 NavigationStackの最初のページまで巻き戻されます。
• #15: さて、これでModalStackとNavigationStackの概要について 大まかなところは説明できたと思います。 といっても、利用した画面はNavigationPageとContentPageだけです。 次はそれ以外のPageを交えた複合パターンについてお話ししたいと思います。
• #16: ここではApplicationのMainPageにMasterDetailPageを設定する事を想定します。 MasterDetailPageのMasterつまりメニュー側に ContentPage を Detail側つまりメインコンテンツ側に TabbedPage を設定します。 TabbedPageには二つTabを設定し、それぞれに NavigationPageを設定したとしましょう。 そうした場合、このように、NavigationPageごとに独立したNavigationStackが構成されます。 もちろん独立して問題なく遷移管理できます。 ちなみに、NavigationStack以外のこの部分は、 ModalStackにも、NavigationStackにも含まれない Stack管理外の領域になります。
• #17: さて、これを踏まえて、 アプリケーションを構築するにあたって 画面遷移サービスってどう作ったらいいの？ というお話ししたいと思います。
• #18: 画面遷移サービスを構築する際、特に重要な要素が二つあると私は考えています。 ひとつは、画面を実際に遷移させる機構です。 そしてもうひとつは、画面遷移のイベント通知機構です。 前者は、ViewModelからどうViewを操作するかが議論の焦点となりそうです。 が、ちょっと最近MVVMなマサカリの直撃をうけたばかりなので、今回はこちらの議論は控えたいと思います。 こう見えてまだ傷が癒えていないんです。 今回は後者、画面遷移のイベントをどう管理・通知するかについて 考えたことをお話ししたいと思います。
• #19: というわけで具体的な実現方法をお話しする前に 実現する画面遷移サービスのイメージについてお話します。 まずは前に画面遷移する際です。 画面遷移するときに、画面から退出するイベントをOnExitと つぎの画面に入場するイベントをOnEntryを呼び出すこととします。
• #20: 逆に戻る際。 戻る時、POPされて破棄されるPageにはOnDestroyを 戻った先のPageにはOnEntryを通知することとします。 Forward時もBack時も入場のイベントがOnEntryになっています。 勿論分けても良いのですが、分ける意味があるケースは少ないと思いますので 今回は一緒にしておきます。
• #21: そして、画面遷移するさいに、遷移イベントの通知を受けたい場合は こんなようなインターフェースを実装して必要な処理を行う事にしましょう。
• #22: さて、画面遷移のイベント処理を実装するにあたり 最初にちょっと個人的に怖いと思っている方法についてお話ししておきます。
• #23: それはPageのAppearingやDisappearingイベントです。 私も最初はそれで利用しようとしたことがあるのですが 後々いくつかの問題が発生しました。 Forwardして後から戻ってくる前提の退出と、POPされて破棄されるケースの区別ができない PopToRootAsyncやPopModalAsyncなど、複数ページ処理時に対象ページが分かりにくい SleepやResume時にもイベントが発生してしまい、ふるまいを分けにくい プラットフォームによって挙動が異なる というわけで、今回はこれらは封印する方向でいきます。
• #24: ではForward時から行きましょう
• #25: ForwardはINavigationのメソッドを呼び出さない限り行えません。 したがって、それらのメソッドをラップしてイベントを発生させてあげれば良いのでらくちんです。
• #26: こんなかんじでしょうか？簡単でが、いくつか疑問に思われるところもあるかと思います。 ひとつは、遷移先の画面のOnEntryが遷移元のOnExitよりも先に呼ばれている点です。 OnEntryでは画面の初期描画処理を行います。 このため、Pushよりも先に実行しないと、画面を構築してるふるまいが利用者の目に映ってしまいます。 同様にOnExitでは描画リソースの開放処理を行います。 なのでPushした後に行わないと、画面の崩壊が利用者に見えてしまいます。 このため、こういう処理順が一般的には好ましいと考えています。
• #27: つづいてBack処理です。
• #28: バックは辛いです・・・
• #29: 先ほど見ていただいた、この表のうち PopModalAsyncは対応は容易です。Pushと同様にメソッドをラップして好きに処理してください。 問題はこっち。NavigationPageの戻る処理です。 辛い理由は大きく二つに分けることができます。
• #30: 面倒な理由その①
• #31: まずそもそも、直前のページに戻る手段が3種類あります。 しかもこのうち、PopAsync以外は、ユーザー操作に基づいて、Formsが勝手に処理してくれてしまいます。 なので、メソッドをラップする方法を使えません。 どうしましょう？ ってことで、最も簡便なのはNavigationPageのPoppedイベントを利用することです。 ここではPoppedイベントを利用する方法を紹介しましょう。
• #32: まずはNavigationPageをカスタマイズして、Poppedイベントを購読します。 Poppedが発生したら、NavigationPageのCurrentPageにOnEntryを通知し 破棄されるページにOnDestroyを通知してあげます。 さて、実は一つ問題があります。 というのは、Poppedイベント発生した時点で戻る画面遷移が完了しているということです。 つまり画面表示の後にOnEntryが呼び出されるということです。 これはけっこう根深い問題で、実はXamarinのバグジラにこれをスマートに解決する方法を提供してほしい という要望が半年から1年くらいほど前に挙げられているんですが対処されていません。 これは特に、Swipeの扱いが難しい点に理由あるのだと考えています。 Swipeの場合、戻ろうかな～やっぱや～めたみたいなことができてしまうので考えただけでつらいですよね。
• #33: とりあえず今回はこの辺で妥協しておきます。 突っ込んだ話がしたい人は良かったらこの後にでも捕まえてください。 さて、単一のアプリを作るだけならこれで良いのですが この方法は再利用性がないです。 NavigationPageの数だけ同じ実装が必要になります。 そこで、Prismで利用されている非常に面白い、私は感動したんですが そのアイディアをここで紹介したいと思います。
• #34: まずは先ほどの処理をすべてBehaviorに切り出します。 こんな感じでしょうか。 ページの都合上、デタッチを書いていませんが、実際に作る時は当然デタッチの実装を忘れないようにしてください。 メモリリークしちゃいますので。 そしてBehaviorをNavigationPageにAttachしてBack処理機構を実行します。 ここは普通ですね。 面白いのはこれを設定する方法です。
• #35: どこで設定するかと言うと、画面遷移サービスです。 画面遷移するときに、遷移先の画面のベースクラスを判定して、 Behaviorをインジェクションしています。 このデザインパターンは非常に再利用性高いと思います。 凄くないですか？感動しませんか？あんまりして無いみたいですね？ ごめんなさい。
• #36: 仕方ないので、次へ行きましょう。 面倒な点その②です
• #37: PopToRootAsyncです。 PopToRoodAsyncを実行すると、複数のPageがまとめてPOPされる可能性があります。 このメソッド、先ほどのPoppedイベントに該当する、PoppedToRootイベントがあるんですが 大変遺憾なことに、何がPopされたのか通知されてきません。 ただ、PoppedToRootAsyncも、メソッド呼び出しでしか実行できませんので ラップメソッドで実現してあげればよいと思います。
• #38: こんな感じです。 ポイントは幾つかあります。 あとあと、POPされた全てのページのOnDestroyを呼び出してあげたいんですが PopToRootAsyncを呼び出すと、そのタイミングでNavigationStackが全てクリアされてしまいます。 なので、最初にStackをコピーしておいてあげます。 あとこのまま全部Destroyすると、表示中の先頭画面もDestroyしてしまいますので 先頭は対象から除去しておきましょう。 これで完成です。
• #39: これで、Stackに関係する画面遷移イベントは大体実現できました。 ただ、Stackに関係ないページについてお話できていません。
• #40: これら3種類のページですね。これらについては、かいつまんでエッセンスだけ紹介したいと思います。 MasterDetailに関しては、MasterとDetailのプロパティをC#のコードから入れ替える時に良しなに計らいましょう。 TabbedPageやCarouselPageは、これらのイベントと 先ほどのBehaviorをインジェクションするパターンを組み合わせると対処できます。 ちょっと注意してほしい点が一つあります。 これらのページは、子ページを直接XAML上に掛く方法と C#から設定する２つの方法があります。 どちらでも正しく動作するよう注意しましょう。
• #41: という訳で、今日お話ししたい事は以上になります。 最後に振り返って、簡単にまとめます。
• #42: Xamarin.Formsの画面遷移はPageとStackの組み合わせ StackはModal StackとNavigation Stackの2種類が存在する Modal Stackはアプリケーションにひとつ Navigation StackはNavigationPageごとにひとつ Stackに所属しないPageも存在する（結構いっぱい） 画面遷移イベントをAppearingとDisappearingで扱う場合は要注意 PushAsync、PushModalAsync、PopModalAsync、PopToRootAsyncは、共通メソッドを作ってイベントを自前発行すると良いかも NavigationPageの前画面へ戻るはPoppedイベントを使おう Behaviorをインジェクションするパターンって最高だよね！