Frame & Bounds

안녕하세요!

오늘은 frame과 bounds에 대해서 학습해보고 두 친구의 차이점을 알아보겠습니다.
같이 공부하는 거니깐 잘못된 정보가 있으면 알려주면 매우 감사하겠습니다~!

먼저 frame부터 알아보겠습니다.

공식 문서를 먼저 살펴볼게요.

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

제 짧은 영어 실력으로 해석해보면, 사각형인데 View의 위치와 크기를 표현하는 친구라 하네요.

근데 눈에 띄는 단어가 하나 보이네요??

superview's coordinate system?

부모의 좌표계라는 것 같은데 무슨 소린지 정확히 모르겠네요.

이럴 때는 직접 눈으로 확인해보는 것이 제일 좋겠죠??

Xcode를 켜보겠습니다.

우선 UIView를 생성해보겠습니다.

앗! UIView를 생성하는데도 frame을 변수로 원하네요.

우선 잘 모르니깐 x, y가 0이고 너비, 높이가 각각 100인 CGRect를 만들어서 넣어볼게요.

View를 만들기만 해서는 화면에 보여지지 않나봐요?

바로 UIView 공식문서 ㄱㄱ

https://developer.apple.com/documentation/uikit/uiview

마침 제가 작성한 코드랑 똑닮은 코드가 있네요.

addSubview, insertSubview, exchangeSubview를 쓰라고 하네요!

addSubview를 이용해서 띄워보도록 하죠.

놀랍게도 ViewController를 생성하면 View가 하나 있답니다.

그래서 아래와 같이 view를 추가해볼게요!

그런 다음에 시뮬레이터를 실행시켜보면?!

오호, 파란색 사각형이 왼쪽 상단에 나타났어요

그럼 저희는 여기서 예상을 해볼 수 있겠죠?

왼쪽 상단의 좌표가 (0,0)이었으니깐 (100,100)인 View를 추가한 다음 확인해보면 파란색 사각형의 오른쪽 아래 꼭짓점과 만날거에요

 

 

ㄷㄱㄷㄱ

 

 

역시 저희 생각이 맞았어요!!

흠.. 대충 좌표계는 이해한 것 같은데 superview의 좌표계가 뭔지는 아직 모르겟어요..

superview의 좌표계 뭘 의마하는지 이해하기 위해서는 ViewController의 View보다 제가 임의로 View를 만들어서 확인해보는게 좋을 것 같아요

더욱 큼직한 View를 만들어볼게요

)

맨 처음에 했던 것처럼 x, y가 0이고 너비, 높이가 각각 100인 사각형을 추가해볼게요!

단, 이번에는 self.view가 아닌 직접 만든 view에다가 추가해볼거에요

)

오옷!

똑같은 CGRect를 이용해서 만든 View인데 화면의 왼쪽 최상단이 아닌 파란색 View의 왼쪽 최상단에 추가되었네요!!

아직도 긴가민가 하신 분들을 위해서 View를 더 추가해볼게요

)

감이 오셨나요?

frame은 superview의 (x, y) 좌표로부터의 상대좌표를 의미한다는 것을 알 수 있어요!

그럼 다음은 bounds를 알아볼게요

bounds도 공식문서를 살펴봅시다

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

어라? frame과 거의 비슷하네요?
딱 하나 다른 건 superview의 좌표 시스템이 아니라 본인의 좌표 시스템이래요!

뭐가 다른지 정확히 모르겠으니깐 역시 직접 확인해봐야겠어요

UIView를 만들 때 frame을 이용해서 만들었는데 그렇다면 bounds의 값은 무엇하시죠? 그럼 찍어보도록 하죠!

오! bounds는 본인의 좌표시스템에서의 위치를 말한다니깐 (x, y)가 (0,0)인가봐요

그러면 이 값을 변경시키면 어떻게 될까요?

frame 때 작성했던 코드에서 가장 큰 파란 View의 bounds만 변경시켜볼게요

밑줄 친 부분이 bounds를 변경시키는 부분이에요

??

이렇게만 봐서는 뭐가 바꼈는지 모르겠어요

변하는 과정을 살펴보기 위해서 애니메이션을 추가해볼게요

?!
분명 파란색 View의 bounds를 변경시켰는데 다른 사각형들이 움직이네요?

이 부분이 이해가 잘 안되서 많이 찾아봤는데 제가 이해한 바로는

~

bounds를 변경한다는 것은 자신의 좌표계에서의 위치를 변경한다는 거자나요??
그런데 파란색 View는 ViewController가 기존에 가지고 있는 View의 subview자나요
그래서 화면에서의 파란색 View의 위치는 바뀌지 않아요
frame을 변경한 건 아니니까요
하지만 파란색 View의 subview들은 superview의 좌표계가 변경되었기 때문에 움직이는거랍니다
제 설명이 적절했는지 모르겠네요!

frame과 bounds에서의 (x, y) 좌표(얘네를 사실 origin이라고 불러요) 알아봤는데요!

과연 width, height(얘네는 size라고 해요)도 차이점이 있을까요?

우선 두 친구를 출력해볼게요!

흠, 아직은 차이가 안보이네요

한번 View를 45도 회전시켜볼까요?

?? frame의 크기가 변경되었어요

그 이유는 bounds는 View 자체의 크기를 가지고 있지만 frame은 View가 그려지는데 필요한 영역을 가지고 있어서 그래요!
View를 회전시키는 순간 필요한 영역이 늘어나면서 frame의 크기가 변경되는거에요!

으아.. 더 공부해서 알게되는 내용이 있으면 추가하겠습니다..
처음 글쓰는거라서 어렵네요ㅠㅠ