[iOS] 프레임(frame)과 바운드(bounds)

UIKit에서 기본이 되는 좌표계는 좌측 상단 모서리를 원점으로 하며, 제일 왼쪽의 제일 위의 지점이 (0, 0)입니다.

원점으로부터 아래쪽, 오른쪽 방향으로 확장됩니다. 좌표값은 해상도와 상관없이 콘텐츠의 위치를 잡는 부동소수점을 사용하여 나타냅니다.

• 프레임(frame)은 뷰의 크기와 위치를 슈퍼뷰(SuperView)의 좌표계를 기준으로 합니다.
• 바운드(bounds)는 뷰의 크기와 위치를 해당 뷰 자신의 좌표계를 기준으로 합니다.

frame과 bounds

 

 

frame과 bounds는 CGRect라는 구조체를 통해서 표현됩니다. CGRect는 사각형의 크기와 위치에 대한 정보를 담고 있습니다.

• CGRect의 origin프로퍼티는 CGPoint 타입으로 사각형의 시작점을 나타냅니다.
• CGRect의 size프로퍼티는 CGSize타입으로 사각형의 높이와 너비를 나타냅니다.
• CGPoint는 좌표를 표현할 수 있는 x와 y를 갖고 있습니다.
• CGSize은 넓이와 높이의 값인 width와 height를 갖고 있습니다.
• CGPoint의 x, y와 CGSize의 width, height는 모두 부동소수점 타입인 CGFloat으로 표현됩니다.

 

• firstSubView는 상위뷰(SuperView)를 기준으로 frame x: 100, y: 100의 위치를 갖고 넓이 200, 높이 300인 뷰 입니다.
• secondSubView는 상위뷰(firstSubView)를 기준으로 frame x: 40, y: 40의 위치를 갖고 넓이 100, 높이 200인 뷰 입니다.

firstSubView와 secondSubView의 bounds값을 출력하면 위치 x: 0, y: 0 입니다. -> 자신만의 좌표계를 가짐

 

firstSubView의 bounds origin 변화

• firstSubView의 bounds origin을 x: -100, y: -100 으로 변경했습니다.
• first와 second 각각의 frame은 변화가 없으며, first의 bounds(자신의 좌표계)만 변했습니다.

그런데 firstSubView가 아닌 secondSubView의 위치가 바뀌는 것처럼 보이고, frame을 이동시킬 때와 반대 방향으로 이동하는 것처럼 보입니다. firstSuvView의 bounds의 좌표를 변경하면 자신의 상위뷰(SuperView)의 해당 지점으로 이동하는 것이 아닌 자신의 하위뷰(secondSubView) 기준 x: -100, y: -100 지점에서 다시 사각형을 그리게 됩니다.

 

bounds는 상위 뷰와 관련이 없고, 자신의 좌표계를 나타내기 때문에 firstSubView는 움직이지 않고, 그 안에 secondSubView가 움직이는 것처럼 보입니다.

 

firstSubView의 bounds size 변화

firstSubView의 bounds size를 width: 100, y: 150 으로 변경했습니다. (50% 크기로 지정)

 

secondSubView의 frame과 bounds 값은 변화가 없습니다.

 

firstSubView의 bounds를 먼저 살펴보면 size는 width: 100, height: 150 로 변하고, bounds의 orgin(x, y)은 변화가 없습니다.

firstSubView의 frame 값도 변화가 있습니다. size는 역시 지정한 값인 width: 100, height: 150 로 변했고, origin 값은 줄어든 width와 height의 크기의 절반만큼(한쪽 기준으로 줄어드는 게 아닌 양쪽에서 반씩 줄어들기 때문) 각각 증가합니다.

 

 

 

참고자료

m.blog.naver.com/PostView.nhn?blogId=jdub7138&logNo=220412903604&proxyReferer=https:%2F%2Fwww.google.com%2F

zeddios.tistory.com/203