frame과 bounds는 어떻게 다른걸까?
UIView
의 크기나 위치를 변경할 때 대충 frame
과 bounds
를 건드려본 경험은 많다.
하지만 둘이 어떻게 다른 것인지 제대로 알아본 적이 없어 정리해보고자 한다.
둘이 혼동되는 부분이 많으니 비교하는 흐름으로 알아보자!
우선 사전적인 정의를 알아보자
음.. 틀, 뼈대, 범위
로 보아 자세히는 몰라도 크기와 구역에 관한 의미인 것을 알 수 있다.
그럼 공식 문서의 정의를 봐보자!
frame
The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.
상위 뷰의 좌표계에서 뷰의 위치와 크기를 설명하는 프레임 사각형.
bounds
The bounds rectangle, which describes the view’s location and size in its own coordinate system.
자체 좌표계에서 뷰의 위치와 크기를 설명하는 경계 사각형.
우선 공통적인 정의로 봐서 frame
과 bounds
는 뷰의 위치와 크기를 설명
할 때 사용된다는 것을 알 수 있다.
frame과 bounds는 뷰의 origin(위치)와 size(크기)를 결정한다.
차이점으로는 상위 뷰의 좌표계와 자체 좌표계가 눈에 띄는데 뒤에서 자세히 알아보자.
흔히 frame과 bounds는 좌표계만 다르고 size는 같다고 생각하는 경우가 많은데 size에서도 차이가 있다.
View 영역을 모두 감싸는 사각형 (회전시키면 모든 view가 들어가는 사각형의 크기)
View 자체의 영역
둘을 비교할 때 회전된 뷰의 경우에 차이점을 명확하게 알 수 있다.
초록색의 그린뷰가 있을 때 그린뷰가 회전된 경우에 frame
은 뷰롤 포함하는 빨간 점선의 size를 나타내고, bounds
는 뷰의 회전에 상관없이 뷰 자체의 size인 파란 점선의 크기를 나타낸다.
frame
과 bounds
의 차이점은 origin에서 명확하게 드러난다.
특히 bounds
의 경우가 이해하기 어려우니 잘 생각해보자.
SuperView의 원점으로부터 얼마나 떨어져 있는지
frame
의 경우는 이해하기 어렵지 않다. 왼쪽 상단 부분을 기준으로 하여 (0, 0)
을 두고 상위뷰로부터 떨어진 위치를 나타낸다.
위에 그림에서 redView의 origin이 (20, 60)
이라면 상위뷰인 blueView에서 x: 20, y:60
만큼 떨어진 위치에 있다고 보면 된다.
만약 redView의 origin을
(20, 80)
으로 변경한다면?
예상 가능한 대로 redView가 아래쪽으로 이동한 모습이 된다.
자신의 원점으로 한 좌표계에서 어디에 위치했는지
bounds
는 자기 자신을 기준으로한 좌표계를 가지기 때문에 처음 생성하면 무조건 (0, 0)이 된다.
만약 blueView의
bounds
을 (10, 50)으로 변경한다면?
(임의로 생각한 것으로 정확한 수치는 맞지 않을 수 있습니다!)
❓분명 blueView의 bounds
를 변경했는데 요상하게 redView의 위치가 변경된 모습이다.
이 부분에서 혼동을 많이 겪게 되는데 view라는 것은 눈에 보이는 부분만이 아닌 뒤에 무한한 범위를 가진다고 생각하면 쉽다.
눈에 보이는 부분은 size로 지정된 검은색 테두리의 내부일 뿐이고 bounds
를 변경하면 그 검은색 테두리가 이동하여 보여지는 모습이 변경되는 것입니다.
하지만 frame
은 변하지 않았기에 주변의 상위뷰와 위치 관계는 변하지 않고 blueView 내부의 보이는 부분만 변경되어 마치 redView가 이동된 것 처럼 보이는 것입니다!
잘 이해가 되지 않을 수도 있지만 redView가 붙어있는 거대한 종이에서 카메라에 보이는 부분이 변경됐다고 생각하시면 될 것 같습니다 :)
정리하자면
frame
bounds
이제 frame
과 bounds
제대로 이해하고 사용하기~!