contentShape

안녕하세요.

 

이번에는 SwiftUI 수식어 중 하나인 contentShape에 대해 공부해 봤습니다.

 

---

# contentShape

 

Defines the content shape for hit testing

 

 

hit testing을 위한 영역을 정의할 수 있다.

(hit testing에 대해선 Zedd님 글에 아주 잘 정리되어 있으니 읽어보시면 좋습니다ㅎㅎ)

 

즉, hit testing이란 터치나 드래그 같은 이벤트를 받는 것을 말합니다.

 

즉, contentShape 수식어는 터치나 드래그 같은 이벤트를 받기 위해 영역을 정의한다고 볼 수 있어요.

 

 

 

 

## 예시

가장 대표적인 예시 먼저 소개할게요.

 

아래처럼 View를 구성할 경우 Spacer 영역에는 onTapGesture 이벤트가 발생하지 않습니다.

 

 

 

이때 contentShape 수식어를 사용하면 Spacer 영역까지 포함해서 전체 VStack 영역에 대해 onTapGesture 이벤트를 받을 수 있습니다.

(onTapGesture 이벤트뿐만 아니라 다른 gesture 이벤트도 동일하게 이벤트 받을 수 있습니다.)

 

 

 

 

이번에는 다른 예시를 소개해볼까 합니다.

 

이런 View가 있다고 해볼게요.

 

Text 뷰의 높이를 최대로 늘렸으니 그만큼 터치 영역도 넓어졌을 거라 생각했지만... Text가 실질적으로 출력된 영역을 제외하곤 onTapGesture 이벤트가 오지 않았습니다.

 

 

 

그 이유는 Text 뷰의 영역을 크게 잡았다고 해서 영역 전체가 뷰가 되는 것이 아니고 실질적으로 콘텐츠가 들어가는 부분만 뷰이고 나머지는 빈 공간이 되기 때문... 이라고 생각했어요.

 

 

View Hierarchy를 보면 좀 더 명확히 알 수 있습니다. (편의를 위해 테두리는 지웠습니다.)

 

(Text 뷰의 높이를 늘렸다고 해서 Text 뷰 자체의 높이는 변하지 않았어요ㅠㅠ)

 

 

이때, contentShape 수식어를 사용하면 현재 할당된 영역만큼을 hit testing 영역으로 정의하기 때문에 onTapGesture 이벤트를 받을 수 있게 됩니다.

 

 

👍 👍 👍 

 

 

 

# 참고

- https://zeddios.tistory.com/536

- https://smnh.me/hit-testing-in-ios

- https://developer.apple.com/documentation/swiftui/view/contentshape(_:eofill:) 

- https://www.hackingwithswift.com/quick-start/swiftui/how-to-control-the-tappable-area-of-a-view-using-contentshape

 

 

---

이번 글은 여기서 마무리.