iOS 17 스크롤뷰 개선사항 : ScrollView를 페이지 단위로 또는 자식 뷰 사이로 스냅되게 만드는 방법

iOS 17에서 SwiftUI의 새로운 기능은 무엇일까요?

 

ScrollView를 페이지 단위로 또는 자식 뷰 사이로 스냅되게 만드는 방법 

출처 : 폴 허드슨 , 2023년 6월 16일 작성

 

 

Xcode 15용으로 업데이트되었습니다. 

 

iOS 17에서의 새로운 기능 SwiftUI의 ScrollView는 기본적으로 부드럽게 움직이지만,

 

scrollTargetLayout() 및 scrollTargetBehavior() 수정자를 사용하여 특정 자식 뷰 또는 전체 페이지로 자동으로 스냅될 수 있습니다.

 

예를 들어, 이 코드는 가로 스크롤 뷰에 10개의 둥근 사각형을 배치하며 각각이 스크롤 타겟인 경우입니다.

 

.scrollTargetBehavior()가 .viewAligned로 설정되어 있기 때문에 SwiftUI는 둥근 사각형 간에 자동으로 스냅됩니다.

 

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(0..<10) { i in
                    RoundedRectangle(cornerRadius: 25)
                        .fill(Color(hue: Double(i) / 10, saturation: 1, brightness: 1).gradient)
                        .frame(width: 300, height: 100)
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.viewAligned)
        .safeAreaPadding(.horizontal, 40)
    }
}

 

scrollTargetLayout()를 사용하여 레이아웃 내의 모든 것이 스크롤 타겟이 되도록 만듭니다. 

 

일부 자식 뷰만 스냅되길 원하는 경우, 이를 제거하고 대신 개별 뷰에 scrollTarget()를 연결해야 합니다. 

 

대안적인 스크롤 타겟 동작으로 .paging이 있으며, 이는 스크롤 방향에 따라 ScrollView를 정확히 한 화면 너비 또는 높이만큼 이동하게 합니다.

 

 

 

ScrollView {
    ForEach(0..<50) { i in
        Text("Item \(i)")
            .font(.largeTitle)
            .frame(maxWidth: .infinity)
            .frame(height: 200)
            .background(.blue)
            .foregroundStyle(.white)
            .clipShape(.rect(cornerRadius: 20))
    }
}
.scrollTargetBehavior(.paging)