[UIView] frame & bounds (1)

본 시리즈는 소들이 블로그를 보고,
실습을 하며 정리한 글입니다.

학습 목표

• CGRect의 origin, size 두 프로퍼티가 UIView에서 어떻게 쓰이는지
• UIView의 프로퍼티 frame과 bounds 차이 공부

---

학습 내용

Super View 개념

여태 나는 뷰컨트롤러가 갖는 뷰, 즉 루트 뷰라고 생각했는데
그냥 부모 뷰를 이야기 하는 것이었음

뷰는 계층 구조로, 뷰안에 뷰를 넣을 수 있는데

second View의 Super View는 firstView인 것.

UIView의 frame

frame: CGRect에는 origin과 size가 있음
origin = (x, y) 좌표, size = (width, height) 크기

frame의 origin (x,y)

Super View의 원점(좌측 최상단)을 (0, 0)으로 놓고,
원점과 얼마나 떨어져있는 지를 나타내줌

작업을 스토리보드로 했는데,

루트 뷰 기준, 자식인 초록색의 뷰는 greenView.frame.origin이 (76, 116)이다.

SuperView인 뷰컨트롤러의 뷰 (루트 뷰)로부터 떨어진 정도이다.

여기서 노란색 자식 뷰의 그려진 곳은, 부모 뷰인 초록색의 좌측 최상단을 (0, 0)으로 잡고 (47, 17)만큼 떨어진 곳부터 그린다.

→ 정리: 루트 뷰의 원점을 기준으로 떨어진 정도

frame의 size (width, height)

이번에는 코드 베이스로 해보겠습니다.

class ViewController: UIViewController {
    var redView: UIView = {
        let view = UIView(frame: CGRect(x: 50, y: 100, width: 150, height: 150))
        view.backgroundColor = .red
        return view
    }()

    var subBlueView2: UIView = {
        let view = UIView(frame: CGRect(x: 50, y: 160, width: 100, height: 150))
        view.backgroundColor = .blue
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(redView)
        redView.addSubview(subBlueView2)
    }
}

위와 같은 코드면, width와 height는 문제 없이 잘 나온다.

우리가 View 생성해준 그 대로 결과가 나오게 된다.

red Frame: (50.0, 100.0, 150.0, 150.0)
blue Frame: (50.0, 160.0, 100.0, 150.0)

그런데, 여기서 rotation을 주게 된다면 ?

red Frame: (22.3486179, 72.348618, 205.360964, 205.3026792)
blue Frame: (50.0, 160.0, 100.0, 150.0)

단지 RedView에 Rotation을 줬을 뿐인데, 같은 코드이지만 결과값이 다르다.

View가 갖고 있는 frame은 View 영역을 모두 감싸는 사각형이기 때문에, 아래와 같이 표현되고 있는 것이다.

그래서 frame.origin 좌표가 (22.34.., 72.34..)가 나왔던 것

frame.size 또한, width와 height가 내가 조절한 것과 다르게 나온다.

이때 내가 설정한 (150, 150) 크기 그대로를 알고 싶을 때 필요한 것이 Bounds

UIView의 Bounds

frame과 똑같이 CGRect 타입
view.bounds 프로퍼티는 자신의 좌표계이다.

bounds의 origin (x,y)

bounds는 Super View와는 아무 상관없이,
기준이 항상 자기자신이다.

즉, 자신의 원점을 (0, 0)으로 두기 때문에 처음에는 항상 origin이 (0, 0)임

그럼 항상 (0, 0)인데 왜 쓰는 걸까 ? → 나도 아직 모름 더 공부 ㄱㄱ

암튼 bounds는 시작점이 자신의 원점이기에

뷰가 회전하든 말든, 자신의 원점이 곧 좌표의 시작점

bounds의 size (width, height)

bounds의 size는 View 자체 영역을 나타내는 것

회전이 되어도 자신의 View 자체 영역을 나타내고 있음

frame처럼 View 영역 모두를 감싼 사각형이 아님

---

배운 점

• super view 용어를 알게 됐음
• UIView가 갖는 frame과 bounds 차이를 알게됨

	frame	bounds
origin (x, y) 기준점	Super View의 좌표계	자신의 좌표계
size (width, height) 기준점	View 영역 모두를 감싸는 사각형	View 영역 자체

---

참조 링크

https://babbab2.tistory.com/44