Swift/Swift UI
[Collection Containers] Scroll View
내일은개발천재🎵
2022. 4. 3. 15:48
ScrollView
1. 어떤 컴포넌트인가?
- A scroll view allows users to browse content, such as text in a document or a collection of images, that’s larger than the visible area.
> Scroll view 를 통해 문서의 텍스트, 사진 등과 같은 콘텐츠를 정해진 영역보다 더 크게(많이) 볼 수 있다.
2. 언제, 어디서 사용하는가?
- The scroll view displays its content within the scrollable content region. As the user performs platform-appropriate scroll gestures, the scroll view adjusts what portion of the underlying content is visible. ScrollView can scroll horizontally, vertically, or both, but does not provide zooming functionality.
> 스크롤 가능한 영역 내부의 콘텐츠를 보여준다. 스크롤을 통해 어떤 부분을 표시할 것인지 결정하며, 스크롤은 수직, 수평으로 가능하다. (확대 기능은 제공하지 않는다.)
3. 어떻게 사용하는가?
// Declare
struct ScrollView<Content> where Content : View
var body: some View {
ScrollView {
VStack(alignment: .leading) {
ForEach(0..<100) {
Text("Row \\($0)")
}
}
}
}
- In the following example, a ScrollView allows the user to scroll through a VStack containing 100 Text views. The image after the listing shows the scroll view’s temporarily visible scrollbar at the right; you can disable it with the showsIndicators parameter of the ScrollView initializer.
> for each문을 통해 100개의 텍스트 뷰를 생성하여 VStack에 포함시킨 코드이다. 스크롤 뷰를 작동시킬 때(제스처) 스크롤 표시기가 화면에 나타나는데, 이는 사용하지 않도록 설정할 수 있다.
관련 HIG 요소
Support zoom behavior appropriately.
- If it makes sense in your app, let people pinch or double-tap to zoom in and out. When you enable zoom, set maximum and minimum scale values that make sense. For example, zooming in on text until a single character fills the screen probably doesn’t make sense in most apps.
> 핀치 제스처나 더블 탭을 통하여 확대/축소가 가능하도록 해야한다. 최대 줌인과 최소 줌아웃값을 설정해야한다. (한 화면에 한 글자가 나오는 것은 대부분의 앱과 맞지 않을 것이다.)
Consider showing a page control element when a scroll view is in paging mode.
- A page control shows how many pages, screens, or other chunks of content are available and indicates which one is currently visible. If you show a page control with a scroll view, disable the scrolling indicator on the same axis to avoid confusion. For additional guidance, see Page Controls.
> Scroll View로 Page Control를 보여주고 싶을 때에는 혼란을 방지하기 위해 같은 축의 스크롤 표시기는 보이지 않도록 설정해야한다.
Don’t place a scroll view inside of another scroll view.
- Doing so creates an unpredictable interface that’s difficult to control.
In general, display one scroll view at a time.
- People often make large swipe gestures when scrolling, and it can be hard to avoid interacting with a neighboring scroll view on the same screen. If you need to put two scroll views on one screen, consider allowing them to scroll in different directions so one gesture is less likely to affect both views. For example, when an iPhone is in portrait orientation, the Stocks app shows stock quotes that scroll vertically above company-specific information that scrolls horizontally.
> 한 화면에 두 개의 Scroll View를 사용해야할 때에는 제스처를 다르게 설정해야한다.
Document Link
Scroll Views - Views - iOS - Human Interface Guidelines - Apple Developer
A scroll view allows users to browse content, such as text in a document or a collection of images, that’s larger than the visible area. As people swipe, flick, drag, tap, and pinch, a scroll view follows the gesture, revealing or zooming content in a wa
developer.apple.com
Apple Developer Documentation
developer.apple.com
컴포넌트가 사용된 곳
 |
 |
1. 건강앱
|
2. 사진 For you 탭
|