Frame Bounds + center? transform?

개인적으로 공부하며 정리하는 블로그 입니다.
오류나 부족한 부분이 있을 수 있으니 감안하여 봐주시고 아낌없는 조언 감사드립니다 :D

 

view: 화면에 보이는 사각형의 영역
frame, bounds: view의 위치와 크기를 나타내는 property
frame: 부모의 좌표계를 기준으로 함
bounds: 자신의 좌표계를 기준으로 함

 

오늘은 비슷해 보이지만 다른, Frame과 Bounds에 대해 알아보겠습니다. 먼저 정의를 살펴볼까요?

 

---

 

 

거의 비슷해 보이죠? View는 화면에 보이는 사각형인데요,
frame과 bounds는 View의 위치와 크기를 나타내는 프로퍼티 입니다.
혹시 차이가 보이시나요? 네 밑줄 친 부분을 보면 frame은 부모의 좌표계를, bounds는 자신의 좌표계를 기준으로 한다는 점이 다릅니다.

아래 그림처럼 오랜지 View와 파랑이 View가 서로 50씩 떨어져 있다고 했을 때,

safeArea의 origin을 (0, 0) 이라고 가정한다면
각 뷰의 frame의 origin과 bounds의 origin은 어떻게 될까요?
먼저 생각 해봅시다 :)

오랜지 View를 ornage, 파란색 View를 blue라고 할 때,

orange.frame == (50, 50)
blue.frame == (50, 50)

ornage.bounds == (0, 0)
blue.bounds == (0, 0)

이 됩니다.

실제로 찍어보면 다음과 같습니다. (safearea가 아니라 뷰컨의 view를 기준으로 하기 때문에 orange에 safeArea 영역 44만큼이 더해졌답니다 ;))

print("orange frame: \(orange.frame)")
print("blue frame: \(blue.frame)\n")

print("orange bounds: \(orange.bounds)")
print("blue bounds: \(blue.bounds)")

 

예상하신 결과와 같나요? 

bounds는 origin이 기본적으로 (0, 0)으로 잡히고 자신의 사각형 크기만큼의 사이즈를 가지고 있습니다.
frame은 부모뷰의 origin을 (0, 0)으로 잡고 자신이 거기서 얼마나 떨어져 있는지가 origin이 됩니다.

여기까지 이해하셨다면 조금 더 생각해볼까요?

Center

그럼 이 상태에서 center는 어떻게 될까요? center는 frame의 center 입니다. 따라서 부모 뷰를 기준으로 잡히게 됩니다.

Transform

이 상태에서 약간 회전시키면 frame과 bounds는 어떻게 될까요?

 

결과부터 바로 살펴보죠 :)

print("orange frame: \(orange.frame)")
print("blue frame: \(blue.frame)\n")
print("orange bounds: \(orange.bounds)")
print("blue bounds: \(blue.bounds)")

orange.transform = CGAffineTransform(rotationAngle: CGFloat.pi/3)
print("\n >>>> orange rotationAngle to pi/3 <<<< \n")

print("orange frame: \(orange.frame)")
print("blue frame: \(blue.frame)\n")
print("orange bounds: \(orange.bounds)")
print("blue bounds: \(blue.bounds)")

blue frame은 orange를 기준으로 하고 있어서 변함이 없는데, orange는 이상하게 변해버렸습니다. 😨
transform 이후에 frame은 아래와 같이 변화가 일어났습니다.

 

 

따라서 transform 이후에는 frame이 바뀌기 때문에 기존에 알던 frame으로 생각하지 않도록 주의해야 되겠습니다!

 

추가로 이런 짓(?)을 하면 어떻게 될까요???

transform -> origin.x += 50 -> identty

view가 transform 이전의 원래 위치로 돌아갈까요?
아니면 원래 위치에 x + 50 한 위치로 갈까요??

우선 화면 결과부터 보시겠습니다.

 

화면은 원래 위치로 잘 돌아갔네요!!
그렇다면 frame도 ...?

 

으잉?? 무슨 일이 일어난거죠?? 

화면의 결과만 보면 원래 위치인 (50, 94)로 가야할 것 같은데 엉뚱한 값이 찍히고 있습니다.

값을 잘 보면 처음에 transform 시키고 원래 좌표로 이동해야 하는 값만큼이 더해진 결과라는 걸 확인해볼 수 있네요!

결과적으로 transform 이후에 frame 변화와는 상관 없이,
identity를 하면 자신의 위치를 다시 계산하는 게 아니라, transform 시킬 때 원래 돌아가야 하는 값을 기억하고 있다가 그만큼을 더해서 찾아주는 방식을 취하고 있는 것 같습니다!! 정말 주의해야겠네요 !!!

 

---

 

대부분 잘 알고 계시던 내용이셨겠지만 헷갈리거나 놓치고 계셨던 부분이 있었을 수도 있을 것 같아요
조금이라도 도움이 되셨다면 좋겠네요 :)

한 가지 더 질문! 그럼 frame과 bounds 어떤 시점에 어떻게 결정될까요? 

다음 글에서 뵙겠습니다 ^___^

 

참고

https://developer.apple.com/documentation/uikit/uiview/1622621-frame

Apple Developer Documentation

https://developer.apple.com/documentation/uikit/uiview/1622580-bounds

Apple Developer Documentation

https://suragch.medium.com/frame-vs-bounds-in-ios-107990ad53ee

Frame vs Bounds in iOS

https://www.slideshare.net/profmido/05-views?next_slideshow=1