iOS - Frame / Bounds

오늘은 UI개발을 할 때마다 헷갈렸던 Frame과 Bounds의 (x,y)에 대해 정리해보겠습니다.

 

애플 공식 문서는 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.'라고 정의합니다. 현재 뷰의 위치와 크기를 '(현재 뷰의) 자체 좌표계'를 기준으로 설명한다고 합니다.

 

그럼 Frame과 Bounds의 공통점과 차이점은 무엇일까요?

간단하게 두개의 뷰를 만들어 보겠습니다!

let parentView = UIView(frame: CGRect(x: 100, y: 100, width: 300, height: 300))
 //(100,100)에서 시작하는 너비,높이가 300 크기의 parentView 생성
let childView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
 //(0,0)에서 시작하는 너비,높이가 100 크기의 childView 생성
self.view.addSubview(parentView)
parentView.addSubview(childView)
// parentView의 Subview로 chilView를 추가

parentView.backgroundColor = .red
childView.backgroundColor = .yellow

그럼 parentView의 서브뷰로 childView가 들어가게 되는데요.

 

코드를 실행하면 빨간색 parentView 안에 노란색 childView가 들어간 모습을 볼 수 있습니다!

여기서 Frame과 Bounds의 차이를 알 수 있는데요. childView의 Frame의 (x,y)를 (0,0)으로 설정했더니 parentView의 (0,0) 위치부터 시작하는 것을 알 수 있습니다.

Frame은 SuperView의 좌표계를 기준으로 하고, childView의 SuperView는 parentView이기 때문입니다!

때문에 parentView의 위치가 어디이든, parentView이 Subview인 childView의 Frame의 (x,y)가 (0,0)이라면 childView는 항상 parentView의 왼쪽 위 꼭지점부터 시작하게 됩니다.

 

그럼 childView의 Frame과 Bounds를 출력해보겠습니다.

print("childView's Frame : \(childView.frame)")
print("childView's Bounds : \(childView.bounds)")

// Result
childView's Frame : (0.0, 0.0, 100.0, 100.0)
childView's Bounds : (0.0, 0.0, 100.0, 100.0)

결과를 보면 childView의 Frame의 (x, y)와 Bounds의 (x, y)는 모두 (0,0)입니다!

하지만, Frame의 (x, y)는 parentView의 좌표계를 기준으로 한 결과이고 Bounds의 (x, y)는 childView의 좌표계를 기준으로 한 결과입니다.

 

만약 childView의 Frame을 변경하고 다시 생성하면...

let parentView = UIView(frame: CGRect(x: 100, y: 100, width: 300, height: 300))
let childView = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))

self.view.addSubview(parentView)
parentView.addSubview(childView)

parentView.backgroundColor = .red
childView.backgroundColor = .yellow

print("childView's Frame : \(childView.frame)")
print("childView's Bounds : \(childView.bounds)")

// Result
childView's Frame : (50.0, 50.0, 100.0, 100.0)
childView's Bounds : (0.0, 0.0, 100.0, 100.0)

childView의 시작점이 parentView의 (0,0)으로부터 (50,50) 떨어진 위치에서 시작하고, Frame의 (x,y) 역시 (50,50)으로 변경된 결과를 확인할 수 있습니다.

하지만 자신(childView)의 좌표계를 기준으로 하는 Bounds의 (x,y)는 여전히 (0,0)인 것을 알 수 있습니다!

 

그리고 뷰가 생성된 후 따로 변경하지 않는다면, Frame과 Bounds의 width,height는 모두 동일한 값을 가지게 됩니다.

 

 

- 참고

https://developer.apple.com/documentation/uikit/uiview/1622621-frame

https://developer.apple.com/documentation/uikit/uiview/1622580-bounds