[SwiftUI] Carousel View 만들기

AppStore의 App 탭의 각 섹션을 나타내는 뷰를 유사하게 만들어보고자 합니다.

 

요구 사항으로는 Scroll Snap이 가능하며, 스크롤시 양 옆의 콘텐츠 일부가 노출되어야 합니다.

일반적으로 해당 기능을 수행하는 뷰를 Carousel View라고 명칭하는 것 같습니다.

 

 

Carousel View를 분석한 구조는 다음과 같습니다.

- horizontal spacing: 콘텐츠 전체 영역이 시작되고 끝나는 지점을 정의합니다.

- spacing: 각 콘텐츠 영역 사이의 마진 값 입니다.

- visible rect: 부모 뷰에서 바라보는 사각형 영역 입니다.

- scrollOffsetX: x축의 오프셋 값 입니다.

 

Carousel View는 visible rect를 오프셋을 이동시키며 콘텐츠 뷰를 순서대로 볼 수 있는 기능을 수행합니다.

 

구현 과정

1. ContentView를 정의하기 위해 `@ViewBuilder` 클로저를 주입 받는 뷰를 만듭니다.

@ViewBuilder 클로저를 통해 하나의 뷰를 주입받을 수 있습니다.

 

2. ContentView(`@ViewBuilder` 클로저)를 여러개 받을 수 있는 구조로 만듭니다.

페이지 갯수 정보를 의미하는 `pageCount` 를 입력 받아 ForEach문을 사용해 `@ViewBuilder` 클로저를 수행하도록 합니다.

페이지 뷰(ContentView) 들은 HStack으로 감싸도록 하고 spacing 값도 입력 받습니다.

 

이제 `ForEach(0..<pageCount, id:\.self)` 문을 통해 페이지 인덱스에 따라 UI를 구성할 수 있습니다.

다음으로 드래그를 하여 오프셋을 이동시킬 수 있는 기능을 추가하도록 합니다.

 

3. DragGesture를 이용해 오프셋 값을 이동시킵니다.

(콘텐츠가 중앙 정렬이 되도록 작성하였습니다.)

 

 

실행화면

 

 

참고 자료

https://www.youtube.com/watch?v=4Gw5lDXJ04g