일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- wwdc23
- Static Dispatch
- ScrollViewReader
- async
- Concurrency Programming
- Dynamic Dispatch
- @main
- 이것이나의다정입니다
- AnyCancellable
- swift
- SwiftUI
- Combine vs Async/Await
- SwiftData
- combine
- SFSafariView
- The Composable Architecture
- async/await
- await
- App Thinning
- @ObservedObject
- ScrollViewProxy
- Custom URL Scheme
- @StateObject
- architecture
- fileprivate
- @NameSpace
- matchedGeometryEffect
- ios
- MVVM
- Universal Link
- Today
- Total
홍로그
SwiftUI ScrollView, ScrollViewReader, ScrollViewProxy 본문
📖 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는 그 인터페이스를 실제로 구현하는 프록시 객체입니다.
참고
https://developer.apple.com/documentation/swiftui/scrollview
https://developer.apple.com/documentation/swiftui/scrollviewreader
https://developer.apple.com/documentation/swiftui/scrollviewproxy
'iOS' 카테고리의 다른 글
WWDC23 SwiftData (0) | 2023.06.14 |
---|---|
SwiftUI @NameSpace (0) | 2023.06.13 |
Swift @main (0) | 2023.06.07 |
App Thinning (0) | 2023.06.05 |
MVP 패턴 (2) | 2023.06.04 |