[iOS] Bounds 와 Frame 의 차이점을 설명하시오.

해당 질문은 첫 iOS 개발 면접에서 마주했던 질문이라 기억에 강하게 남아있는 질문이다. 우선 swift 레퍼런스 문서를 보면 다음과 같이 정의를 찾을 수 있다.

Frame

The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.

Bounds

The bounds rectangle, which describes the view’s location and size in its own coordinate system.

Declaration

var bounds: CGRect { get set }

 

두 개념 모두 뷰의 위치와 사이즈를 반환하는 CGRect 타입 변수이다. 

하지만 frame은 해당 뷰가 속해있는 상위 뷰의 좌표계를 기준으로 정해진 크기와 좌표이고, bounds의 경우는 자기 자신의 좌표계를 기점으로 정해진 크기와 좌표이다. 

 

What is View?

UIView

An object that manages the content for a rectangular area on the screen.

뷰가 무엇인지부터 설명하자면 사용자의 앱 위에 그려지게 되는 Label, Switch, Button들과 같은 요소들을 모두 view라고 정의한다. SwiftUI 혹은 UIKit을 통해서 생성할 수 있으며, 이러한 뷰들은 UIView라는 클래스로 생성된 객체들이다. 해당 객체들을 통해 유저와의 상호작용이 가능하다.

 

Create a View

let rect = CGRect(x: 10, y: 10, width: 100, height: 100)
let myView = UIView(frame: rect)

뷰를 생성하기 위해선 크기와 좌표가 필요하며 이러한 좌표와 크기는 CGRect라는 형태로 표현된다. 크기와 좌표가 주어지면 해당 조건에 맞게 화면 위에 그려지게 되는 것이다.

 

CGRect

A structure that contains the location and dimensions of a rectangle.

Creating Rectangle Values

init(origin: CGPoint, size: CGSize)

Creates a rectangle with the specified origin and size.

init(x: Double, y: Double, width: Double, height: Double)

Creates a rectangle with coordinates and dimensions specified as floating-point values.

init(x: Int, y: Int, width: Int, height: Int)
Creates a rectangle with coordinates and dimensions specified as integer values.

init(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat)
Creates a rectangle with coordinates and dimensions specified as CGFloat values.

그렇다면 CGRect는 무엇일까? 위에서 얘기했듯이 뷰의 크기와 좌표계를 담는 구조체이며, 초기화하는 방법에는 여러 가지 방법이 있지만 기본적으로 CGFloat이라는 실수 형태의 자료형을 통해 크기와 좌표를 표현한다.

여기서 CG는 CoreGraphics의 약자로 그래픽 관련 즉 화면 표현에 대한 자료들은 모두 CG로 시작하는 자료형을 사용하니 알아두면 처음 보는 자료형에 대해서도 어떠한 용도로 쓰이는지 유추할 수 있다.

 

iOS의 좌표계 시스템은 뷰의 좌측 상단이 원점(0,0)이며, 화면의 수직면이 y 축이며 수평면이 x 축이다. 즉 y값이 증가하게 되면 아래로 이동하고 x값이 증가하게 되면 우측으로 이동하게 된다. 뷰에 관한 자세한 설명은 해당 글에 따로 정리해두었다.

 

frame과 bounds의 사이즈는 항상 똑같은가?

 

직관적으로 둘의 차이점에 대해 알 수 있는 예시이다. B가 기울어진 상태에서 frame의 경우, 상위 뷰 A의 좌표계에서 차지하는 크기는 좌표를 기준으로 사각형을 그려 표현하게 때문에 B의 frame은 Point(140, 65), Size(320, 320)이 반환되며 bounds의 경우 Point(0,0), Size(200,250)이 반환된다.

 

결론

frame : 상위 뷰의 좌표계 기준으로 좌표 원점과 크기를 반환
bounds : 자기 자신의 좌표계 기준으로 좌표 원점과 크기를 반환