[iOS/Swift] 뷰 좌표계와 UIView.Frame

뷰 좌표계

UIView의 공식 문서에는 좌표계에 대해 직접적인 언급은 없습니다.
그러나 짤막하게 View Programming Guide for iOS 라는 링크로 언급하고 있고, View and Window Architecture - View Geometry and Coordinate Systems에서 뷰 좌표계에 대한 내용을 확인할 수 있습니다.

번역하면 뷰의 기하학적 구조와 좌표계 정도가 되겠네요.

뷰는 기본적으로 좌상단이 (0,0)부터 시작하고 이를 origin point라고 합니다. 수평 방향이 x축이며 수직 방향이 y축 이고, 좌표계의 값은 부동소수점으로 표현합니다.

모든 뷰와 화면은 자신만의 좌표계를 갖고 있기 때문에, 개발자는 어떤 식으로든 좌표계를 조작할 때 발생하는 영향에 대해 인지하고 있어야 한다고 하네요.뷰를 그리거나, 뷰의 기하학적 구조를 변경하면 해당 뷰에 연관된 모든 좌표계가 영향을 받는다고 합니다.
또한 뷰를 그릴때 (이 말은 뷰의 위치를 옮기거나 뷰를 생성하는 등의 뷰의 기하학적 구조를 변경하는 모든 행위를 말하는 듯 해요) 부모 뷰와의 관계를 잘 알아야 한다고 합니다.
특정 뷰의 기하학적 구조가 변경되면, 이와 연관된 모든 좌표계가 영향을 받기 때문에 당연한 말인듯 싶기는 합니다만,, UIWindow 와 UIView 는 그러한 관계, 자식 뷰 좌표계에서의 좌표기 부모 뷰 좌표계에서의 상대적 위치등을 계산하는데에 도움을 주는 메서드를 제공해준다고 합니다.

UIView.Frame

뷰 오브젝트는 자신의 frame, bounds, center 속성으로 자신의 크기와 위치를 추적한다고 합니다.
이번에 알아볼것은 그중에서도 frame 인데요! 공식문서에서는 다음과 같이 정의하고 있습니다.

The frame property contains the frame rectangle, which specifies the size and location of the view in its superview’s coordinate system.
frame은 부모뷰의 좌표계 안에서의 자신의 위치와 크기를 특정하는 사각형 프레임을 포함합니다.

런타임에서 frame을 조작한다는 것은 뷰의 기하학적 구조를 조작한다는 뜻이며, 뷰의 계층구조를 짓거나, 뷰의 크기 또는 위치를 변경한다는 뜻이라고 합니다.

frame 사진을 보면, origin point가 (40,40) 으로 부모 뷰의 좌표계 속 위치인것을 알 수 있습니다. center 속성의 값 또한 (160, 230) 으로 40 + 120 {240/2} 으로 부모 좌표계에 기준을 두고 있네요.

뷰 좌표계와 Frame 실습

재미있는 실습시간! 오늘은 뷰의 계층구조를 3단으로 만들고, 뷰 위치를 조작하며 origin point 와 center 속성의 값이 어떻게 변경되는지 간단하게 살펴보겠습니다.

좌 - 시뮬레이터 / 우 - xcode의 뷰 디버거

나중에 뷰를 구분하기 위해 일단 바탕을 파란색으로 칠했습니다.
뷰 계층구조가 UIWindowScene - UIWindow - VC - Root View 인것을 알 수 있습니다.
여기에 그냥 UIView를 생성하고 addSubView 로 붙여볼게요.

class ExViewController: UIViewController {
    
    lazy var view0 = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .blue
        self.view.addSubview(view0)
        // Do any additional setup after loading the view.
    }

어라.. 뷰의 계층 구조에서는 추가한 뷰가 보이는데, 화면에서는 뷰가 안보입니다. 어찌 된 일일까요? 바로 뷰의 크기를 지정하지 않았기 때문이지요. UIView를 생성할 때 아무 크기를 주지 않으면, 크기가 0인 것을 알 수 있었습니다.

그렇다면 iOS의 좌표계에서 크기와 위치를 표현하는 구체적인 타입은 무엇일까요?

바로 CGRect 입니다.
CGRect 자체는 좌표계의 추상적인 행동을 실제 코드로 옮길 때 사용하는 타입이기에 지금은 자세한 설명을 하지는 않겠습니다만, UIView.frame 에서 frame은 CGRect이고, CGRect가 origin, x, y, width, height, center 등의 속성을 가지고 있습니다.
즉, UIView.frame의 해당 속성들을 조작하는 것이 뷰의 기하학적 구조를 조작하는 행위 중 하나인것을 알 수 있습니다.

?? 근데 왜 get-only 프로퍼티임??

애플 UIView 공식 문서에도 view의 사이즈를 직접 조절할 수 있는 방법을 안내하고 있지 않는데요, 아마 직접 조작하는 것을 권장하지 않기 때문에 적어두지 않은 것 같습니다.
그럼 어떻게 조작하느냐? 조작하기 위해서는 매번 오토레이아웃 같은걸 사용해야 하느냐?
그게 정석이겠습니다만, frame.size 를 통해 변경할 수 있습니다.

self.view0.backgroundColor = .brown
self.view0.frame.size.width = 100
self.view0.frame.size.height = 100

시뮬레이터에선 라운딩때문에 조금 짤렸는데, 정확히 (0,0)부터 시작해 가로세로 100만큼의 크기를 갖는 View를 확인할 수 있습니다.
자, 이제 이 뷰의 원점과 가로세로를 변경하고, 변경 전과 후의 값을 확인해보도록 합시다.

self.view.addSubview(view0)
self.view0.backgroundColor = .brown
self.view0.frame.size.width = 100
self.view0.frame.size.height = 100
print("view0.center", view0.frame.origin)
print("view0.center", view0.center)
self.view0.frame.origin.x = 100
self.view0.frame.origin.y = 100
print("view0.center", view0.frame.origin)
print("view0.center", view0.center)

정직하게 딱 100만큼만 늘어난것을 확인할 수 있습니다. 자, 이제 새로운 뷰를 추가하고 이 뷰의 origin을 한번 확인해보죠.

self.view0.addSubview(view1)
self.view1.backgroundColor = .purple
self.view1.frame.size.width = 100
self.view1.frame.size.height = 100
print("view1.center", view1.frame.origin)
print("view1.center", view1.center)

view1의 origin point 가 (0,0) 입니다!

공식 문서대로 각 뷰는 부모 뷰의 좌표계만을 기준으로 한다는 것을 확인한 순간입니다. center 도 정직하게 (50,50)이네요. 이제 위치를 조금 옮기면..?

self.view1.frame.origin.x = 100
self.view1.frame.origin.y = 100
print("view1.center", view1.frame.origin)
print("view1.center", view1.center)

공식 문서대로 각 뷰는 부모 뷰의 좌표계만을 기준으로 한다는 것을 확인한 순간입니다. center 도 정직하게 (50,50)이네요. 이제 위치를 조금 옮기면..?

self.view1.frame.origin.x = 100
self.view1.frame.origin.y = 100
print("view1.center", view1.frame.origin)
print("view1.center", view1.center)

모든것이 공식문서대로 정직하게 작동하는것을 알 수 있습니다.

iOS 개발자라면 꼭 알아야 할 좌표계에 대해서 알아보았습니다.
이 외에도 transform이라던가, bounds라던가.. 머리아픈것들이 많이 남았습니다. 그러니까 또 뵙겠습니다. 다음 포스팅에서 뵈요!

참고자료

CGRect | Apple Developer Documentation

CGRect | Apple Developer Documentation

 

About Windows and Views

 

UIView | Apple Developer Documentation