Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Xamarin.forms navigation overview
Semelhante a Xamarin.forms navigation overview (20)
Mais de Atsushi Nakamura
Mais de Atsushi Nakamura (19)
Xamarin.forms navigation overview
- 1. Xamarin.Forms Navigation Overview Atsushi Nakamura Details of Navigation Stack of Xamarin.Forms and notes on creating Navigation Service.
- 2. About Me 中村 充志 / Atsushi Nakamura • Enterprise系アプリケーションアーキテクト • 仕事でXamarinしたいけどXamarinできない人 • Prism好きだけど今日はPrism話さない人 • Blog http://www.nuits.jp • Blog https://blog.nuits.jp • Twitter @nuits_jp • Company RICOH JAPAN Corp Xamarin.Forms Navigation Overview Slide 2
- 4. 1. Xamarin.Formsにおける画面遷移（INavigation）の基本 2. 画面遷移サービスを構築する上で 1. 必要なものと 2. 実現アイディア Today’s Goal Xamarin.Forms Navigation Overview Slide 4
- 7. Xamarin.FormsのPage Xamarin.Formsは標準で複数のPageを提供しています Content MasterDetail Navigation Tabbed Carousel Xamarin.Forms Navigation Overview Slide 7
- 8. Xamarin.Forms Navigation Overview Slide 8 Xamarin.Formsの画面遷移 Push Push Push Stack管理
- 9. Xamarin.Forms Navigation Overview Slide 9 Xamarin.Formsの画面遷移 PopPopPop Stack管理
- 11. Xamarin.Forms Navigation Overview Slide 11 ２種類の画面遷移Stack Modal Stack Navigation Stack Dependency Application NavigationPage Forward PushModalAsync PushAsync Back PopModalAsync PopAsync PopToRootAsync Navigation Barのボタン Swipe（iOSのみ?）
- 12. Forward Navigation Stack Modal Stack MainPage MainPage = new NavigationPage( new ContentPage); PushAsync PushAsync PushModalAsync PushModalAsync PushAsync PushAsync PushAsync PushAsync Xamarin.Forms Navigation Overview Slide 12
- 13. Go Back Navigation Stack Modal Stack MainPage PopToRootAsync PopModalAsync PopAsync PopAsync PopModalAsync Xamarin.Forms Navigation Overview Slide 13
- 14. 画面遷移の基本 複合パターン
- 15. 複合パターン Navigation Stack MasterDetailPage MainPage Navigation Stack1NavigationPage Tab1 TabbedPage Detail ContentPage Master Navigation Stack2NavigationPage Tab2 Out of Stack Xamarin.Forms Navigation Overview Slide 15
- 17. 1. 画面遷移機構 1. Forward 2. Back 2. 遷移時のイベント通知機構 1. 進入時：新しい画面へ遷移してきたタイミング 2. 退出時：別の画面へ遷移するがStackに残るタイミング 3. 破棄時：Back処理などでStackから破棄されるタイミング 今回は後者についてお話します。 最低限必要な要素 Xamarin.Forms Navigation Overview Slide 17
- 18. Xamarin.Forms Navigation Overview Slide 18 Forward時のイベント OnExit OnEntry イベント 説明 OnExit 画面遷移の際に、遷移前の画面が受け取るイベント いつか戻ってくる可能性を想定する OnEntry 画面遷移の際に、その画面を表示した後に発生するイベント
- 19. Xamarin.Forms Navigation Overview Slide 19 Back時のイベント OnEntry OnDestroy イベント 説明 破棄イベント Stackから破棄する際に派生するイベント リソース解放などにつかう 入場イベント 画面遷移の際に、その画面を表示した後に発生するイベント
- 20. 今回の例では次のインターフェースで通知を受信する前提でお話しします。 public interface INavigatable { // 退出時イベント void OnExit(); // 進入時イベント void OnEntry(); // 破棄時イベント void OnDestroy(); } イベント通知インターフェース Xamarin.Forms Navigation Overview Slide 20
- 22. 画面遷移のイベントを取りたいなと思ったとき、真っ先に思いつくものがあ りますよね？ • Page#Appearingイベント • Page#Disappearingイベント しかしいくつかの理由で、遷移イベントとしては不適切な場合があります。 • 退出と破棄すべきタイミングの違いを区別できない • PopToRootAsyncやPopModalAsyncに対応できない • SleepやResume時にも発生する • プラットフォームによって挙動が違ったりしたことがある Dangerous Practice Xamarin.Forms Navigation Overview Slide 22
- 24. Xamarin.Forms Navigation Overview Slide 24 遷移時のイベント通知機構：Forward PushAsync PushModalAsync ForwardはINavigationのメソッドを呼び出すしかない。 したがってイベントはユーザー側でコントロールが容易であるため好き に作ってください。 OnExit OnEntry
- 25. Xamarin.Forms Navigation Overview Slide 25 Forwardサンプル 次のような共通メソッドを作ってもいいかもしれません。（Prism使え？聞こえんな？） public static async Task PushModalAsync(Page from, Page to) { (to as INavigatable)?.OnEntry(); await from.Navigation.PushModalAsync(to); (from as INavigatable)?.OnExit(); }
- 27. 遷移時のイベント通知機構：Back OnEntry OnDestroy Backは色々つらい… Xamarin.Forms Navigation Overview Slide 27
- 28. Xamarin.Forms Navigation Overview Slide 28 ２種類の画面遷移Stack Modal Stack Navigation Stack Dependency Application NavigationPage Forward PushModalAsync PushAsync Back PopModalAsync PopAsync PopToRootAsync Navigation Barのボタン Swipe（iOSのみ?） 対応は容易 Pushと同様に対応可能 ここでは説明は割愛 こっちは色々面倒
- 30. Xamarin.Forms Navigation Overview Slide 30 面倒な理由その① Modal Stack Navigation Stack Dependency Application NavigationPage Forward PushModalAsync PushAsync Back PopModalAsync PopAsync PopToRootAsync Navigation Barのボタン Swipe（iOSのみ?）
- 31. Xamarin.Forms Navigation Overview Slide 31 直前ページへ戻る際のサンプル② NavigationPageでPoppedイベントをフックしましょう。 public MyNavigationPage() { Popped += OnPopped; } private void OnPopped(object sender, NavigationEventArgs args) { (CurrentPage as INavigatable)?.OnEntry(); (args.Page as INavigatable)?.OnDestroy(); } NavigationEventArgsのPageプロパティにはPopされたPageが設定されます。
- 32. Xamarin.Forms Navigation Overview Slide 32 直前ページへ戻る際のサンプル② NavigationPageでPoppedイベントをフックしましょう。 public MyNavigationPage() { Popped += OnPopped; } private void OnPopped(object sender, NavigationEventArgs args) { (CurrentPage as INavigatable)?.OnEntry(); (args.Page as INavigatable)?.OnDestroy(); } NavigationEventArgsのPageプロパティにはPopされたPageが設定されます。
- 33. Xamarin.Forms Navigation Overview Slide 33 直前ページへ戻る際のサンプル改良案① public class NavigationBehavior : Behavior<NavigationPage> { private NavigationPage _navigationPage; protected override void OnAttachedTo(NavigationPage navigationPage) { base.OnAttachedTo(navigationPage); _navigationPage = navigationPage; _navigationPage.Popped += OnPopped; } private void OnPopped(object sender, NavigationEventArgs args) { (_navigationPage.CurrentPage as INavigatable)?.OnEntry(); (args.Page as INavigatable)?.OnDestroy(); } }
- 34. Xamarin.Forms Navigation Overview Slide 34 直前ページへ戻る際のサンプル改良案② public static async Task PushModalAsync(Page from, Page to) { await from.Navigation.PushModalAsync(to); (to as INavigatable)?.OnEntry(); (from as INavigatable)?.OnExit(); switch (to) { case NavigationPage navigationPage: navigationPage.Behaviors.Add(new NavigationBehavior()); break; } }
- 36. Xamarin.Forms Navigation Overview Slide 36 ２種類の画面遷移Stack Modal Stack Navigation Stack Dependency Application NavigationPage Forward PushModalAsync PushAsync Back PopModalAsync PopAsync PopToRootAsync Navigation Barのボタン Swipe（iOSのみ?）
- 37. public static async Task PopToRootAsync(Page from) { var pages = from.Navigation.NavigationStack.ToList(); (navigationPage?.CurrentPage as INavigatable)?.OnEntry(); await from.Navigation.PopToRootAsync(); pages.RemoveAt(0); pages.Reverse(); foreach (var page in pages) { (page as INavigatable)?.OnDestroy(); } } 面倒な理由その② 解決案 Xamarin.Forms Navigation Overview Slide 37
- 39. No Page Event 1 MasterDetailPage 自力で入れ替えるので自力で頑張れ 2 TabbedPage CurrentPageChanged PagesChanged 3 CarouselPage 同上 Xamarin.Forms Navigation Overview Slide 39 Navigation Page以外の画面について
- 41. 1. Xamarin.Formsの画面遷移はPageとStackの組み合わせ 2. StackはModal StackとNavigation Stackの2種類が存在する 3. Modal Stackはアプリケーションにひとつ 4. Navigation StackはNavigationPageごとにひとつ 5. Stackに所属しないPageも存在する（結構いっぱい） 6. 画面遷移イベントをAppearingとDisappearingで扱う場合は要注意 7. PushAsync、PushModalAsync、PopModalAsync、PopToRootAsyncは、共 通メソッドを作ってイベントを自前発行すると良いかも 8. NavigationPageの前画面へ戻るはPoppedイベントを使おう 9. Behaviorをインジェクションするパターンって最高にCoolじゃない？ Xamarin.Forms Navigation Overview Slide 41 まとめ
Notas do Editor
- おつかれさまです！ニュイこと中村です。 皆さんもうお疲れでしょうけれど、もう少しお付き合いください。 さて本日ですが Xamarin.Forms Navigation Overview という表題で発表させていただきます。
- 今回、時間が本気で足りないので自己紹介は割愛します。
- さて、今日の内容ですが
- 主にこの二つについてお話したいと思います。 ひとつはXamarin.Formsの画面遷移について基本を０からおさらいを。 そしてもう一つは、アプリケーションを開発する際に 画面遷移サービスを構築するために 必要な機構と、その実現のアイディアをお話しします。
- それでは具体的な話に入りましょう。
- まずは画面遷移の最も基本的なところから おさらいしたいと思います。
- 皆さんもご存知の通り、Formsは多数のPageを、提供しています。
- Formsでは、 これらのPageをPush＞Push＞Pushとすることで、画面遷移を実現します。 この時、Pushした画面はStack上で管理されています。
- このため、逆にPOP＞POP＞POPとすることで、画面を戻ることができます。
- さて、このStackですが2種類あります。
- Modal StackとNavigation Stackです。 それぞれのStackごとに、個別のPushとPopのメソッドがあります。 Stackは、いずれか選んで利用するというわけではなく 組み合わせて利用する事もできます。 そうすることで、自由な画面遷移を実現することができます。 具体的に例を見ていきましょう。
- ここでは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はシステムに１つのみ存在することになります。 これらを組み合わせて比較的自由な画面遷移が構築できます。
- 続いて戻るケースです。 この状態で PopAsyncを呼ぶと、NavigationStackからページが一つ削除され、まえのページに戻ります。 さらにPopModalAsyncを呼ぶと、ModalStackからNavigationPageと そのPageが管理しているNavigationStackも削除されます。 結果、2番目のNavigationStackの最後のページが表示された状態となります。 それでは、この状態でPopModalAsyncを呼び出したらどうなるでしょう？ そうです。ModalStackからNavigationPageが削除され、紐づくNavigationStackも削除されます。 結果、ひとつめのNavigationStackの最後のページが表示されます。 ウィザード形式の画面構成で、処理を途中で中断するような場合に使えるかもしれません。 さて、最後にPopToRootAsyncも紹介ししておきましょう。 PopToRootAsyncこれを呼び出すと、 NavigationStackの最初のページまで巻き戻されます。
- さて、これでModalStackとNavigationStackの概要について 大まかなところは説明できたと思います。 といっても、利用した画面はNavigationPageとContentPageだけです。 次はそれ以外のPageを交えた複合パターンについてお話ししたいと思います。
- ここではApplicationのMainPageにMasterDetailPageを設定する事を想定します。 MasterDetailPageのMasterつまりメニュー側に ContentPage を Detail側つまりメインコンテンツ側に TabbedPage を設定します。 TabbedPageには二つTabを設定し、それぞれに NavigationPageを設定したとしましょう。 そうした場合、このように、NavigationPageごとに独立したNavigationStackが構成されます。 もちろん独立して問題なく遷移管理できます。 ちなみに、NavigationStack以外のこの部分は、 ModalStackにも、NavigationStackにも含まれない Stack管理外の領域になります。
- さて、これを踏まえて、 アプリケーションを構築するにあたって 画面遷移サービスってどう作ったらいいの？ というお話ししたいと思います。
- 画面遷移サービスを構築する際、特に重要な要素が二つあると私は考えています。 ひとつは、画面を実際に遷移させる機構です。 そしてもうひとつは、画面遷移のイベント通知機構です。 前者は、ViewModelからどうViewを操作するかが議論の焦点となりそうです。 が、ちょっと最近MVVMなマサカリの直撃をうけたばかりなので、今回はこちらの議論は控えたいと思います。 こう見えてまだ傷が癒えていないんです。 今回は後者、画面遷移のイベントをどう管理・通知するかについて 考えたことをお話ししたいと思います。
- というわけで具体的な実現方法をお話しする前に 実現する画面遷移サービスのイメージについてお話します。 まずは前に画面遷移する際です。 画面遷移するときに、画面から退出するイベントをOnExitと つぎの画面に入場するイベントをOnEntryを呼び出すこととします。
- 逆に戻る際。 戻る時、POPされて破棄されるPageにはOnDestroyを 戻った先のPageにはOnEntryを通知することとします。 Forward時もBack時も入場のイベントがOnEntryになっています。 勿論分けても良いのですが、分ける意味があるケースは少ないと思いますので 今回は一緒にしておきます。
- そして、画面遷移するさいに、遷移イベントの通知を受けたい場合は こんなようなインターフェースを実装して必要な処理を行う事にしましょう。
- さて、画面遷移のイベント処理を実装するにあたり 最初にちょっと個人的に怖いと思っている方法についてお話ししておきます。
- それはPageのAppearingやDisappearingイベントです。 私も最初はそれで利用しようとしたことがあるのですが 後々いくつかの問題が発生しました。 Forwardして後から戻ってくる前提の退出と、POPされて破棄されるケースの区別ができない PopToRootAsyncやPopModalAsyncなど、複数ページ処理時に対象ページが分かりにくい SleepやResume時にもイベントが発生してしまい、ふるまいを分けにくい プラットフォームによって挙動が異なる というわけで、今回はこれらは封印する方向でいきます。
- ではForward時から行きましょう
- ForwardはINavigationのメソッドを呼び出さない限り行えません。 したがって、それらのメソッドをラップしてイベントを発生させてあげれば良いのでらくちんです。
- こんなかんじでしょうか？簡単でが、いくつか疑問に思われるところもあるかと思います。 ひとつは、遷移先の画面のOnEntryが遷移元のOnExitよりも先に呼ばれている点です。 OnEntryでは画面の初期描画処理を行います。 このため、Pushよりも先に実行しないと、画面を構築してるふるまいが利用者の目に映ってしまいます。 同様にOnExitでは描画リソースの開放処理を行います。 なのでPushした後に行わないと、画面の崩壊が利用者に見えてしまいます。 このため、こういう処理順が一般的には好ましいと考えています。
- つづいてBack処理です。
- バックは辛いです・・・
- 先ほど見ていただいた、この表のうち PopModalAsyncは対応は容易です。Pushと同様にメソッドをラップして好きに処理してください。 問題はこっち。NavigationPageの戻る処理です。 辛い理由は大きく二つに分けることができます。
- 面倒な理由その①
- まずそもそも、直前のページに戻る手段が3種類あります。 しかもこのうち、PopAsync以外は、ユーザー操作に基づいて、Formsが勝手に処理してくれてしまいます。 なので、メソッドをラップする方法を使えません。 どうしましょう？ ってことで、最も簡便なのはNavigationPageのPoppedイベントを利用することです。 ここではPoppedイベントを利用する方法を紹介しましょう。
- まずはNavigationPageをカスタマイズして、Poppedイベントを購読します。 Poppedが発生したら、NavigationPageのCurrentPageにOnEntryを通知し 破棄されるページにOnDestroyを通知してあげます。 さて、実は一つ問題があります。 というのは、Poppedイベント発生した時点で戻る画面遷移が完了しているということです。 つまり画面表示の後にOnEntryが呼び出されるということです。 これはけっこう根深い問題で、実はXamarinのバグジラにこれをスマートに解決する方法を提供してほしい という要望が半年から1年くらいほど前に挙げられているんですが対処されていません。 これは特に、Swipeの扱いが難しい点に理由あるのだと考えています。 Swipeの場合、戻ろうかな～やっぱや～めたみたいなことができてしまうので考えただけでつらいですよね。
- とりあえず今回はこの辺で妥協しておきます。 突っ込んだ話がしたい人は良かったらこの後にでも捕まえてください。 さて、単一のアプリを作るだけならこれで良いのですが この方法は再利用性がないです。 NavigationPageの数だけ同じ実装が必要になります。 そこで、Prismで利用されている非常に面白い、私は感動したんですが そのアイディアをここで紹介したいと思います。
- まずは先ほどの処理をすべてBehaviorに切り出します。 こんな感じでしょうか。 ページの都合上、デタッチを書いていませんが、実際に作る時は当然デタッチの実装を忘れないようにしてください。 メモリリークしちゃいますので。 そしてBehaviorをNavigationPageにAttachしてBack処理機構を実行します。 ここは普通ですね。 面白いのはこれを設定する方法です。
- どこで設定するかと言うと、画面遷移サービスです。 画面遷移するときに、遷移先の画面のベースクラスを判定して、 Behaviorをインジェクションしています。 このデザインパターンは非常に再利用性高いと思います。 凄くないですか？感動しませんか？あんまりして無いみたいですね？ ごめんなさい。
- 仕方ないので、次へ行きましょう。 面倒な点その②です
- PopToRootAsyncです。 PopToRoodAsyncを実行すると、複数のPageがまとめてPOPされる可能性があります。 このメソッド、先ほどのPoppedイベントに該当する、PoppedToRootイベントがあるんですが 大変遺憾なことに、何がPopされたのか通知されてきません。 ただ、PoppedToRootAsyncも、メソッド呼び出しでしか実行できませんので ラップメソッドで実現してあげればよいと思います。
- こんな感じです。 ポイントは幾つかあります。 あとあと、POPされた全てのページのOnDestroyを呼び出してあげたいんですが PopToRootAsyncを呼び出すと、そのタイミングでNavigationStackが全てクリアされてしまいます。 なので、最初にStackをコピーしておいてあげます。 あとこのまま全部Destroyすると、表示中の先頭画面もDestroyしてしまいますので 先頭は対象から除去しておきましょう。 これで完成です。
- これで、Stackに関係する画面遷移イベントは大体実現できました。 ただ、Stackに関係ないページについてお話できていません。
- これら3種類のページですね。これらについては、かいつまんでエッセンスだけ紹介したいと思います。 MasterDetailに関しては、MasterとDetailのプロパティをC#のコードから入れ替える時に良しなに計らいましょう。 TabbedPageやCarouselPageは、これらのイベントと 先ほどのBehaviorをインジェクションするパターンを組み合わせると対処できます。 ちょっと注意してほしい点が一つあります。 これらのページは、子ページを直接XAML上に掛く方法と C#から設定する２つの方法があります。 どちらでも正しく動作するよう注意しましょう。
- という訳で、今日お話ししたい事は以上になります。 最後に振り返って、簡単にまとめます。
- 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をインジェクションするパターンって最高だよね！