SmallDeskSoftware 
TabView と PageTabViewStyle を使って、PageViewController を簡単に作れたので説明します。
Sponsor Link
TabView の使い方
UITabBarViewController を知っていればそのままです。
画面の下に、項目が表示されているので、選択することで上部のビューが切り替わります。
選択されている項目は強調表示されるので、ユーザーはどれを選択しているかを視覚的に理解できます。
//
// 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 を指定すると、以下のように表示され、左右のスワイプでページをめくれるようになります。
//
// 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 のドキュメントは、こちら。
この指定が、ページインジケータを表示するかどうかでした。というか、見えないのは、背景が白で、インジケータも白だからでした・・・
背景をグレーにして確認しました。
//
// 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
