SwiftUI ScrollView, ScrollViewReader, ScrollViewProxy

iOS

SwiftUI ScrollView, ScrollViewReader, ScrollViewProxy

성홍민 2023. 6. 12. 17:31

📖 ScrollView & ScrollViewReader&ScrollViewProxy

ScrollView

ScrollView는 SwiftUI에서 스크롤 가능한 뷰를 만드는 데 사용되는 개체입니다. 리스트나 그리드의 콘텐츠를 스크롤할 수 있게 해 줍니다. ScrollView는 View 프로토콜을 채택하므로 다른 뷰와 동일한 방식으로 사용하실 수 있습니다.

예시코드

ScrollView {
    VStack(spacing: 10) {
        ForEach(1...100, id: \.self) { index in
            Text("Item \(index)")
                .frame(height: 20)
        }
    }
}

이 경우, VStack 내부에 100개의 항목이 있는데, 이를 모두 보여주기 위해 스크롤할 수 있게 하는 것이 ScrollView의 역할입니다.

ScrollViewReader

ScrollViewReader는 ScrollView의 특정 항목으로 스크롤하는 인터페이스를 제공합니다. 목록에서 사용자가 선택한 항목으로 스크롤하는 등, 정확한 위치로 스크롤되어야 할 때 유용합니다. 이를 구현하려면, 독립적인 뷰에 유일한 ID를 할당하여 ScrollViewReader를 사용하여 해당 ID로 스크롤하는 것입니다.

예시코드

struct ScrollingView: View {
    var body: some View {
        ScrollView {
            ScrollViewReader { proxy in
                Button("Scroll to 50") {
                    withAnimation(.easeInOut(duration: 1.0)) {
                        proxy.scrollTo(50, anchor: .top)
                    }
                }
                
                ForEach(1...100, id: \.self) { index in
                        Text("Row \(index)")
                            .frame(height: 20)
                            .id(index)
                }
            }
        }
    }
}

이 코드에서는 먼저 ScrollView 내부에 ScrollViewReader를 만든 다음, ID를 가진 항목들을 포함하는 ForEach 루프를 만듭니다. 그리고 버튼을 사용하여, ScrollViewReader의 proxy 객체를 사용하여 해당 ID로 스크롤하도록 합니다.

ScrollViewProxy

ScrollViewProxy는 런타임에 ScrollViewReader로부터 얻을 수 있는 프록시 객체입니다. ScrollViewReader가 뷰로 스크롤할 수 있는 인터페이스를 제공하면, ScrollViewProxy는 해당 스크롤을 구현하는 데 필요한 기능을 제공합니다. 다시 말해, ScrollViewProxy는 ScrollView에서 필요한 정보와 동작을 수행하는 데 사용되는 객체입니다.

위 예시에서, ScrollViewReader를 ScrollView 내부에 배치합니다. 버튼 클릭 시, proxy.scrollTo(50, anchor:. top)을 호출하여 50번째 섹션으로 스크롤합니다. 여기서 proxy 객체는 ScrollViewProxy의 인스턴스입니다.

결론적으로, ScrollViewReader는 스크롤을 원하는 위치로 이동하는 인터페이스를 제공하는 뷰입니다. ScrollViewProxy는 그 인터페이스를 실제로 구현하는 프록시 객체입니다.