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

[ronick-grammer]

Bounds와 Frame의 차이

Frame과 Bounds 모두 CGRect 타입이다. 그리고 이 CGRect는 뷰의 위치를 나타내는 CGPoint 타입의 origin 프로퍼티와 뷰의 사이즈를 나타내는 CGSize 타입의 size 프로퍼티를 가지는 구조로 되어있다.

• Frame: Super View(상위 뷰) 좌표계 내에서의 크기와 위치를 나타낸다. 뷰를 회전했을 시에 회전된 뷰의 영역을 사각형으로 감싼 크기와 위치의 변화가 생긴다.
• Bounds: 자신의 좌표계 내에서의 크기와 위치를 나타낸다. 뷰를 회전했을 시에 뷰 자체의 영역을 나타내기 때문에 크기와 위치에 변화가 생기지 않는다. 스크롤 뷰에서 하위 뷰의 어느 부분을 보여줄때 bounds의 값을 변경하여 준다.

📝 참고 사이트

• 개인 정리 자료
• iOS) Frame vs Bounds 제대로 이해하기 (1/3)

[vichye-1]

Frame

• origin(x, y) 기준점 : Super View 좌표계에서 View의 위치와 크기를 나타낸다.
• size(width, height) 기준 : view 영역을 모두 감싸는 사각형으로 나타낸 것

Bounds

• origin(x, y) 기준점 : 자신의 좌표계에서 View의 위치와 크기를 나타낸다.
  • frame 과 달리 Super View와는 상관이 없고, 자기 자신이 기준임 = 자신의 원점을 (0, 0)으로 놓음
  • 따라서 view를 처음 생성하면 bounds의 origin은 무조건 (0, 0)으로 초기화 되어 있다.
• size(width, height) 기준 : bounds의 size는 view 자체의 영역을 나타낸다.

출처

• apple developer doc. - frame
• apple developer doc. - bounds
• iOS) Frame vs Bounds 제대로 이해하기 (1/3)

[Do-hyun-Kim]

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

✅ CGPoint

• CGPoint는 2차원 좌표계의 점을 포함하고 있는 struct이다.
• CGPoint는 CGFloat 타입을 가진 x 좌표와 y 좌표를 값을 가지고 있다.
• CGPoint는 View를 그릴 때만 사용하는 것이 아닌 x,y를 좌표를 나타낼때 사용할 수 있다.

// viewPoint를 통해 x,y 좌표를 나타낼 수 있다.
let viewPoint: CGPoint = CGPoint(x: 100, y: 300)

✅ CGSize

• CGSize는 width, height 값을 포함하는 struct이다.
• CGSize는 CGFloat 타입을 가진 width 값과, height 값을 가지고 있다.
• CGSize는 width, height 값을 가지고 있지만 사각형을 의미하는 것이 아니다

let viewSize: CGSize = CGSize(width: 400, height: 500)

✅ CGRect

• CGRect는 직사각형의 CGPoint와 CGSize값을 포함하고 있는 struct 이다.
• CGRect의 내부 코드에서는 CGPoint 는 origin Instance property가 CGSize는 size Instance property가 가지고 있다.
• CGRect를 통해 UIView의 Frame에 접근 할 수 있다.

let viewFrame: CGRect = CGRect(origin: viewPoint, size: viewSize)
let view: UIView = UIView(frame: viewFrame

---

🚀 Bounds

• 위 사진을 먼저 보여준 이유는 Bounds , Frame은 모두 각자의 CGSize, CGPoint를 가지고 있다는 것을 알려주고 싶으며, 즉 각자 독립적인 좌표 시스템을 알려주고 싶고자 이미지를 가져왔습니다.
• bounds는 자신의 좌표계에서 View의 위치와 크기를 나타낸다.
• bounds의 좌표계는 frame과 다르게 superview의 영향을 받지 않으며, origin(CGPoint)는 (0,0) 으로 초기화 되어 있다.
  • 자신의 좌표 시스템을 가지고 있기 때문에 항상 자기 자신을 기준으로 origin 좌표를 잡기 때문이다.
• bounds size는 UIView에 자체 영역(Width, Height)를 나타낸다.
• bounds size는 transform을 통해 회전을 해도 CGSize에 영향을 받지 않으며 그대로 유지 됩니다.

---

시뮬레이터 bounds 실행 사진

🚀 Frame

• Frame은 SuperView 좌표계를 기준으로 View의 위치와 크기를 나타낸다.
• SuperView는 자신의(subView)의 바로 한칸 윗 계층의 view를 의미합니다. 또한 SuperView를 제거함으로써 SubView도 함께 제거됩니다.
• Frame의 origin은 Super View의 원점(0,0)을 기준으로 얼마나 떨어져 있는지를 나타낸다. 이때 원점은 가장 View의 가장 왼쪽 윗부분을 말하며 Super View의 원점(0,0)이 곧 좌표의 시작점이 되기 때문에 Super View의 좌표계에서 나타낸다.
• Frame의 size는 UIView의 영역을 모두 감싸는 사각형이다.
• Frame은 transform 의 영향을 받으며 width, height,origin 값이 변경된다.

뷰 계층 구조

• Blue View의 SuperView는 Red View 이고 Green View 의 SuperView는 Blue View이다.

📝 참고 사이트

• iOS Frame & Bounds
• Apple Developer Documentation

[Hminchae]

CGPoint, CGSize, CGRect 타입

View를 그릴땐 (x, y) 좌표와 width, height값을 알아야 함. 그러나 실제 UIView를 init할 땐 frame의 파라미터로 CGRect가 필요하다.

1. CGPoint : (x, y)좌표를 설정할 수 있음

   let position: CGPoint = .init(x: 100,  y: 200)

2. CGSize : (width, height)좌표를 설정할 수 있음

   let position: CGPoint = .init(width: 100,  height: 200)

3. CGRect : CGSize와 CGPoint를 품음

   • 타입 구조체

     
     public struct CGRect {

   public init()

   public init(origin: CGPoint, size: CGSize)

   public var origin: CGPoint

   public var size: CGSize }

   - 사용
   ```swift
   let rect: CGRect = .init(origin: CGPoint(x: 100, y: 100), size: CGSize(width: 150, height: 150))

• 더 간단 ver

  let simple : CGRect = .init(x: 50, y: 50, width: 50, height: 50)

  ---

  frame

  frame은 Super View(최상위 X, 한 칸 윗 계층 View O)좌표계에서 View의 위치와 크기를 나타냄

  • frame의 origin(x, y) = Super View의 원점에서 얼마큼 떨어져 있느냐 를 나타내는 것
  • frame의 size(width, height) = View 영역을 모두 감싸는 사각형으로 나타낸 것의 너비, 높이
  • frame은 UIView의 위치, 크기를 나타날 때 사용한다.

bounds

자신의 좌표계에서 View의 위치와 크기를 나타내는 것

• bounds의 origin(x, y) = 자신의 원점에서 얼마큼 떨어져 있느냐 를 나타내는 것. 때문에 무조건 (0, 0)으로 초기화 되어있음
• bounds의 size(width, height) = View 자체의 영역, frame과 달리 view가 회전하여도 bounds의 size는 바뀌지 않음
• View를 회전(transfomation)한 후 View의 실제 크기를 알고 싶을 때 사용함
• View 내부에 그림을 그릴 때(drawRect) 사용함
• ScrollView에서 스크롤을 할 때 사용

참고

• iOS) CGPoint, CGSize, CGRect
• iOS) Frame vs Bounds 제대로 이해하기