読者です 読者をやめる 読者になる 読者になる

Makopy'5 La6

スマホアプリ開発とかその周辺のこととか関係ないこと。または恋は言ってみりゃボディー・ブロー

(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は操作できない
    • InsertPageBeforeRemovePageのような操作が存在しない
  • 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
  • 各画面のOnAppearingOnDisappearingでログ出力

確認まとめ

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

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

おまけの確認(ModalStackとNavigationStack)

各画面のOnAppearingOnDisappearingで、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

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