하고 싶은 일

SwiftUI의 TabView를 사용한 메뉴 화면에서,
탭 전환을 슬라이드 애니메이션으로 구현하고 싶습니다.

1. 우선은 보통의 TabView

이곳은 기본적인 TabView군요.
레드 블루 노란색 뷰를 탭으로 전환하여 표시하고 있습니다.

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의 삭제와,
바의 대용으로서 버튼을 3개 배치하고 있습니다.

또 현재의 탭 번호를 상태 변수 selection로 보관 유지해 TabView 생성시에 selection 인수에 건네주고 있습니다.
이렇게 하면 selection 변수를 전이한 탭 번호로 함으로써 View의 전환이 가능해집니다.
예제에서는 Button을 누를 때 selection을 업데이트합니다.

실제 화면이 여기입니다.


슬라이드 애니메이션으로 View 전환을 할 수 있게 되었습니다!
단, 동영상 후반의 버튼으로의 전환에는 애니메이션이 적용되지 않습니다.

3. 슬라이드 애니메이션 추가

마지막으로 버튼 전환시에도 애니메이션이 적용되도록 하기 위해,
아래 수정자를 TabView에 추가합니다.

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

실제 화면이 여기입니다.


버튼으로의 전환에 대해서도 슬라이드 애니메이션으로 전환할 수 있었습니다!
그리고는 버튼의 UI를 정돈하면 TabView와 PageTabView의 기능을 겸비한 UI의 완성이군요!

이상입니다.