(Xamarin.Forms)TabbedPage

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

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

• Hierarchical Navigation
• Modal Pages
• TabbedPage

これまで、

• Hierarchical Navigation
  • (Xamarin.Forms)Hierarchical Navigation - Makopy'5 La6
• Modal Pages
  • (Xamarin.Forms)Modal Pages - Makopy'5 La6

にスポットを当ててきました。

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

---

TabbedPageのポイント

Xamarinでのアプリ開発は日が浅いのであまり実戦事例が足りていませんが…。
スマホアプリ開発として見ると、実戦の開発では、Tabによる画面(機能)の切り替えは遭遇率が高いです。
画面(機能)が多岐に渡る場合はMaster-Detail Pageもありえますが。

例のごとく、ベーシックな知識は公式のDevelopersガイドから得るのが一番です。
developer.xamarin.com

画面管理

• TabbedPageの子要素(Children)にPageを設定する
• ItemsSource, ItemTemplateを使用した画面設定も可能

ItemsSource, ItemTemplateを使う方法は同一構成の複数画面が前提なので、個人的にはCarousel Pageなイメージです。 また、
「機能的に異なるいくつかの画面 + 設定画面」
みたいなのが、Tabを使ったアプリには多い気がします。
そのような場合は画面単位に実装を担当する可能性が高く、基本的にはChildrenにPageを設定するような実装をまずは押さえておくべきだと思います。

Tab構成に関する注意点

• 子要素はNavigationPage, ContentPageのインスタンスで構成されるべき
• 含まれる子要素が多すぎるとパフォーマンスが影響を受ける可能性がある
• TabbedPageをNavigationPageに配置するのは非推奨
  • iOSではUITabBarControllerがUINavigationControllerのラッパーとして動作するため

UI関連

• TabのタイトルはPageのTitleが設定される
• Tab上のボタン用に画像が必要
• Tabの表示位置
  • iOSは画面下部
  • Android, Windowsでは画面上部

Tab表示位置に関する悩み…

上述の
「いくつかの画面 + 設定画面」
のパターンを考えてみましょう。
ListViewを設定画面トップとして、各セルタップで子画面をPushAsync
と、やりたくなるのですが…。
Android, WindowsではTabが画面上部に表示されます。
Tabの子要素にNavigationPageを設定すると、NavigationBarがTabのさらに上に表示されてしまいます…。

NavigationBarを非表示にする方法

(参考)

ytabuchi.hatenablog.com

XAMLなら、

C#なら、

NavigationBarを非表示にすると…

NavigationBarを非表示にするとなると、また別の悩みが出てきます。
Backキーを持たないiOS用にわざわざ戻るUIを実装しなければならない。
実装するにしても、Tabの表示位置の違いを意識して配置することになり、非常に悩みます。

個人的に現時点での落としどころとしては…。

• iOSではNavigationBarを表示する
• Android, Windowsではナビゲーションバーを非表示にしてBackキーで戻るようにする

その他もろもろ

表示画面変更の捕捉

OnCurrentPageChangedをオーバーライドする

表示画面を切り替える

Currentを変更する

サンプル

TabbedPageについて、サンプル実装してみました。
いつもながら実験用の適当なコードですが…。

github.com