[iOS] Frame 과 Bounds 의 공통점과 차이점

공통점

iOS 에서 Frame 과 Bounds 는 뷰의 좌표와 수치를 나타내는 구조체입니다.

 

따라서 UIView 인스턴스이거나 UIView 클래스를 상속한 인스턴스는 .frame 과 .bounds 속성을 가지고 있습니다.

 

좌표는 위치를 표현하는 수단이고, iOS 에서는 2차원 좌표계를 사용합니다.

 

수치는 공식문서에 `dimensions` 라는 단어로 표현되어 있고, 여기서는 width(너비) 와 height(높이) 값을 나타냅니다.

 

우선 Frame 과 Bounds의 타입은 모두 CGRect 입니다.

 

그리고 CGRect 의 주요 속성은 origin 과 size 입니다. origin 은 CGPoint 타입, size 는 CGSize 타입입니다.

 

즉, Frame 과 Bounds 는 좌표를 orign 속성으로, 크기(혹은 수치)를 size 속성으로 표현합니다.

 

좌표의 기준은 왼쪽 상단부터 (0,0) 이고 x축 y축은 좌표평면계와 동일합니다. 단위는 포인트 입니다.

 

 

 

이들 앞에 붙는 CG는 Core Graphics 프레임워크를 가리키며, CG가 붙은 타입들은 관련 프레임워크에서 사용됩니다.

CGRect와 CGPoint, CGSize의 구성은 글 아래에서 다루었습니다.

추가적으로 CGPoint 는  CGFloat 타입의 속성 x , y 를 가지고 있는데, CGFloat 타입은 64비트 환경에서 Double 과 같습니다.

---

 

차이점

Frame의 특징

var frame: CGRect { get set }

 

뷰의 특징 중 하나는 다른 뷰를 포함할 수 있다는 것 입니다.

이런 뷰를 컨테이너 뷰라고 부릅니다.

 

컨테이너뷰에서 상위계층의 기존 뷰를 Superview , 하위 계층의 포함된 뷰를 Subview 라고 부릅니다.

 

Frame 은 Supreview 를 기준으로 자신의 위치와 크기를 표현합니다.

 

아래 코드를 보시면, CGRect 타입 은 변수 origin 과 size로 구성되어있음을 볼 수 있습니다.

 

origin은 Superview에서 해당 뷰의 위치 를 나타내고,

size 는 width 와  height 로 크기 를 나타냅니다.

 

var frame: CGRect

/* CGRect 의 구조 */
struct CGRect {
  var origin: CGPoint
  var size: CGSize
}

/* CGPoint 의 구조 */
struct CGPoint {
  var x: CGFloat
  var y: CGFloat
}

/* CGSize 의 구조 */
struct CGSize {
  var width: CGFloat
  var height: CGFloat
}

 

설명은 이 정도에서 맺고 Xcode에서 콘솔에 값을 직접 찍어서 확인해 보겠습니다!!🙂

 

 

초기 설정

 

 

위 사진에서 Red View 와 Green VIew 의 Superview 는 모두 View 라고 적혀있는 최상위 뷰(Content View)로 같습니다.

---

 

 

이제 Green View 를 이동시켜 보겠습니다.

 

아래 첫번째 사진은 단순히 Green View를 이동 시킨 것입니다.

 

아래 두번째 사진은 이동한 Green View 의  Superview 를 Red View 로 변경 한 것입니다.

 

Superview 변경에 따른 frame 속성의  x, y 값 변화를 자세히 살펴 봐 주세요!

 

 

 

 

 

 

 

위 사진에서,  Green View 의  frame 속성의 x, y 값이 각각 `77.0 -> 0` 으로 `265.0 -> 70.0` 으로 변경되었습니다.

 

Frame 은  Superview 를 기준으로 자신의 위치를 나타내기 때문입니다.

 

크기는 위치에 영향을 받지 않고, Green View 의 크기 자체도 변경되지 않았으니 그대로 입니다.

 

우리가 생각해봐야될 것은 무엇일까요?

1. 겉보기에는 똑같이 생겼지만, 뷰의 계층 구조가 다를 수 있다는 것과

또한 뷰의 계층 구조는 Document Outline 에서 간단하게 확인할 수 있습니다

 

2. Frame에 의미를 다시 한번 상기하고 넘어가는 것 정도가 되겠습니다.

Superview 를 기준으로 x, y 값을 정한다는 것!

 

---

 

Bounds의 특징

var bounds: CGRect { get set }

 

Bounds 는 뷰 자신을 기준으로 뷰의 크기만을 나타냅니다.

 

실습에 사용한 Red View 와 Green View 의 bounds 값을 찍어 보겠습니다.

 

 

 

 

bounds 의 origin은 자신을 기준으로 하므로 x, y 값은 0.0 으로 나오는 것을 확인할 수 있습니다.

 

{ get set }  이므로 값을 수정하면 뷰가 어떻게 변하는지 직접 확인해보시면 좋겠습니다.

 

 

 

끝!

---

 

참고하면 좋은 자료🍯

1. [UIView - frame] developer.apple.com/documentation/uikit/uiview/1622621-frame
2. [UIView - bounds] developer.apple.com/documentation/uikit/uiview/1622580-bounds

🤖🟢[우짱의 iOS 블로그]🔵💻

iOS를 공부하면서 배운 내용을 기록하고 있습니다.