Frame, Bounds 알아보기 + CGRect, CGPoint, CGSize...

슆공부·2022년 6월 27일

Frame과 Bounds는 UIView의 instance property이다.

둘의 타입이 CGRect로 되어있는데, 이건 또 뭘까?
이것을 알기 위해
CGPoint, CGSize, CGRect 순으로 알아보겠다.

CGPoint란?

2차원 좌표계의 점을 포함하는 구조체이다.
ios에서 (1,2) x축 y축을 나타내주는 것이다.

CGSize란?

정의 : 너비와 높이 값을 포함하는 구조체
CGSize도 "사각형"으로 나타내지곤 하지만, CGSize는 너비와 높이의 값입니다. 실제로 사각형으로 간주되지 않아요. 하지만, 일러스트레이션을 위해 아래그림과 같이 나타내지곤 한답니다.

CGRect란?

정의 : 사각형의 위치와 크기를 포함하는 구조체
CGRect는 CGSize와 다르게, 사각형이에요.(Rectangle-사각형)
CGRect는 너비와 높이를 가지고 있을 뿐만 아니라 원점(origin)을 가지고 있습니다.

먼저, 구조체 변수로는 origin과 size라는 것을 가지고 있네요.
origin의 타입은 CGPoint, size의 타입은 CGSize네요.
현실에서는 너비와 높이만 있어도 사각형을 그릴 순 있지만, iOS에서는 "위치"를 알아야 그릴 수 있다.

CGRect는 사각형의 위치와 크기를 포함하는 구조체라고 했다. 위치는 origin, 크기는 size를 말한다.

그 위치를 CGPoint로 나타내고 크기, 즉 넓이와 높이를 CGSize로 정해진다.

init이 엄청 많은 것을 볼 수 있다.
물론 CGPoint와 CGSize를 쓰지않고 바로 x, y, width, height를 바로 줄 수도 있다.

이제 CGRect에 대해 알아보았으니 frame, bounds를 알아보겠다. 타입이 CGRect이니, 사각형으로 그려지고 origin, size를 갖고 있다.(x, y, width, height)

Frame

정의 : SuperView(상위뷰)의 좌표시스템안에서 View의 위치와 크기를 나타낸다.
frame의 핵심은 SuperView(상위뷰)이다.

상위뷰의 젤 좌측, 위를 (0, 0)으로 보고 이에 대해서 subview의 위치가 얼마나 떨어져 있는지를 나타내는 것이다. 부모뷰를 기준으로 origin의 위치를 정해서 사각형을 그려준다.

위와 같이 한단계 위의 상위뷰만을 기준으로 자신의 위치를 정하기 때문에 frame의 origin을 정하게 되면 다른 뷰는 상관없이 자신의 부모뷰을 기준으로만 움직이게 된다. 자식뷰에게 부모뷰 좌측 위는 항상 (0,0)인 것이다.

Bounds

정의 : View의 위치와 크기를 자신만의 좌표시스템안에서 나타내준다.
bounds의 핵심은 자신만의 좌표시스템을 쓴다는 것이다.

상위뷰와 전혀 상관 없이 오직 자신이 기준이어서, 자신만의 좌표계 (0,0)를 기준으로 위치 (x, y) 및 크기 (너비, 높이)로 표현되는 사각형이다. 그래서 Bounds의 origin은 default로 (0,0)입니다.

subview의 bounds를 변경시키면 웃기게도 서브뷰가 아닌 그안에 있는 imageview의 위치가 변한다.

Q : 왜 subView의 origin을 바꿔줬는데, 그 안에 있던 imageView가 움직일까?
!A : Bounds는 상위뷰 안에서의 좌표가 아닌 "자신만의 좌표시스템"을 가진다고 그랬죠? Bounds를 변경하는 것은 해당 위치에서 View를 다시그리라는 의미가 돼요. Bounds는 상위뷰와 아무런 관련이 없으므로, subView는 움직이지 않는 것 처럼 보이고 그 안에있던 imageView가 움직이는 것 처럼 보이는 것입니다.

이래서 Bounds는 Scroll View 핵심이다. 스크롤링하는 것이 bounds를 변경해주는 것과 같다.

만약 scrollview 안에 이미지뷰가 있을 때 bounds origin을 변경하게되면 이미지는 가만히 있고 스크롤뷰의 bounds를 변경시켜 뷰를 다시 그린 것이지만 옆에 있던 이미지가 이동한 것처럼 보이는 것이다.

그래서,
스크롤뷰의 frame origin을 변경하게 되면 상위뷰인 view를 기준으로 이동하게 되기 때문에

위와 같이 보이게 된다.