Overview
UIView 객체의 위치와 크기를 결정하는 두 프로퍼티는 frame과 bounds입니다. 이번 포스팅을 통해 frame과 bounds가 구체적으로 각각 어떤 역할을 하는지 알아봅시다.
frame
공식문서에 따르면 뷰 객체의 frame 속성은, 해당 객체의 슈퍼 뷰의 좌표계내에서 위치와 크기를 나타낸다고 나와있습니다. 이 때 슈퍼 뷰는 바로 한 계층 위의 뷰를 의미합니다.
세컨드 뷰는 하늘 색 뷰의 자식 뷰입니다. (세컨드 뷰의 슈퍼 뷰는 하늘 색 뷰라는 뜻입니다.)
이 때, 세컨드 뷰의 frame은 하늘색 뷰의 origin(좌측 상단)을 기준을 삼아 결정됩니다.
위는 세컨드 뷰의 frame.origin.x, frame.origin.y를 출력한 결과입니다.
- 세컨드 뷰의 origin은 (53, 94)로, 하늘 색 뷰의 좌측 상단을 기준으로 오른쪽으로 53만큼, 아래쪽으로 94만큼 떨어져있다는 뜻입니다.
위는 세컨드 뷰의 frame.size.width, frame.size.height를 출력한 결과입니다.
- 세컨드 뷰의 size는 (134, 251)로, 가로의 길이는 134고 세로의 길이는 251임을 의미합니다.
bounds
공식문서에 따르면 뷰 객체의 bounds 속성은, 뷰 객체 자신의 좌표계내에서 위치와 크기를 나타낸다고 나와있습니다. frame 속성은 슈퍼 뷰의 좌표계내에서 위치와 크기가 결정되는 반면, bounds 속성은 자신만의 좌표계내에서 위치와 크기가 표현된다는 뜻입니다.
다시 그림과 bounds 속성을 출력해보면서 frame과 bounds가 어떤차이가 있는지 비교해봅시다.
- 세컨드 뷰의 bounds 속성은 하늘 색 뷰의 영향을 전혀받지 않고 위치와 크기가 표현된다고 했습니다. 한 번 확인해봅시다.
- 세컨드 뷰의 bounds.origin은 (0,0)입니다. 즉, 뷰 객체의 bounds.origin은 (0,0)이 기본 값이라는 뜻입니다.
- 그럼 bounds.size도 한 번 확인해봅시다.
- 세컨드 뷰의 frame.size와 같게 width와 height가 출력됨을 알 수 있습니다.
Q. 그럼, 뷰 객체의
frame.size와bounds.size는 같은거 아니냐?
A. 다릅니다!
frame.size VS bounds.size
- 회전하지않은 경우, 세컨드 뷰 속성의 frame과 bounds를 확인해봅시다.
- 세컨드 뷰의 frame.size와, bounds.size는 아직 차이가 없습니다.
회전 후 bounds
- bounds 속성은 앞에 설명했듯이 자신만의 좌표계 속에서 결정됩니다. 즉, origin은 (0, 0)이 유지되고 width와 height도 회전했음에도 유지되는 것을 볼 수 있습니다.
- 뷰 객체를 감싸는 정사각형의 bounds 속성이라고 볼 수 있겠죠?
회전 후 frame
-
frame 속성은 자신의 슈퍼 뷰의 좌표계속에서 결정됩니다. 이 때 기준은, 뷰 전체를 감싸는 사각형이 기준이된다고 합니다. 즉, 회전하기 전의 frame.size는 회전 후의 frame.size 보다 반드시 작게됩니다.
-
세컨드 뷰를 감싸는 빨간 사각형의 frame을 출력한 것이라고 할 수 있습니다.
공식문서에서는 뷰 객체에tramsform객체가 할당되면 뷰 객체의 frame이 바뀌기때문에, frame을 변경하기보단, center를 변경하라고 합니다.!!
center는 뷰 객체의 frame을 기준으로 한 중심점의 x,y좌표로써, 뷰 객체가 회전에도변함이없기때문!
요약
소들이님 블로그를 참고했습니다.
참고자료
https://babbab2.tistory.com/44
https://developer.apple.com/documentation/uikit/uiview/1622621-frame
https://developer.apple.com/documentation/uikit/uiview/1622580-bounds
