[iOS] Frame vs Bounds.

 부스트코스 iOS 앱 프로그래밍을 듣고 있던 도중, 개념이나 이론에 관하여 공부한 것을 정리하기 위해 글을 씁니다!

⚠️ 공식문서를 읽고 제가 해석(Google translate), 의역한 정보도 포함되어 있으니, 잘못된 정보는 댓글로 알려주시기 바랍니다.😄

 

 

 

View

 View는 UIView 클래스 또는 그 하위클래스의 인스턴스로써, 윈도우의 한 영역에서 컨텐츠(이미지, 텍스트, 등등 ...)를 보여주는 역할을 합니다.

 

오늘 살펴볼 프레임과 바운드는 UIView의 Property들 입니다. 

 

[출처] 부스트코스 iOS 앱 프로그래밍

Frame

뷰의 프레임은 상위 뷰(SuperView)의 좌표계를 기준으로, 해당 View의 위치 와 크기를 나타내는 사각형입니다. -> 애플 개발자 문서

Bounds

뷰의 바운드는 해당 뷰 자신의 좌표계를 기준으로 위치 및 크기를 나타내는 사각형입니다. -> 애플 개발자 문서

 

 

이렇게 말로만 하면 잘 모르겠죠..? 아래에는 그림으로 설명하겠습니다.

 

---

 

 

 

우선, 우리는 뷰의 사각형을 정의하기 위해서 CGRect라는 구조체를 사용합니다. CGRect는 다음과 같이 다양한 인자로 이루어져 있는데요! x,y는 사각형의 시작 위치(origin)을 뜻합니다.

 

 

 

 

코드로 살펴봅시다!

 

 viewRectangle 이라는 이름으로 CGRect구조체의 인스턴스를 생성하고, 할당해주었습니다. x,y,width,height 각각 100,100,200,200 으로 초기화 해주었는데요, 위에서 말했듯 x,y는 사각형이 시작하는 좌표 (x,y)를 말합니다. (위 그림에서 origin) width와 height는 말 그대로 CGRect 사각형의 너비와 높이입니다!

 

 그리고 그것을 이용하여 subView라는 이름의 view를 하나 만들어 주었습니다! 이제 subView의 frame과 bounds, center를 프린트해봅니다.

 

⚠️ iOS 좌표계의 시작은 왼쪽 위가 (0,0) 이고, 수평축은 x축, 수직축은 y축으로 나타냅니다.

 

 

 

 

 프린트한것을 봅시다, subView의 프레임의 CGRect를 보면, (100,100) 에서 사각형이 시작되고, 높이 200과 너비 200을 가지는 사각형 이라는 것을 알 수 있습니다. 프레임은 상위 뷰(Super View)의 좌표계를 기준으로 하기 때문에, 위와 같이 (100,100)이 프레임의 시작점(origin)이 되는 것입니다.

 

 위에서 바운드는, 자기 자신의 좌표계를 기준으로 뷰의 사이즈와 위치를 나타낸다고 했으니, 바운드의 origin은 (0,0)이 됩니다. 즉, 자신 View의 왼쪽 위가 (0,0) 이 된다는 말입니다! subView의 바운드의 CGRect를 보면, (0.0, 0.0, 200.0, 200.0) 이므로 (0.0, 0.0) 의 origin을 갖고, width와 height로 200을 갖는다고 프린트되어 있음을 알 수 있습니다. 그 아래에는 서브뷰의 바운드 Origin 또한 (0.0, 0.0) 으로 프린트 되어있네요!

 

 추가적으로 프린트한 center 를 보면, (200,200) 으로 나와있는데, 이는 center 또한 super View 좌표계를 기준으로 하고 있음을 알 수 있습니다. 또한 center 도 UIView의 프로퍼티이므로 프레임과 바운드처럼 접근이 가능합니다!

 

 

 

오늘은 Frame과 Bounds에 대해 간단히 알아보았는데요, 부족한 부분이나 추후에 더 알게되는 내용이 있다면 업데이트 하도록 하겠습니다 😉

지적과 댓글은 감사합니다 😆

 

References.

애플 개발자 문서

부스트코스 iOS 앱 프로그래밍