TabView と PageTabViewStyle を使って、PageViewController を簡単に作れたので説明します。
Sponsor Link
TabView の使い方
UITabBarViewController を知っていればそのままです。
画面の下に、項目が表示されているので、選択することで上部のビューが切り替わります。
選択されている項目は強調表示されるので、ユーザーはどれを選択しているかを視覚的に理解できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// // ContentView.swift // PageTabViewStyle // // Created by Tomoaki Yagishita on 2020/10/18. // import SwiftUI struct ContentView: View { var body: some View { TabView { Text("Page 0") .tabItem { Image(systemName: "0.circle") Text("0") } Text("Page 1") .tabItem { Image(systemName: "1.circle") Text("1") } Text("Page 2") .tabItem { Image(systemName: "2.circle") Text("2") } } } } |
PageTabViewStyle
SwiftUI2.0 になって、TabView の Style に PageTabViewStyle が追加されました。
tabViewStyle に PageTabViewStyle を指定すると、以下のように表示され、左右のスワイプでページをめくれるようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// // ContentView.swift // PageTabViewStyle // // Created by Tomoaki Yagishita on 2020/10/18. // import SwiftUI struct ContentView: View { @State private var index:Int = 0 var body: some View { TabView { Text("Page 0") .tabItem { Image(systemName: "0.circle") Text("0") } Text("Page 1") .tabItem { Image(systemName: "1.circle") Text("1") } Text("Page 2") .tabItem { Image(systemName: "2.circle") Text("2") } } .tabViewStyle(PageTabViewStyle()) } } |
ページインジケータがない?!
動作を見て、ページインジケータ(画面下に表示されるドット)がない! と考えて、自分で作ったりもしたのですが、PageTabViewStyle のドキュメントを見ると、IndexDisplayMode なる指定ができるようになっています。
Apple のドキュメントは、こちら。
この指定が、ページインジケータを表示するかどうかでした。というか、見えないのは、背景が白で、インジケータも白だからでした・・・
背景をグレーにして確認しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// // ContentView.swift // PageTabViewStyle // // Created by Tomoaki Yagishita on 2020/10/18. // import SwiftUI struct ContentView: View { @State private var index:Int = 0 var body: some View { ZStack { Color.gray TabView { Text("Page 0") .tabItem { Image(systemName: "0.circle") Text("0") } .tag(0) Text("Page 1") .tabItem { Image(systemName: "1.circle") Text("1") } .tag(1) Text("Page 2") .tabItem { Image(systemName: "2.circle") Text("2") } .tag(2) } .tabViewStyle(PageTabViewStyle()) } } } |
インジケータ(色)
インジケータには、tabItem で指定したイメージが使用されているようです。なお、Image を指定しないと、ドットで表示されます。
色についても変更できるか調べましたが、インジケータの色については、SwiftUI 的に設定する方法は用意されていないようです。
StackOverflow の この質問で、UIKit の設定を変更して SwiftUI に反映する方法が説明されています。
まとめ
- PageView という View は、SwiftUI には定義されていない
- PageTabViewStyle を指定することで、TabView が PageView のように使える
- ページインジケータは、tabItem のイメージが使用される
- ページインジケータの色は、白 で固定。変更には、UIKit の設定を変更する必要あり
おすすめ本
SwifUI のヘルプはよくできてはいますが、文字ばかりでよく分からなくなる時があります。ビジュアル的に探したい時には以下のような本が便利です。
Amazon からは、お試し用の本を無料で入手できます。
Apple からのリリースに応じて、アップデートされるので、良さそうだと思ったら、本家から購入するのがおすすめです。
説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。
Sponsor Link