Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Xamarin.forms navigation overview

1.453 Aufrufe

Veröffentlicht am

Xamarin.forms navigation overview

Veröffentlicht in: Software
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ▲▲▲ https://tinyurl.com/rockhardxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ◆◆◆ https://tinyurl.com/rockhardxxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ★★★ http://ishbv.com/rockhardx/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Xamarin.forms navigation overview

  1. 1. Xamarin.Forms Navigation Overview Atsushi Nakamura Details of Navigation Stack of Xamarin.Forms and notes on creating Navigation Service.
  2. 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
  3. 3. Xamarin.Forms Navigation Overview Today’s Goal
  4. 4. 1. Xamarin.Formsにおける画面遷移(INavigation)の基本 2. 画面遷移サービスを構築する上で 1. 必要なものと 2. 実現アイディア Today’s Goal Xamarin.Forms Navigation Overview Slide 4
  5. 5. Xamarin.Forms Navigation Overview 画面遷移の基本
  6. 6. 画面遷移の基本 Pageと画面遷移Stack
  7. 7. Xamarin.FormsのPage Xamarin.Formsは標準で複数のPageを提供しています Content MasterDetail Navigation Tabbed Carousel Xamarin.Forms Navigation Overview Slide 7
  8. 8. Xamarin.Forms Navigation Overview Slide 8 Xamarin.Formsの画面遷移 Push Push Push Stack管理
  9. 9. Xamarin.Forms Navigation Overview Slide 9 Xamarin.Formsの画面遷移 PopPopPop Stack管理
  10. 10. 画面遷移の基本 2種類の画面遷移Stack
  11. 11. Xamarin.Forms Navigation Overview Slide 11 2種類の画面遷移Stack Modal Stack Navigation Stack Dependency Application NavigationPage Forward PushModalAsync PushAsync Back PopModalAsync PopAsync PopToRootAsync Navigation Barのボタン Swipe(iOSのみ?)
  12. 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. 13. Go Back Navigation Stack Modal Stack MainPage PopToRootAsync PopModalAsync PopAsync PopAsync PopModalAsync Xamarin.Forms Navigation Overview Slide 13
  14. 14. 画面遷移の基本 複合パターン
  15. 15. 複合パターン Navigation Stack MasterDetailPage MainPage Navigation Stack1NavigationPage Tab1 TabbedPage Detail ContentPage Master Navigation Stack2NavigationPage Tab2 Out of Stack Xamarin.Forms Navigation Overview Slide 15
  16. 16. Xamarin.Forms Navigation Overview 画面遷移サービスの構築について
  17. 17. 1. 画面遷移機構 1. Forward 2. Back 2. 遷移時のイベント通知機構 1. 進入時:新しい画面へ遷移してきたタイミング 2. 退出時:別の画面へ遷移するがStackに残るタイミング 3. 破棄時:Back処理などでStackから破棄されるタイミング 今回は後者についてお話します。 最低限必要な要素 Xamarin.Forms Navigation Overview Slide 17
  18. 18. Xamarin.Forms Navigation Overview Slide 18 Forward時のイベント OnExit OnEntry イベント 説明 OnExit 画面遷移の際に、遷移前の画面が受け取るイベント いつか戻ってくる可能性を想定する OnEntry 画面遷移の際に、その画面を表示した後に発生するイベント
  19. 19. Xamarin.Forms Navigation Overview Slide 19 Back時のイベント OnEntry OnDestroy イベント 説明 破棄イベント Stackから破棄する際に派生するイベント リソース解放などにつかう 入場イベント 画面遷移の際に、その画面を表示した後に発生するイベント
  20. 20. 今回の例では次のインターフェースで通知を受信する前提でお話しします。 public interface INavigatable { // 退出時イベント void OnExit(); // 進入時イベント void OnEntry(); // 破棄時イベント void OnDestroy(); } イベント通知インターフェース Xamarin.Forms Navigation Overview Slide 20
  21. 21. 画面遷移サービスの構築について Dangerous Practice
  22. 22. 画面遷移のイベントを取りたいなと思ったとき、真っ先に思いつくものがあ りますよね? • Page#Appearingイベント • Page#Disappearingイベント しかしいくつかの理由で、遷移イベントとしては不適切な場合があります。 • 退出と破棄すべきタイミングの違いを区別できない • PopToRootAsyncやPopModalAsyncに対応できない • SleepやResume時にも発生する • プラットフォームによって挙動が違ったりしたことがある Dangerous Practice Xamarin.Forms Navigation Overview Slide 22
  23. 23. 画面遷移サービスの構築について 遷移時のイベント通知機構:Forward
  24. 24. Xamarin.Forms Navigation Overview Slide 24 遷移時のイベント通知機構:Forward PushAsync PushModalAsync ForwardはINavigationのメソッドを呼び出すしかない。 したがってイベントはユーザー側でコントロールが容易であるため好き に作ってください。 OnExit OnEntry
  25. 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(); }
  26. 26. 画面遷移サービスの構築について 遷移時のイベント通知機構:Back
  27. 27. 遷移時のイベント通知機構:Back OnEntry OnDestroy Backは色々つらい… Xamarin.Forms Navigation Overview Slide 27
  28. 28. Xamarin.Forms Navigation Overview Slide 28 2種類の画面遷移Stack Modal Stack Navigation Stack Dependency Application NavigationPage Forward PushModalAsync PushAsync Back PopModalAsync PopAsync PopToRootAsync Navigation Barのボタン Swipe(iOSのみ?) 対応は容易 Pushと同様に対応可能 ここでは説明は割愛 こっちは色々面倒
  29. 29. 画面遷移サービスの構築について 面倒な理由その①
  30. 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. 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. 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. 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. 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; } }
  35. 35. 画面遷移サービスの構築について 面倒な理由その②
  36. 36. Xamarin.Forms Navigation Overview Slide 36 2種類の画面遷移Stack Modal Stack Navigation Stack Dependency Application NavigationPage Forward PushModalAsync PushAsync Back PopModalAsync PopAsync PopToRootAsync Navigation Barのボタン Swipe(iOSのみ?)
  37. 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
  38. 38. 画面遷移サービスの構築について Navigation Page以外の画面について
  39. 39. No Page Event 1 MasterDetailPage 自力で入れ替えるので自力で頑張れ 2 TabbedPage CurrentPageChanged PagesChanged 3 CarouselPage 同上 Xamarin.Forms Navigation Overview Slide 39 Navigation Page以外の画面について
  40. 40. Xamarin.Forms Navigation Overview まとめ
  41. 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 まとめ
  42. 42. Thank You! Any Questions?

×