[UI] 상단 탭 화면 with Animation (SwiftUI 2.0 - iOS 14 이상)

아래 구현은 하단 화면을 스와이프하거나 커스텀 상단 탭 버튼을 클릭하여 탭 화면 이동한다.

 

1. 상탭 탭 화면 with Animation

1) 구현 UI

2) 구현 코드

// 메인 View
struct TabView_SwipeGesture: View {
    @State private var selectedTab = 0
    private let tabs = [TabData(id: 0, name: "아침"),
                        TabData(id: 1, name: "점심"),
                        TabData(id: 2, name: "저녁")]

    var body: some View {
        VStack {
            HStack(spacing: 0) {
                ForEach(tabs, id: \.id) { tab in
                    TabBarItem(selectedTab: $selectedTab, data: tab)
                    Spacer()
                }
            }
            .background(Color.black.opacity(0.06))
            .clipShape(Capsule())
            .padding(.horizontal)
            .padding(.top, 25)

            Spacer()

            TabView(selection: $selectedTab) {
                ForEach(tabs, id: \.id) { tab in
                    Text(tab.name)
                        .tag(tab.id)
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        }
    }
}


/// 상단 탭 아이템 Model
struct TabData {
    let id: Int
    let name: String
}

/// 상단 탭 아이템
struct TabBarItem: View {
    @Binding var selectedTab: Int
    let data: TabData

    var body: some View {
        Text(data.name)
            .foregroundColor(selectedTab == data.id ? .white : Color.blue.opacity(0.5))
            .fontWeight(.bold)
            .padding(.vertical, 10)
            .padding(.horizontal, 35)
            .background(Color.blue.opacity(selectedTab == data.id ? 1 : 0))
            .clipShape(Capsule())
            .onTapGesture {
                withAnimation {
                    self.selectedTab = data.id
                }
            }
    }
}

 

.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) 를 사용해서, PageTabViewStyle을 전달하여 페이징 스타일을 설정합니다.

이 스타일은 탭 뷰를 페이지로 분할하고, 사용자가 왼쪽 또는 오른쪽으로 스와이프하여 페이지 간에 전환할 수 있도록 합니다.

indexDisplayMode 매개변수는 페이지 인덱스의 표시 방법을 설정합니다. 여기서는 .never를 전달하여 페이지 인덱스를 숨깁니다.
따라서 사용자는 현재 페이지에 대한 인덱스를 볼 수 없습니다.