'Autolayout' 태그의 글 목록

Autolayout

Frame vs Bounds 차이점 2021.12.19

Frame vs Bounds 차이점

2021. 12. 19. 15:53

이제부터 습관화 하기로 했다..

무언갈 찾아볼때 순서를..

1. 공식문서

2. 이해 안된 내용 + 추가적인 내용에 대해서 구글링

결론.. 공식문서 짱짱..

1. 공식문서 훑어보기

1) Frame

The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.

-> 슈퍼뷰 를 기준으로 위치 및 크기를 정의

강조한 부분을 잘 기억해야한다! 기준점이 자신보다 한단계 위의 뷰인 슈퍼뷰 이다!

var frame: CGRect { get set }

2) Bounds

The bounds rectangle describing the item’s location and size in its own coordinate system.

-> 자기 자신을 기준으로 위치 및 크기를 정의

강조한 부분을 잘 보자! 기준점이 자기 자신이다!

var bounds: CGRect { get }

💡CGRect는 직사각형의 위치와 치수를 포함하는 구조체 이며, 해당 구조는

public struct CGRect {

    public var origin: CGPoint
    // 위치 정보

    public var size: CGSize
    // 크기 정보

    public init()

    public init(origin: CGPoint, size: CGSize)
}
/*

	...
	...
	...
	기타 확장 기능들이 구현되어 있음 
*/

로 정의되어 있습니다.. 이부분은 Code로 앱을 구현할때 사용하게 되는데

~~제가 아직 스토리보드 밖에 다룰줄을 몰라서.. 알게되면 포스팅 하겠슴다ㅎㅎ..~~

다시 본론으로 돌아가서

자! 공식문서만 봐도 차이점을 바로 알아버렸다 ^_-

간단하게 차이점을 이야기 하자면..

Frame 은 기준점이 슈퍼뷰에서부터 위치 및 크기를 지정하게 되는 반면,

Bounds 는 기준점이 자기 자신으로부터 위치 및 크기를 지정하게 된다!

로 끝내기엔 뭔가.. 이해가 되지 않으니 예시로 살펴 봐야겠다..

예시로 살펴보기

1. 먼저 frame 이다, 분홍색(빨간색) View가 superview고, 파란색 뷰가 frame을 적용한 뷰이다,

코드 를 살펴보자

class ViewController: UIViewController {
    @IBOutlet var superView: UIView!
    
    var view1 = UIView()
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        view1.frame = CGRect(origin: CGPoint(x: 50, y: 50), size: CGSize(width: 300, height: 300))
        view1.backgroundColor = .blue
        superView.addSubview(view1)
        superView.backgroundColor = .systemPink
    }
}

위치 정보를 (50.50) 으로 주었고, 크기 정보를 (300 * 300) 으로 설정했다.

우리는 위에서 슈퍼뷰기준 으로 위치와 크기를 나타낸다고 배웠다

각 수치값을 표현다면 위와 같이 될것이다

분홍배경의 슈퍼뷰 로 부터 50.50 만큼 떨어진 거리에 300 * 300 크기의 뷰를 그려준것이다.

2. Bounds 를 살펴보자!

배경에 대한 설명은 같고, 위 코드에서 frame 을 bounds로 변경하여 적용하였다!

@IBOutlet var superView: UIView!
    
    var view1 = UIView()
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        view1.bounds = CGRect(origin: CGPoint(x: 50, y: 50), size: CGSize(width: 300, height: 300))
        view1.backgroundColor = .blue
        superView.addSubview(view1)
        superView.backgroundColor = .systemPink
    }