[TIL] List 내부 ScrollView Horizontal Scroll 구현

구현 화면

오늘은 SwiftUI로 아래  화면을 구현해보려고 하는데요. 그 과정에 기록하고자 글을 남겨봅니다.

 

 

화면  구현

리스트 구현

위와 같은 화면을 구성하기 위해 SwiftUI의 List를 처음으로 사용해 보겠습니다.

List는 UIKit에서 TableView와 CollectionView의 일부 개념이 합처진 개념으로 리스트로 이루어진 뷰를 그릴 때 사용하는 SwiftUI의 뷰 중 하나입니다.

 

그래서 아래 사진과 같이 그리려는 뷰 계층의 최상단 뷰를 List로 구성해주었습니다.

 

섹션 나누기

이제 그 다음 할 일은 아래 사진처럼 각 항목들을 섹션별로 분류하는 건인데요.

 

이 작업은 SwiftUI의 Section이라는 뷰를 활용하면 List 뷰 내부에서 섹션별로 나누어 줄 수 있습니다.

따라서 아래 사진과 같이 List 뷰 내부에서 각 섹션을 나누어 주었습니다.

스크롤 뷰 구현

다음은 스크롤뷰 구현입니다. 정확히는 아래 보시는 것처럼 섹션별로 가로 스크롤 뷰를 적용하는 건데요. 

자 그럼 시작해보겠습니다.

 

위에서 언급했던 것처럼 섹션별로 가로 스크롤이 가능하도록 구현할 것이기 때문에 스크롤 기능이 내재되어 있는 ScrollView를 활용하였는데요. 

ScrollView는 기본적으로 스크롤 방향이 수직 스크롤이지만 정의시 스크롤 방향을 인자로 지정해줄 수 있습니다.

저는 가로 스크롤을 사용할 예정이라 .horizontal을 적용해 주었습니다.

 

그 다음 ForEach를 이용하여 각 화면 요소들을 나열해 주고,

각 요소 클릭 시, 상세 화면으로 이동시키는 기능 구현을 위해 ForEach의 각 요소들을 NavigationLink으로 감싸주었습니다.

 

완성된 화면

완성된 화면은 다음과 같습니다.

 

여기까지 읽어주셔서 정말 감사합니다~

 

참고 사이트

https://developer.apple.com/documentation/swiftui/list (애플 공식 문서 - List)

https://huniroom.tistory.com/entry/SwiftUI-List-Header-Footer-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0 (List Section 구현 참고)

 

https://seons-dev.tistory.com/entry/ScrollView (ScrollView 구현 참고)