SwiftUI, Layout 프로세스를 알아보자3 (feat, Offset와 Position)

 

안녕하세요. 린다입니다.

 

오늘은 2번째 글에 이어서 제가 offset과 position을 처음 접할 때

헷갈렸던 부분을 정리한것을 작성해보려고 합니다.

 

바로 대체 (0, 0)의 기준은 어디이며, 어떻게 위치되는 것이지?

가 항상 헷갈렸는데요..

 

이를 올바르게 이해하기 위해서는 

(https://sy-catbutler.tistory.com/67)

(https://sy-catbutler.tistory.com/68)

를 먼저 보고오시는 걸 추천드립니다.

 

 

 

1. Offset

- 뷰를 오프셋 매개변수에 지정된 수평 및 수직 양으로 계산한다.(배치한다)

 

 

offset의 위치가 200, 200인데 어디를 기준으로 200, 200이고 position과는 왜 다를까?

이유를 알기 위해서는 레이아웃 프로세스를 알아야함! 지금 뷰의 레이아웃 프로세스는… (ZStack 제외하고)

 

레이아웃 순서) RootView → offset → background(pink) → padding → text

• text 자신의 길이를 bounds로 갖음 >> padding
• padding의 bounds == text bounds + ()안의 숫자 (지금은 default)
• padding >> background(pink), padding bounds == background(pink) bounds가 되며,
  background는 자식뷰를 자신의 뷰 중앙에 배치함
• backgrounds > offset, bounds 동일, offset으로 인해 200, 200 에 자식뷰 배치
• offset > RootView, RootView 자식뷰를 자신의 뷰 중앙에 배치

그래서.. background 레이아웃을 통해서 중앙의 (0,0)으로부터 200 by 200이 떨어지도록 위치된것!

 

 

 

 

그렇다면 중앙의 (0, 0)은 어디일까?

+) 200, 200은 실제로 얼마일까?

• (0,0)의 중심을 기준으로 200 by 200에 offset의 중심이 있는것을 확인할 수 있다.
• 즉, 중심을 기준으로 모두 계산되어 배치되는것.

 

 

 

다른 예시로 확인해보기

• 이렇게 확인해봐도 (0, 0)의 중심을 기준으로 Text의 중심이 50 by 50 만큼임
• padding은 WWDC 정리 글을 보면 알겠지만. 원래 레이아웃에 더해지는 bounds임을 명시해서 생각할것!
• padding의 레이아웃 원리는 위에 첨부해놓은 링크 첫번째를 참고

 

 

 

 

2. Position

이 뷰의 중심을 부모 좌표 공간의 지정된 지점에 배치함

• 포지션은 자신에게 제공된 전체공간 자체를 bounds로 사용함
• ** 현재는 not ignoreSafeArea 임! **
• 자신의 bounds는 전체 공간이며, 매개변수로 받는 x, y는 공간에서의 위치를 의미
• 그렇기 때문에 전체 공간의 0,0 에서 200 by 200 떨어진곳에 배치됨

 

그렇다면 0,0은 어디인가?

• not ignoreSafeArea 일 때의 위치를 확인해보면 leadingTop 같은 부분임을 확인할 수 있음
• 그렇다면 어디를 기준으로 200 by 200이 만들어지는 것일까?

 

 

• 200 by 200 일때 start의 기준은 0,0 에서부터 뷰의 “중심” 까지 200인 곳을 찾아서 배치시킴!!!

 

근데 background 자체는 원래는 ignoreSafeArea가 default임

그렇다면 position에 ignoreSafeArea가 들어가면 어떻게 될까?

• safeArea가 ignore되어서 0,0은 올라가서 보여지지 않으면서, 전체적인 뷰들이 safeArea만큼씩 이동됨

 

 

 

미루고 미루던 ... position 과 offset의 블로깅 끝..!!

나중에 애니메이션에서 offset 개념이 은근? 중요해서 정리해놓고 싶었습니다.

사실과 다른게 있다면 말씀주세요!

그럼 오포끝..