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

Bounds와 Frame이 무엇인지 알아보기에 앞서 뷰의 좌표계에 대해 알아봅시다.

 

 

UIKit에서 기본이 되는 뷰의 좌표계는 좌측 상단 모서리인 origin(0,0)을 원점으로 합니다. 사진을 통해 알 수 있듯이 이것은 원점으로부터 아래쪽, 오른쪽 방향으로 확장되는것을 볼 수 있습니다. 

좌표값은 해상도와 상관없이 콘텐츠의 위치를 잡는 부동소수점을 사용하여 나타내고 수평축은 x로, 수직축은 y로 표현합니다.

---

1. Frame

애플문서에서는 Frame을 'SuperView(상위뷰)의 좌표 시스템 안에서 View의 위치와 크기를 나타낸다' 라고 설명되어 있습니다. 
즉, 뷰의 크기와 위치를슈퍼뷰의 좌표계를 기준으로 나타냅니다.

 

---

2. Bounds 

애플문서에서는 Bounds를 'View의 위치와 크기를 자신만의 좌표시스템 안에서 나타낸다' 라고 정의되어 있습니다.

즉, 뷰의 크기와 위치를 해당 뷰 자신의 좌표계를 기준으로 나타냅니다.

 

 

위의 말을 제대로 이해하기 위해 그림을 통해 Frame과 Bounds가 어떤 차이가 있는지 확인해봅시다. 먼저 subView를 코드로 그려준 후 진행해보겠습니다. ↓

// 코드로 그려준 서브뷰
let frame = CGRect(x: 60, y: 100, width: 240, height: 120)
let subView = UIView(frame: frame)
subView.backgroundColor = UIColor.green
view.addSubview(subView)
        
print("서브뷰 프레임의 CGRect : \(subView.frame)")
print("서브뷰 바운드의 CGRect : \(subView.bounds)")
print("서브뷰 프레임의 Origin : \(subView.frame.origin)")
print("서브뷰 바운드의 Origin : \(subView.bounds.origin)")

코드로 구현한 서브뷰의 시뮬레이터 화면과 출력값을 보면, 서브뷰 프레임은 모든 값이 슈퍼뷰에 맞게 잘 나타나는 것을 볼 수 있습니다. 즉, Frame은 자신의 부모뷰를 기준으로 origin의 위치를 정하는 것을 알 수 있습니다.

 

바운드의 CGRect와 Origin의 값을 본다면 0.0 이라고 되어있는걸 볼 수 있습니다. Bounds는 자신만의 좌표계 (0,0)를 기준으로 위치 (x, y) 및 크기 (너비, 높이)로 표현되는 사각형으로 Bounds의 origin은 default로 (0,0)입니다. 즉, Bounds는 상위 뷰와는 아무런 상관이 없으며, 오직 자신이 기준이 되는 것을 알 수 있습니다.

 

정리

Q. Bounds와 Frame의 차이점을 설명하시오.

A. frame은 상위뷰 기준으로 좌표를 나타내고, bounds는 자기 자신을 기준으로 좌표를 나타낸다.

- Frame은 UIView의 위치나 크기를 설정할 때 사용하며, 스토리보드에서 우측 X좌표와 Y좌표가 Frame의 좌표이다.
- Bounds는 View의 크기를 알고 싶거나 View 내부에 그림을 그릴 때 사용한다. (transformation 후 View의 크기를 알고 싶을 때, Sub View(하위 뷰)를 정렬하는 것과 같이 내부적으로 변경하는 경우에 사용)

 

💡Frame은 한 단계 상위뷰와 비교해서 뷰를 배치하는 경우에 사용, Bounds는 스크롤 뷰를 사용할 때 좋다.

---

참고

iOS ) Frame과 Bounds의 차이 (1/2)