Frame과 Bounds

Frame과 Bounds는 UIView의 instance property이다.

 

일단 Xcode에서 정의된 내용을 살펴보자면 아래와 같이 설명하고 있다.

@interface UIView(UIViewGeometry)

// animatable. do not use frame if view is transformed since it will not correctly reflect the actual location of the view. use bounds + center instead.
@property(nonatomic) CGRect            frame;

// use bounds/center and not frame if non-identity transform. if bounds dimension is odd, center may be have fractional part
@property(nonatomic) CGRect            bounds;      // default bounds is zero origin, frame size. animatable

일단 두 개의 형식 모두 CGRect인 것을 확인할 수 있습니다.

그렇다면 일단 Frame과 Bounds는 모두 '사각형'으로 그려진다는 걸 알 수 있죠.

그럼 origin과 size, 즉 x, y 좌표와 width, height을 가지고 있습니다.

 

이렇게 보면 둘이 얼추 비슷해 보이는데 좀 더 확실한 구분을 위해 Apple의 공식문서를 살펴보러 갑니다.

Frame

Apple Developer Documentation

The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.
superview의 좌표 시스템에서 View의 위치와 크기를 나타냅니다.

Bounds

Apple Developer Documentation

The bounds rectangle, which describes the view’s location and size in its own coordinate system.
자신만의 좌표 시스템에서 View의 위치와 크기를 나타냅니다.

 

그럼 Frame은 SuperView를 바탕으로, Bounds는 자신을 바탕으로 위치와 크기를 표시한다는 걸 알 수 있다.

 

자 그럼 더 상세하게 알아봐 보자면

 

Frame

일단 SuperView란, View의 상위의 View 객체를 나타내는 단어이다.

SecondView의 SuperView는 FirstView가,

FirstView의 SuperView는 View가 된다.

 

그럼 Frame의 Origin(x, y)의 값은 어떻게 설정되는지 살펴보자면

SuperView의 원점, 좌측 상단을 (0, 0)으로 얼마나 떨어져 있는지를 나타낸다.

위 사진에서 SecondView의 frame의 origin 값은 (50, 25)이다.

                                 (0, 25)                                                                                                   (50, 0)

Bounds

Bounds의 Origin은 Frame과는 달리 SuperView는 아무런 상관이 없으며, 자신을 기준으로 설정된다.

자신의 원점, 좌측 상단을 (0, 0)으로 놓아두고 설정된다.

 

위 사진에서 SecondView의 Bounds의 Origin은 (0, 0)이며,

FirstView의 Origin 또한 (0, 0)이다.

 

그럼 Bounds의 Origin은 무슨 의미가 있나 싶긴 한데 실제로 사용하게 되면 조금 골치 아픈 구조를 갖고 있다.

FirstView에 bound.origin의 값을 (0, 25)로 주게 되면 우측과 같이 변하게 된다.

분명 FirstView에 값을 주었는데 실제로 움직인 건 SecondView가 움직인다.

왜죠....ㅇㅅㅇ?

왜 그런가 봤더니 FirstView의 원점을 ViewPoint로 옮긴다는 이야기다.

ViewPoint라는 건 또 뭔가 하면 화면이 보이는 포인트라고 할 수 있는데,

화면의 크기보다 이미지가 큰 경우 쉽게 알 수 있다.

 

예를 들어 그럴리는 없겠지만 위 사진을 1920*1080 사이즈로 View에 담아 두었다고 해보자

그럼 아마 실제 우리 눈에 보이는 화면은 이렇게 보이게 될 것이다.

만일 이 상황에서 Bounds를 변경한다면

이런 식으로 변경이 되는 거다.

원점이 변경되기 때문에 이미지가 움직인 것 같은 효과가 나오게 되는 방식이다.

 

자, 그럼 왜 FirstView를 변경했는데 SecondView가 변경이 되었는가는

View의 ViewPoint는 그 하위 뷰에만 영향을 끼친다'라고 할 수 있다.

 

그럼 이제 Frame과 Bounds는 언제 사용하는가?

Frame은 UIView의 위치 및 크기를 설정할 때 사용하고

Bounds는 ScrollView에서 Scroll을 할 때 주로 사용된다.