(Xamarin.Forms)Modal Pages

(以前の記事)
Xamarin.Formsの画面遷移 - Makopy'5 La6

特に理解しておくべき画面遷移として、下記を挙げています。

• Hierarchical Navigation
• Modal Pages
• TabbedPage

前回はHierarchical Navigationにスポットを当てました。

makopy5la6.hatenadiary.jp

今回はModal Pagesにスポットを当ててみたいと思います。

---

Modal Pagesのポイント

やはり、ベーシックな知識は公式のDevelopersガイドから得るのが一番です。
Modal Pages - Xamarin

画面遷移の管理

• ModalStackで管理
• ModalStackはNavigationPageを必要としない
  • 任意のPage派生クラスでOK
• 画面を表示するときはModalStackにPush
  • Navigation.PushModalAsync
• 画面を閉じるときはModalStackからPop
  • Navigation.PopModalAsync

ModalStackの操作

• ModalStackは操作できない
  • InsertPageBeforeやRemovePageのような操作が存在しない
• PopToRootAsyncはサポートされていない

ModalStackの取得

Page内でなら、下記の様に取得できます。

PageのList(ReadOnly)が取得できます。

ModalStack - Xamarin

UI関連

• 基本的にNavigationBarを伴わない
  • NavigationPageをPushModalAsyncした場合は表示される
    • ただし、戻るボタンはサポートされない
    • 画面を閉じるためのUIは自前で実装しなければならない

その他

• Backキーを無効にすべき
  • Android/Windows Phone
  • 「モーダル」の意味合いから、何かしらの操作/処理の完了後に画面が閉じられるべき

Backキー無効については、別記事にて整理予定です。

Modal Pages/Hierarchical Navigationと画面ライフサイクル

下記のサンプルコードで確認してみました(iOS/Android)

github.com

相変わらず、動作確認用のどうしようもないコードです…。

Modal PagesとHierarchical Navigationを複合しています。

• TopPage→Page1→Page2→Page3→NavigationRootPageとPushModalAsync
• NavigationRootPage→PushPage1→PushPage2→PushPage3とPushAsync
• PushPage3→PushPage2→PushPage1→NavigationRootPageとPopAsync
• NavigationRootPage→Page3→Page2→Page1→TopPageとPopModalAsync
• 各画面のOnAppearingとOnDisappearingでログ出力

確認まとめ

• PushModalAsync, PopModalAsync
  • iOS
    • 遷移先画面のOnAppearing → 遷移元画面のOnDisappearing
  • Android
    • 遷移元画面のOnDisappearing → 遷移先画面のOnAppearing

iOSでの呼ばれる順番に注意！
呼ばれる順番性を当てにした実装はしてはいけませんね。

おまけの確認(ModalStackとNavigationStack)

各画面のOnAppearingとOnDisappearingで、NavigationStackとModalStackの中身をログ出力しました。

• ContentPageをPushModalAsync
  • ModalStackにのみ積まれて、 NavigationStackはカラ
• NavigationPageをPushModalAsync
  • ModalStackとNavigationStack両方にNavigationPageが積まれる
  • このときのログ出力
    • NavigationStack
      • 具体的な名前が表示される
        • ex) “ModalPagesSample.NavigationRootPage”
    • ModalStack
      • NavigationPageとして表示される
        • “Xamarin.Forms.NavigationPage”

ModalStackとNavigationStack

公式のDevelopersガイドで図解してくれていますが、図だけ見るとほとんど概念上の差がありません…。
Hierarchical Navigation - Xamarin
Modal Pages - Xamarin

ということで…。
サンプル実装と確認結果を踏まえて、個人的な整理として図式化してみました。
(ちなみに、筆者の作図能力は著しく低いです…)