GeometryReader

참고 블로그 - GeometryReader는 무엇일까?

 

1. 정의

💡 GeometryReader는 그 자체로 ‘View’이며, container 안 View 스스로의 크기와 위치를 함수

정의를 봐도 무슨말인지 모르겠다. 따라서 참고 블로그에서 이해한 내용을 요약해보겠다.

 

View를 구성할 때는 HStack, VStack, ZStack을 적절히 사용해서 만들 수 있다. 때때로 하위뷰들의 위치나 크기(모양)을 직접 조작해야하는 경우가 생긴다. 이때 사용하는 것이 GeometryReader이다.

하위뷰의 별다른 설정이 없다면 상위뷰가 제안해준 곳에 위치한다. 

 

 

 

2. GeometryReader 사용해보기

 

GeometryReader x / GeometryReader o

[왼쪽 사진]

• Text는 특별한 수식어가 없기 때문에 가장 상단에 위치하고 남은 공간을 RightView가 채우고 있다.

[오른쪽 사진]

• 왼쪽 사진과 마찬가지로 Text는 특별한 수식어가 없기 때문에 가장 상단에 위치한다.
• GeometryReader를 사용했기 때문에 RightView에서 자신의 위치를 선택할 수 있다.
• GeometryReader를 사용해서 VStack이 제안한 크기와 위치를 geometry.size.width,geometry.size.height로 접근했다.
• 따라서 Rectangle의 위치는 VStack이 제안한 위치의 1/2, 크기를 VStack이 제안한 크기의 1/2사이즈로 설정했다.

 

💡 위의 예시에서 알아가야할 점: GeometryReader는 상위View가 (GeometryReader)에게 제안한’ 위치, 크기에 대한 정보에 접근할 수 있도록 돕는 도구 💡

 

 

 

3.  GeometryProxy

💡 GeometryProxy는 GeometryReader, 즉 Container View의 크기와 위치에 접근할 수 있도록 해준다.

 

GeometryProxy는 2개의 프로퍼티, 1개의 메서드, 1개의 첨자를 제공해서 지오메트리 리더의 레이아웃 정보를 자식 뷰에 제공할 수 있다.

 

구분	설명
size	GeometryReader의 크기를 반환한다.
safeAreaInsets	GeometryReader가 사용된 환경에서 SafeArea에 대한 크기를 반환한다.
frame(in:)	특정 좌표계를 기준으로 한 프레임 정보를 제공한다.
subscript(anchor:)	자식 뷰에서 anchorPreference 수식어를 이용해 제공한 좌표나 프레임을 GeometryReader의 좌표계를 기준으로 다시 반환하여 사용하는 첨자이다.

[사용 예시]

SafeAreaInsets의 top과 bottom이 0이 나오는 이유는 GeometryReader가 할당 받은 최대의 영역을 모두 사용했기 때문이다. 

 

4. Frame

💡 상위뷰로 부터 제안 받은 공간

구분	설명
global	화면 전체 역역을 기준으로 한 좌표 정보
local	지오메트리 리더의 영역을 기준으로한 좌표정보
named	명시적으로 이름을 할당한 공간을 기준으로한 좌표 정보(커스텀 좌표 공간)

사용법 참고