Chikong

Nano Challenge 를 진행하는데 횡 스크롤을 구현해야 해서 ScrollView를 공부해 보았다

공식문서 내용

스크롤 뷰는 스크롤 가능한 콘텐츠 영역 내에서 콘텐츠를 표시합니다. 사용자가 플랫폼에 적합한 스크롤 제스처를 수행할 때, 스크롤 보기는 기본 콘텐츠의 어떤 부분이 보이는지 조정합니다. ScrollView는 수평, 수직 또는 둘 다 스크롤할 수 있지만 줌 기능을 제공하지는 않습니다.

• 어..? HIG에는 적절한 줌 기능을 제공하라고 했는데..? 그건 페이지 컨트롤을 사용할때 한정인가보다.
• 아직까지는 줌 기능이 필요하지 않으니 추후에 스크롤과 줌 기능이 필요하면 그때 다시 찾아보자.
• 일단 기본적으로 ScrollView는 줌 기능을 제공하지 않음!

정의

struct ScrollView<Content> where Content : View

→ 정의를 보면 View를 반환하는 구조체로 되어있다.

이 말은 우리는 그냥 ScrollView{ ... return view } 의 형태로 구현하면 된다!

ScrollView 사용해보기

ScrollView() {
	VStack {
		ForEach (0..<20) { i in
			Text("\\(i)")
		}
	}
}

→ 결과

• ScrollView의 기본 Default 값은 vertical 이라는것을 알수 있다.
• 스크롤 뷰 내의 구성 요소들을 수직으로 정렬하기 위하여 VStack 에 요소를 넣어주고 구성하면 된다!
• 내가 필요한 것은 횡 스크롤 이므로 구성 요소를 HStack으로 구성하면 되려나?

ScrollView() {
	HStack {
		ForEach (0..<20) { i in
			Text("\\(i)")
		}
	}
}

→ 결과

응..? 뭔가 이상하다 스크롤도 안될 뿐더러 요소들이 아주 이상하게 배치되어 있다

• 횡 스크롤을 사용하려면 ScrollView 에 파라미터로 .horizontal 을 설정하자!

ScrollView(.horizontal) {
	HStack {
		ForEach (0..<20) { i in
			Text("\\(i)")
		}
	}
}

→ 결과

• 원하는 대로 동작이 나왔다

아!! 스크롤뷰는

• Default 값으로 수직 스크롤이 되는구나
• 횡 스크롤을 구성하려면 horizontal 을 넣어줘야 하는구나!
• 스크롤내의 요소들을 스크롤 방향에 따라 구성해야 하는구나!

라는 점을 배웠다

그런데 ScrollView의 컴포넌트 중에 showsIndicators 라는 것이 있다. 이게 뭔가 찾아볼까 하다가 직접 해보며 익히는게 좋을거같아 차이를 확인해 봤다

showsIndicators = true

ScrollView(.horizontal, showsIndicators = true) {
	HStack {
	ForEach (0..<20) { i in
		Text("\\(i)")
		}
	}
}

→ 결과

⇒ 변한게 없다..? 그럼 false 도.. 확인해보자

showsIndicators = false

ScrollView(.horizontal, showsIndicators = fasle) {
	HStack {
		ForEach (0..<20) { i in
			Text("\\(i)")
		}
	}
}

→ 결과

⇒ 아! 차이가 보인다

HIG에 명시되어 있는 스크롤 표시기가 이 내용인가 보다!

스크롤이 되었을때, 인디케이터가 표시된다 현재 스크롤이 어느지점쯤에 있는지 보여준다!

정리

• showsIndicators 는 스크롤 진행 표시기? 정도로 이해하면 될거같다
• 기본 default값으로 true 가 설정된다
• false를 설정하면 표시기를 없앨 수 있다

ScrollView를 적용한 결과

아. 뿌듯. 이상.