SwiftUI | Beyond scroll views 정리

iOS 17버전 이상부터 사용할 수 있는 Scrollview에 대한 아래 개선사항을 정리하고 있습니다.

• 여백 관리
• 스크롤 타겟 및 위치 제어
• 스크롤 전환 효과

LazyVStack(iOS14+)

감싸진 내부 콘텐츠는 초기 렌더시 모든 콘텐츠를 적극 evaluate하지 않고, 보일때마다 evaluate하여 성능을 최적화합니다.

1. ScrollView와 안전 영역 및 콘텐츠 여백 관리

1.1. SafeArea

SafeArea 영역

 

스크롤 뷰는 SafeArea를 사용해 콘텐츠를 보호하고, 콘텐츠 바깥 여백으로 SafeArea를 분할해, 콘텐츠가 안전 영역 안으로 확실히 들어갈 수 있도록 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

1.4. SafeAreaPadding

좌측에 사용된 일반 패딩 수정자와 똑같이 동작하지만, 콘텐츠가 아니라 SafeArea에 패딩을 넣기에 ScrollView가 전체 너비에 적용되어 다음 아이템이 살짝 엿보이게 됩니다.

 

2. ScrollView의 스크롤 동작 조정 방법

2.1. Content Offset

 

콘텐츠 내부에서 스크롤되는 정확한 위치를 의미하며, ScrollViewReader API를 통해 이를 조정할 수 있습니다. 즉 스크롤이 멈추는 특정 y좌표값(axis:horizontal일 경우 x좌표값)을 의미합니다.

 

 

 

 

 

 

 

 

 

2.2. ScrollTargetBehavior

기본적으로 감속률과 스크롤 속도를 사용해 목표 ContentOffset이 임의로 결정되지만, scrollTargetBehavior 수정자를 사용하면, 콘텐츠 오프셋 계산 방식을 커스텀할 수 있습니다.

.scrollTargetBehavior(.paging)

위처럼 컨테이너 크기에 맞춰 정렬해줍니다.

.scrollTargetBehavior(.viewAligned) + .scrollTargetLayout()

각 LazyHStack 컴포넌트의 좌측 끝값으로 끊어서 정의합니다. 이때 scrollTargetLayout 수정자를 통해 히어로 뷰를 스크롤 타깃으로 지정할 수 있습니다.

 

2.3 scrollTargetBehavior 프로토콜

페이징과 뷰 정렬 동작을 유연하게 커스텀할 수 있는 구조체를 정의할 수 있도록 돕습니다. 이 프로토콜의 필수 구현 메서드는 updateTarget으로 스크롤의 끝점을 계산하기 위한 메서드입니다.

현재 위치가 Top에 가깝고, 스크롤이 큰 폭으로 위로 넘겨지면, Top으로 스크롤이 끝까지 올라가게 하는 코드

 

3. 뷰 레이아웃

3.1. containerRelativeFrame

 

기기 전체의 너비와 비례하여 각 스크롤 아이템의 너비를 조정하기 위해 기존에는 GeometryReader를 사용해야 했습니다.

허나 containerRelativeFrame 수정자를 통해 컨테이너의 너비가 변경됨에 따라 뷰의 크기가 자동으로 업데이트 되게 설계가 가능합니다.

여기서 sizeClass 환경 프로퍼티를 사용함으로써 , #if os 를 사용하지 않고 모든 플랫폼에서 너비에 대한 명확한 기준 정의가 가능합니다.

 

 

 

4. 스크롤 인디케이터 수정 및 ScrollView 활용

4.1. scrollIndicators()

기존 .scrollIndicators(.hidden) 수정자를 사용하면, 일반적으로 스크롤 인디케이터를 숨겨지지만 마우스와 같이 스크롤이 어렵다고 판단되면 스크롤 인디케이터가 부분적으로 보여집니다. 따라서 완전히 숨기기 위해선 .scrollIndicators(.never)를 사용해야합니다.

 

4.2. scrollPosition()

직접 스크롤 하지 않고, 상위 뷰에서 스크롤 위치에 대한 조정을 할 수 있도록 돕는 수정자로, 스크롤 상태에 대한 바인딩 작업을 가능토록 합니다.

ScrollPosition으로 수정자로 수집된 값은 현재 스크롤되고 있는 뷰의 아이덴티티를 알 수 있도록 해주기에, 스크롤에 따라 현재 보고 있는 뷰를 실시간으로 텍스트 형태로 보여줄 수 있습니다.(우)

 

5. ScrollTransition

ScrollView가 가시 영역에 들어오고 나가는 과정에서 변화를 적용하는 기능입니다.

 

뷰가 가시영역의 한가운데 있는 것은 ScrollTransition의 identity phase에 있다고 칭합니다. 이때에는 어떠한 사용자 설정도 적용되지 않습니다.

scrollTransition 수정자는 뷰가 scrollView의 가시영역에 들어오는 순간과 나가는 순간의 전환 효과를 묘사합니다.

해당 api에는 content와 phase가 들어가며, phase를 근거로 콘텐츠에 시각적 변화를 지정할 수 있습니다.

이때 새로운 프로토콜인 VisualEffect를 채택하는 scaleEffect, rotationEffect를 사용해 scrollTransition 정의가 가능합니다.

 

하지만, 서체 사용자 설정이나 스크롤 뷰 콘텐츠 전체의 크기를 바꾸는 등의 변경은 지원되지 않습니다.