[SwiftUI] SwiftUI で UIPageViewController の実装 (TabView の PageTabViewStyle を使って)

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

Sponsor Link

TabView の使い方
PageTabViewStyle
ページインジケータがない？！
インジケータ(色)
まとめ
おすすめ本

TabView の使い方

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

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

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

TabView


//
//  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") }
    }
  }
}

「TabView (standard)」

PageTabViewStyle

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

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

TabView with 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())
  }
}

「TabView with PageTabViewStyle」

ページインジケータがない？！

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

Apple のドキュメントは、こちら。

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

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

TabView with PageTabViewStyle with gray background code


//
//  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())
    }
  }
}