[iOS] frame과 bounds

🍎 iOS & Swift

[iOS] frame과 bounds

taeeekki 2021. 8. 20. 20:52

안녕하세요, 태끼입니다 :)

요즘에는 한 단계 더 성장하기 위해서 다시 기초부터 차근차근 공부하는 중입니다.

확실히 공부를 하다보니 이전에 아무 생각없이 작성하던 코드나 개념들이 눈에 확 띄더라구요...

알고 사용하는거랑 모르고 사용하는거랑은 역시 엄청난 차이이기 때문에 항상 기초부터 탄탄히 합시다...
(근데 기초만 공부하다보면 흥미가 떨어지는건 사실... 그러니까 적절히 요리조리 아시죠...? 😋)

frame vs bounds

오늘은 frame과 bounds에 대해 정리할 거예요.
아 근데, 요약버전이니까 자세하지 않아도 이해해주세요...
꼼꼼한 설명버전은 나중에...

우선 다 이해하고 나서 정리를 해보면 frame과 bounds의 차이는 다음 3가지로 정리할 수 있을 것 같습니다.

좌표계에 대한 차이, 크기에 대한 차이, 실제로 움직였을 때 움직임의 차이

제가 이해했을 때는 이 3가지가 전부이다.
특히 마지막 내용이 처음에는 이해하기 어려운데 이는 직접 그려보면서 이해해보고, 코드로 작성해보면서 이해해야해요!

Origin (x, y) : 좌표계에 대한 차이

frame에서 origin은 Superview의 좌표계를 기준으로 설명하고,
bounds에서 origin은 자신의 좌표계를 기준으로 설명합니다.

Size (width, height) : 크기에 대한 차이

frame에서 size는 view를 감싸는 크기를 의미합니다. ⇒ 회전시에는 size가 커지게 됨
bounds에서 size는 view 자체의 본래 크기를 의미합니다.

Move : 움직임에 대한 차이

frame은 자기 자신의 view를 이동시킵니다.
bounds는 subviews를 반대방향(+, -)으로 이동시킵니다.

Sample

공부 좀 해보시고, 테스트 한 번 해보세요.

Mission1) 아래에서 주석처리 한 부분을 채워서 주황색 박스를 회색 박스 우측 하단으로 보내보세요!

import UIKit

class ViewController: UIViewController {
    
    let grayView = UIView()
    let orangeView = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
    }

    private func setup() {
        grayView.backgroundColor = .gray
        grayView.frame = CGRect(x: 50, y: 50, width: 200, height: 200)
        view.addSubview(grayView)
        
        orangeView.backgroundColor = .orange
        orangeView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
        grayView.addSubview(orangeView)
        
        UIView.animate(withDuration: 2) {
            // code
            // 주황색 박스를 회색 박스의 우측하단으로 보내는 코드를 작성하시오.
        }
    }
}

아래에서 코드를 확인해보세요~

import UIKit

class ViewController: UIViewController {
    
    let grayView = UIView()
    let orangeView = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
    }

    private func setup() {
        grayView.backgroundColor = .gray
        grayView.frame = CGRect(x: 50, y: 50, width: 200, height: 200)
        view.addSubview(grayView)
        
        orangeView.backgroundColor = .orange
        orangeView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
        grayView.addSubview(orangeView)
        
        UIView.animate(withDuration: 2) {
            // 주황색 박스를 회색 박스의 우측하단으로 보내는 코드를 작성하시오.
            self.grayView.bounds.origin.x = -100
            self.grayView.bounds.origin.y = -100
        }
    }
}

마무리

아래 공부하는데 참고한 레퍼런스 첨부할게요!
다른 블로그에서 너무 잘 설명해주고 있습니다.
참고하시면 좋을 것 같습니다.