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


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

# 1. まずは普通のTabView

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

```swift: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)
            }
        }
    }
}
```

こちらの結果を確認してみると下記のようになります。
　![Simulator Screen Recording - iPod touch (7th generation) - 2021-05-31 at 19.06.27.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233342/63ade577-9b1b-a618-8089-40e32a787826.gif)

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


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

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

```swift:
.tabViewStyle(PageTabViewStyle())
```

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

```swift: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の削除と、
バーの代用としてボタンを３つ配置しています。
<br>
また現在のタブ番号を状態変数selectionで保持してTabView生成時にselection引数に渡しています。
こうするとselection変数を遷移したタブ番号にすることでViewの切り替えが可能となります。
例ではButtonを押した時にselectionを更新しています。
<br>
実際の画面がこちらです。
　![Simulator Screen Recording - iPod touch (7th generation) - 2021-05-31 at 19.16.06.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233342/deaf21b7-655a-c496-ea42-b2c726e5f6d6.gif)

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

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

```swift            
.transition(.slide)
.animation(.easeInOut)
```
<br>
実際の画面がこちらです。
![Simulator Screen Recording - iPod touch (7th generation) - 2021-05-31 at 19.21.54.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233342/7f1084a1-e5d9-b43f-dd6f-6f6f17deec8d.gif)

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

以上です。