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

2020.10 時点では、UIPageViewController 相当のビューは、SwiftUI に定義されていません。
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") }
    }
  }
}

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

// 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 のドキュメントは、https://developer.apple.com/documentation/swiftui/pagetabviewstyle/indexdisplaymode。

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

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

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

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

}

「TabView with PageTabViewStyle with gray background」

インジケータ(色)

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

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

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

まとめ

PageTabViewStyle を使うことで、TabView が PageViewに

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

TabView

PageTabViewStyle

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

インジケータ(色)

まとめ

おすすめ本

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル