[iOS] Frame 과 Bounds

👉 시작

Bounds 와 Frame 모두 뷰의 위치와 크기를 나타내는 UIView의 프로퍼티이다.

두가지의 차이점을 알아보자요.

 

 

👉 Frame

• https://developer.apple.com/documentation/uikit/uiview/1622621-frame
• 상위 뷰의 좌표 시스템에서 뷰의 위치와 사이즈를 나타낸다.
• frame이 나타내는 origin(x, y)는 슈퍼뷰의 원점을 (0, 0)으로 보고 원점으로부터 얼마나 떨어져있는 지를 나타낸다.

👉 Bounds

• https://developer.apple.com/documentation/uikit/uiview/1622580-bounds
• 자신의 좌표 시스템에서 뷰의 위치와 크기를 나타낸다.
• 자신의 좌표(default 값)이 (0, 0)이다.

 

 

---

👉 Frame과 Bounds 차이

frame의 값을 보면 자신의 상위 뷰의 좌표를 기준으로 얼만큼 떨어져있는 지를 보여준다.
하지만 bounds의 값을 보면 (0.0, 0.0)으로 자기 자신의 위치가 어디인지를 보여준다.

 

 

✔️  Frame 사용해보기

purpleView.frame.origin = CGPoint(x: 0, y: 0)
보라색 뷰의 프레임을 x좌표 0, y좌표 0으로 이동한 결과이다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var yellowView: UIView!
    @IBOutlet weak var purpleView: UIView!
    @IBOutlet weak var mintView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    
        print("노란색 뷰 Frame - \(yellowView.frame.origin)")
        print("보라색 뷰 Frame - \(purpleView.frame.origin)")
        print("민트색 뷰 Frame - \(mintView.frame.origin)")
        print("--------------번경 후--------------")
    }
    
    override func viewDidAppear(_ animated: Bool) {
        purpleView.frame.origin = CGPoint(x: 0, y: 0)

        print("노란색 뷰 Frame - \(yellowView.frame.origin)")
        print("보라색 뷰 Frame - \(purpleView.frame.origin)")
        print("민트색 뷰 Frame - \(mintView.frame.origin)")
    }
}

• 상위 뷰를 기준으로 x축과 y축을 얼만큼 떨어질 지 자신이 원하는 위치를 지정해준다.
• 하위 뷰는 상위 뷰의 위치와 관계가 없기에 같은 위치에서 상위 뷰의 위치만 이동한다.

 

✔️  Bounds 사용해보기

		purpleView.clipsToBounds = true 적용

purpleView.bounds.origin = CGPoint(x: 50, y: 50)
보라색 뷰의 바운드를 x좌표 50, y좌표 50으로 이동한 결과이다.

bounds는 해당 좌표에서 뷰를 다시 그리는 것으로 해석한다.
위치를 (0, 0)에서 (50, 50)으로 이동시켰지만 왼쪽 위로 올라간다.

뷰의 이동이라는 개념보다는 보여지는 부분의 이동이라고 이해하는 것이 더 쉬울 거 같다.
보라색 뷰의 보여지는 부분의 좌표를 (50, 50)으로 이동시키면
보여지는 부분이 오른쪽 아래로 내려간 것이지만 실제로 보이는 부분(하위 뷰인 민튜색 뷰)은 왼쪽 위로 올라간 거처럼 보이게 된다.

보여지는 부분이 이동한다고 생각하자.
보여지기로는 자기 자신은 가만히 있고 하위 뷰가 반대로 이동하는 것이다.
하지만 실제로는 하위 뷰가 반대로 이동하는 것이 아니라 보여지는 뷰의 시점이 이동하는 것이다.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var yellowView: UIView!
    @IBOutlet weak var purpleView: UIView!
    @IBOutlet weak var mintView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        purpleView.clipsToBounds = true

        print("노란색 뷰 Bounds - \(yellowView.bounds.origin)")
        print("보라색 뷰 Bounds - \(purpleView.bounds.origin)")
        print("민트색 뷰 Bounds - \(mintView.bounds.origin)")
        print("--------------번경 후--------------")
    }
    
    override func viewDidAppear(_ animated: Bool) {
        purpleView.bounds.origin = CGPoint(x: 50, y: 50)

        print("노란색 뷰 Bounds - \(yellowView.bounds.origin)")
        print("보라색 뷰 Bounds - \(purpleView.bounds.origin)")
        print("민트색 뷰 Bounds - \(mintView.bounds.origin)")
    }
}

• 자신만의 좌표시스템안에서 나타낸다. 상위 뷰의 위치와는 상관이 전혀 없다.
• 뷰의 위치가 이동하는 것이 아닌 보여지는 뷰의 시점이 이동한다고 생각하자.
• 하위 뷰가 움직이는 것처럼 보이는 것은 상위 뷰는 그대로 있고 하위 뷰의 좌표가 변경되었기 때문이다

 

 

---

📂 정리

Frame	Bounds
상위 뷰의 좌표시스템에서 뷰의 위치와 사이즈를 나타냄	자신의 좌표시스템에서 뷰의 위치와 크기르 나타냄
자신이 원하는 좌표의 위치로 이동	기본 값이 (0, 0)으로 보여지는 부분이 이동하기 때문에 이동하는 것과 반대로 보여지게 됨
뷰의 위치나 사이즈를 정할 때 사용	뷰 내부의 그림을 그릴 때 사용 하위 뷰를 정렬하는 것과 같이 내부적으로 변경할 때 사용

 

 

 

 

 

 

 

 

 

 

[예제 소스코드 깃허브 링크]

https://github.com/HANLeeeee/PracticeTest/tree/main/FrameBoundsTest

GitHub - HANLeeeee/PracticeTest