【SwiftUI】TabViewをスライドアニメーションで切り替える

やりたいこと

SwiftUIのTabViewを使ったメニュー画面で、
タブ切り替えをスライドアニメーションで実装したい。

1. まずは普通のTabView

こちらは基本的なTabViewですね。
赤青黄のViewをタブで切り替えて表示しています。

ContentView.swift

import SwiftUI

struct ContentView: View {    
    var body: some View {
        VStack {
            TabView(selection: self.$selection) {
                Text("View 01").background(Color.red).tabItem{Text("View01")}.tag(0)
                Text("View 02").background(Color.blue).tabItem{Text("View02")}.tag(1)
                Text("View 03").background(Color.orange).tabItem{Text("View03")}.tag(2)
            }
        }
    }
}

こちらの結果を確認してみると下記のようになります。
　

確かに切り替えはできていますが、画面切り替え時のアニメーションがない状態です。

2. PageTabViewを使ってみる

続いてTabViewのモディファイアの設定でPageTabViewを使ってみます。
こちらは各Viewを画面のスライドで切り替えることができる機能となります。

使い方としてはTabViewのtabViewStyleモディファイアにPageTabViewStyleを指定するだけです。

.tabViewStyle(PageTabViewStyle())

コード全体は下記のようになります。

ContentView.swift

import SwiftUI

struct ContentView: View {
    // 現在のタブ番号を状態変数で保持することでプログラムからViewを切り替えられる。
    @State private var selection : Int = 0

    var body: some View {
        VStack {
            TabView(selection: self.$selection) {
                Text("View 01").background(Color.red).tag(0)
                Text("View 02").background(Color.blue).tag(1)
                Text("View 03").background(Color.orange).tag(2)
            }
            .tabViewStyle(PageTabViewStyle())

            // PageTabViewにすると切り替え用のバーが消えるためボタンで代用
            HStack {
                Button(action: {self.selection = 0}, label: {
                    Text("赤のViewへ")
                }).background(Color.red).foregroundColor(.black)

                Button(action: {self.selection = 1}, label: {
                    Text("青のViewへ")
                }).background(Color.blue).foregroundColor(.black)

                Button(action: {self.selection = 2}, label: {
                    Text("黄のViewへ")
                }).background(Color.orange).foregroundColor(.black)
            }
        }
    }
}

PageTabViewではタブ切り替え用のバーは消えるためtabitemの削除と、
バーの代用としてボタンを３つ配置しています。


また現在のタブ番号を状態変数selectionで保持してTabView生成時にselection引数に渡しています。
こうするとselection変数を遷移したタブ番号にすることでViewの切り替えが可能となります。
例ではButtonを押した時にselectionを更新しています。


実際の画面がこちらです。
　

スライドアニメーションでView切り替えができるようになりました！
ただ動画後半のボタンでの切り替えにはアニメーションが適用されていません。

3. スライドアニメーションを追加する

最後にボタン切り替え時にもアニメーションが適用されるようにするため、
下記モディファイアをTabViewに追加します。

.transition(.slide)
.animation(.easeInOut)

実際の画面がこちらです。

buttonでの切り替えについてもスライドアニメーションで切り替えることができました！
あとはボタンのUIを整えればTabViewとPageTabViewの機能を兼ね備えたUIの完成ですね！

以上です。