[UI] Carousel (SwiftUI 2.0 - iOS 14 이상)

iOS 14 이상인 SDK에서 TabView를 이용하여 구현한 Carousel List는 아래와 같이 구현해볼 수 있다.

TabView는 iOS 13 에서 나온 View이지만 Carousel List 형태로 표시하기 위해 사용되는 tabViewStyle modifier는 iOS 14 이상에서 사용할 수 있다.

 

1. 단순 Carousel List

1) 영화 이미지 파일

영화 이미지.zip

0.04MB

2) 구현 UI

3) 구현 소스

struct CarouselList_TabView: View {
    @State private var selectedTab = 1

    var body: some View {
        TabView(selection: $selectedTab) {
            ForEach(1...5, id: \.self) { index in
                Image("m\(index)")
                    .resizable()
                    .frame(height: 210)
                    .cornerRadius(15)
                    .padding(.horizontal)
                    .tag(index)
            }
        }
        .frame(height: 210)
        .padding(.top)
        .tabViewStyle(PageTabViewStyle())
    }
}

 

2. Animated Carousel List

1) 구현 UI

2) 구현 소스

struct AnimatedCarouselList_TabView: View {
    @State private var selectedTab = 1

    var body: some View {
        TabView(selection: $selectedTab) {
            ForEach(1...5, id: \.self) { index in
                Image("m\(index)")
                    .resizable()
                    .frame(height: self.selectedTab == index ? 210 : 170 ) // 현재 index의 높이 변경
                    .cornerRadius(15)
                    .padding(.horizontal)
                    .tag(index)
            }
        }
        .frame(height: 210)
        .padding(.top)
        .tabViewStyle(PageTabViewStyle())
        .animation(.easeOut) // 애니메이션 효과 추가
    }
}