[SwiftUI] TabView の PageTabViewStyle を使った UIPageViewController の実装

SwiftUI

2020.10 時点では、UIPageViewController 相当のビューは、SwiftUI に定義されていません。
TabView と PageTabViewStyle を使って、PageViewController を簡単に作れたので説明します。

TabView

UITabBarViewController を知っていればそのままです。

画面の下に、項目が表示されているので、選択することで上部のビューが切り替わります。

選択されている項目は強調表示されるので、ユーザーはどれを選択しているかを視覚的に理解できます。

TabView

TabView (standard)

「TabView (standard)」

PageTabViewStyle

SwiftUI2.0 になって、TabView の Style に PageTabViewStyle が追加されました。

tabViewStyle に PageTabViewStyle を指定すると、以下のように表示され、左右のスワイプでページをめくれるようになります。

TabView with PageTabViewStyle

TabView with PageTabViewStyle

「TabView with PageTabViewStyle」

ページインジケータがない?!

動作を見て、ページインジケータ(画面下に表示されるドット)がない! と考えて、自分で作ったりもしたのですが、PageTabViewStyle のドキュメントを見ると、IndexDisplayMode なる指定ができるようになっています。

Apple のドキュメントは、https://developer.apple.com/documentation/swiftui/pagetabviewstyle/indexdisplaymode。

この指定が、ページインジケータを表示するかどうかでした。というか、見えないのは、背景が白で、インジケータも白だからでした・・・

背景をグレーにして確認しました。

TabView with PageTabViewStyle with gray background code

TabView with PageTabViewStyle with gray background

「TabView with PageTabViewStyle with gray background」

インジケータ(色)

インジケータには、tabItem で指定したイメージが使用されているようです。なお、Image を指定しないと、白いドットで表示されます。

色についても変更できるか調べましたが、インジケータの色については、SwiftUI 的に設定する方法は用意されていないようです。

StackOverflow の この質問で、UIKit の設定を変更する方法が説明されています。

まとめ

PageTabViewStyle を使うことで、TabView が PageViewに
  • PageView という View は、SwiftUI には定義されていない
  • PageTabViewStyle を指定することで、TabView が PageView のように使える
  • ページインジケータは、tabItem のイメージが使用される
  • ページインジケータの色は、白 で固定

おすすめ本

SwifUI のヘルプはよくできてはいますが、文字ばかりでよく分からなくなる時があります。ビジュアル的に探したい時には以下のような本が便利です。

Amazon からは、お試し用の本を無料で入手できます。

Apple からのリリースに応じて、アップデートされるので、良さそうだと思ったら、本家から購入するのがおすすめです。

SwiftUIViewsMastery

説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です