컨텐츠 영역 높이에 따른 스크롤 가능 여부 설정

안녕하세요.

 

SwiftUI의 ScrollView는 컨텐츠 영역이 화면 영역보다 크든 작든 항상 스크롤이 가능합니다.

 

만약, 컨텐츠 영역이 화면 영역보다 작은 경우 스크롤이 안되도록 하고 싶으면 어떻게 구현해야 하지?? 라는 생각이 들었고..

 

그 방법을 구글링해서 찾았습니다ㅎㅎ...

 

제가 구현한 것은 아니기 때문에... 이번에는 구글링한 코드를 분석하는 시간을 가져볼까 합니다.

(출처와 함께 전체 코드도 함께 첨부하니, 필요하실 경우 참고해 주세요.)

 

---

# 출처

https://stackoverflow.com/questions/62463142/swiftui-make-scrollview-scrollable-only-if-it-exceeds-the-height-of-the-screen

SwiftUI: Make ScrollView scrollable only if it exceeds the height of the screen

 

 

# 전체 코드 및 사용방법

 

컨텐츠 영역의 높이가 화면 높이보다 낮아서 스크롤할 필요가 없는 경우

 

 

컨텐츠 영역의 높이가 화면 높이보다 높아서 스크롤이 가능한 경우

 

 

 

 

# 코드 분석

 

(1) & (2) ContentView에 커스텀 ViewModifer를 적용했네요. OverflowContentViewModifier를 살펴봅시다.

 

(3) ContentView의 부모뷰(여기선 화면 전체 영역이 되겠죠)의 크기를 알기 위해 GeometryReader를 사용했습니다.

즉, 여기서 geometry 변수는 ContentView의 부모뷰 크기를 알고 있습니다.

 

(4) ContentView의 크기를 알기 위해서 background 수식어와 함께 GeometryReader를 사용했습니다.

GeometryReader 영역은 현재 가능한 최대 영역만큼의 크기를 가지기 때문에, background 수식어 안에 있는 GeometryReader의 크기는 ContentView랑 동일합니다.

즉, contentGeometry 변수는 ContentView의 크기를 알고 있기 때문에 contentGeometry의 높이가 geometry의 높이보다 클 경우 스크롤 가능하도록 활용할 수 있습니다.

 

(5) contentGeometry 변수는 GeometryReader 안에서만 사용 가능합니다.

GeometryReader 안에 Color.clear 뷰를 넣고 onAppear 수식어 안에 계산식을 넣어줄 겁니다.

 

(6) ContentView의 높이가 ContentView의 부모뷰의 높이보다 클 경우 @State 프로퍼티인 contentOverflow 변수를 true로 설정합니다. (그 반대는 false로 설정하겠죠?)

 

(7) & (8) background를 Color.clear로 설정한 ContentView 뷰에 ViewBuilder 수식어를 적용합니다.

적용한 ViewBuilder 수식어는 contentOverflow = true이면 ContentView를 ScrollView로 래핑한 새로운 뷰를 반환하고 contentOverflow = false이면 ContentView를 그대로 반환합니다.

 

 

 

아하!

 

쉽게 말해서, ContentView의 높이가 부모뷰의 높이보다 클 경우 ContentView를 ScrollView로 래핑해서 사용하고, 높이가 낮다면 ContentView를 그대로 사용하는 것이네요!!

 

이해했습니다ㅎㅎ 

 

 

---

이번 글은 여기서 마무리.