[UIKit] Frame vs Bounds

개인적인 학습 정리를 위한 글입니다. 🧐

• CGPoint : 위치를 표현하기 위한 구조체로 x좌표와 y좌표의 값을 CGFloat으로 가진다.
• CGSize : 크기를 표현하기 위한 구조체로 너비와 높이 값을 CGFloat으로 가진다.
• CGRect : 사각형의 위치(origin)와 크기(size)를 포함하는 구조체로, origin과 size를 각각 CGPoint와 CGSize로 가진다.

---

UIView는 기본적으로 frame과 bounds값을 모두 가지는데, 이들은 둘 다 CGRect이다.

 

둘 모두 좌표와 크기를 가진다는 의미이다. 둘의 차이를 검색해서 찾아보면

• Frame : SuperView의 좌표 시스템에서의 위치와 크기
• Bounds : 자신만의 좌표 시스템에서의 위치와 크기

정도로 정의되는 경우가 많다. 이것이 정확히 의미하는 바가 무엇일까?

Frame

개인적으로 Frame의 경우엔 별로 헷갈리는 부분이 없이 직관적으로 와닿았다.

frame.origin

먼저 frame의 origin에 대해 살펴보자. 특정 frame.origin은 SuperView의 frame.origin을 출발점으로 처리된다.

https://www.informit.com/articles/article.aspx?p=2474236&seqNum=4

예를 들어 rootView 아래 있는 A View가 있고, 그 아래에는 B View가 있고, A View의 frame.origin이 (10,10)이라고 해보자. A View는 rootView로부터 (10,10) 떨어진 상태가 된다. 이때 B View의 frame.origin (20,20)이라고 해보자. 그럼 rootView를 기준으로는 (30,30)만큼 떨어진 상태가 된다. A가 rootView로부터 (10,10) 떨어져 있고, B가 A로부터 (20,20) 떨어져 있기 때문이다. 즉, frame의 origin은 superView의 origin에서 얼마나 떨어졌느냐를 표현한 값이다.

frame.size

frame의 size도 비슷한 방식으로 접근하면 편하다.

superView를 기준으로 현 View가 차지하는 공간이다. 이때 View가 차지하는 공간은 해당 View의 최소, 최대 좌표를 기준으로 측정된다. 따라서 만약 View가 회전되어 이것의 최소, 최대 좌표가 변한다면 그만큼 frame.size도 변하게 된다. (위 그림에서는 바깥 테두리의 width와 height가 각각 bounds.size의 값이 된다.)

Bounds

다만 Bounds의 경우엔 조금 헷갈렸다. 자기 자신의 좌표계를 기준으로 한다고 하는데 이 값을 변경하니 subView들이 이동하기도 하고... 머리가 아팠다. 그래서 끝끝내 어느 정도 이해에 성공했는데 이때 개발자 소들이 님의 글이 매우 매우 매우 도움이 되었다. (https://babbab2.tistory.com/45)

bounds.size

bounds는 size가 더 쉬우니 size 먼저 알아보자. bounds의 size는 그냥 우리가 직관적으로 바라보는 Viw의 size 그 자체이다. View가 회전을 해서 최소,최대 좌표를 기준으로 보면 차지하는 크기가 늘어났어도 순수하게 View가 차지하는 공간만을 기준으로 하는 것이다. (위 그림에서는 파란색으로 채워진 사각형의 width와 height가 각각 bounds.size의 값이 된다.)

bounds.origin

https://stackoverflow.com/questions/1210047/cocoa-whats-the-difference-between-the-frame-and-the-bounds?rq=1

내가 어려웠던 것은 bounds의 origin이다. 결론부터 내리자면 이는 자신의 원점의 위치를 자신을 기준으로 어디에 둘지 표현한 값이라고 보면 될 것 같다. 이 값을 변경한다고해서 frame.origin처럼 자신의 위치가 이동되는 것은 아니다. 고정된 원점이 그대로 있는데 그 위치가 곧 View의 bounds.origin 쪽으로 변경되어 취급한다고 보면 된다. 따라서 SubView가 존재할 경우에는 이에 따라 위치가 옮겨진 것처럼 보인다.

 

음... 그러니까 창 뒤에 포스터가 걸려있는 이미지를 상상해보자. 이때 창은 고정되어 있고 포스터의 위치는 옮겨질 수 있다.  이 때 창의 위치를 고정하는 것이 frame.origin이고, 창의 끝과 포스터가 만나는 위치를 변경하는 것이 bounds.origin이다. 만약 bounds.origin이 (10,10)이면 창의 왼쪽 위가 포스터의 (10,10)과 만나서 보이게 되는 것이다!