iOS ) Frame과 Bounds의 차이 (1/2)

안녕하세요 :) Zedd입니다.

지금 다른 글을 쓰고있는데, 쓰면 쓸수록 쓸 주제가 많아집니다...급 이 글을 쓰게 됐어요 XD..

아무튼 오늘은 저도 궁금했던 Frame과 Bounds의 차이를 알아볼거에요 :)

다음글은 <코드로 View그려보기>인데, 그 때 알아놓으면 좋은 지식이에요.

시작할게요~.~

 Frame과 Bounds의 차이

---

먼저, Frame과 Bounds는 UIView의 instance property입니다. 

어 근데 우리가 배웠던 CGRect가 있네요. (CGRect의 개념을 모른다면 이 글을 읽고오세요!)

그렇다면 frame과 bounds는 일단 "사각형"으로 그려지겠네요.

그 말은 origin과 size를 가진다는 것이죠. 

즉 x좌표, y좌표, width(너비), height(높이)를 가진다고 할 수 있습니다!!!

음..얼핏보면 둘이 비슷해보이는데 말이죠. 

차이를 알아볼까요? 

● Frame

역시 모르는건...Apple 개발자 문서....

정의 : SuperView(상위뷰)의 좌표시스템안에서 View의 위치와 크기를 나타냅니다. 

frame의 핵심. 바로 SuperView(상위뷰)입니다. 이때, 상위뷰라는 것은 한단계 상위뷰를 의미해요.

● Bounds

정의 : View의 위치와 크기를 자신만의 좌표시스템안에서 나타냅니다. 

bounds의 핵심. 바로 자신만의 좌표시스템을 쓴다는 것입니다. 

뭔말이야;;;(제가 한 생각..)

차근차근 볼게요. 먼저 Frame입니다. 핵심이 뭐라고 그랬죠? 

"SuperView의 좌표시스템안에서 View의 위치와 크기를 나타냅니다.(이 때 SuperView는 한단계 상위View)"

노란색이 SuperView이고, 빨간색이 SubView. 그리고 파란색이 imageView에요

(파란색을 원래 그냥 View로 하려다가 subSubView..?하면 헷갈릴 것 같아서 그냥 imageView로 줬어요!)

자 아무튼!! 콘솔창에 나오는 것은 해당 subView와 imageView의 x좌표와 y좌표에요. 

어떠한 값들이 나왔는데, 저 값들이 의미하는 바는!

해당 View의 상위뷰에 대한 좌표값!!!!!!!이라는 것이죠. 

빨간색 subView를 예로 들어볼까요? 

이 subView의 origin. 즉 x좌표와 y좌표는 현재 (16,60)이에요. (편의상 소수로 표현은 안할게요 XD..)

이 말은!!!!!!!!!이 subView의 상위뷰(=부모뷰). 즉 superView(노란색)의 origin으로 부터 (16,60)만큼 떨어져있다는 의미에요.

이렇게요. 자신의 부모뷰를 기준으로 origin의 위치를 정하는 것이 frame이에요.

subView의 origin을(x좌표, y좌표를) 둘다 0으로 줘볼까요?

차이가 보이시나요? subView의 origin이 왼쪽 상단으로 올라갔죠. 

이게 무슨 의미일까요? 지금 현재  SuperView는 origin이 (0,0)인데,  

이 SuperView의 origin을 기준으로 (0,0)떨어진 곳에 subView를 그릴게! 라고 한 것과 마찬가지인거죠.

그러니 subView의 origin은 SuperView의 origin과 동일하게 된답니다.

아직 잘 이해가 안가시나요? 그럼 imageView를 건들여볼게요.

다시한번 말하지만, Frame은 자신의 한단계 상위뷰. 즉 자신의 부모뷰의 origin으로부터 떨어진 곳에 사각형을 그려주게돼요.

imageView의 부모뷰는 subView죠? SuperView가 아니라요.(두단계 위이기때문)

즉, 

자신의 부모뷰. 즉 subView의 origin을 기준으로 (70,100)만큼 떨어진 곳에 imageView의 origin이 있는 것이죠.

현재 subView는 SuperView로 부터 (16,60)만큼 떨어져있지만(= subView의 origin이 (16,60)이지만), imageView입장에서는 subView의 origin은 (0,0)인 것이죠.

이해가 잘 안가시나요?

이번엔 imageView의 origin. 즉 x좌표, y좌표를 둘다 0으로 줘볼게요.

imagView에게는 superView가 아닌 subView가 상위뷰이므로, 즉 imagView에게는 (0,0)이 subView의 origin이죠. 

신기하죠?

이제 Frame의 정의인

"SuperView(상위뷰)의 좌표시스템안에서 View의 위치와 크기를 나타냅니다. "

가 이해가 가시나요?

이제 이것도 이해가 가실거에요. 아까 subView의 origin을 (0,0)으로 줬을 때, subView안에 들어있는 imagView도 같이 옮겨졌었죠?

이렇게요.

이제 왜 이렇게 같이 옮겨졌는지 아시겠나요?

imageView는 subView의 origin을 기준으로 그리기때문에,

 항상 subView의 origin으로 부터 (70,100)떨어진 곳에 그려질 수 밖에 없는 것이죠.

끄아아ㅏ 이제 좀 Frame에 대해서 감이 잡히시나요?

그럼 이제 Bounds갑니다.

Bounds의 핵심이 뭐라고그랬죠? 

정의 : View의 위치와 크기를 자신만의 좌표시스템안에서 나타냅니다. 

네. "자신만의 좌표시스템"을 가진다는 것이 핵심입니다. 

위의 예제를 가지고, 그대로 subView와 imageView의 bounds x좌표, y좌표를 찍어볼거에요.

엥...subView와 imageView의 x좌표, y좌표가 둘다 (0,0)으로 나왔네요.

이것이 바로 Bounds의 성질입니다. 

상위뷰와 아무런 상관이 없으며, 오직 자신이 기준인것이죠. 

Bounds는 자신만의 좌표계 (0,0)를 기준으로 위치 (x, y) 및 크기 (너비, 높이)로 표현되는 사각형이에요.

그래서 Bounds의 origin은 default로 (0,0)입니다.

Bounds에는 특이한점..?이 있는데요.

실험을 하나 해볼까요?

subView의 bounds origin좌표를 바꿔볼게요. 아래 그림은 바꾸기 전 상태에요.

subView의 bounds origin을 바꾸면...?

subView.bounds.origin.x = 60
subView.bounds.origin.y = 50

.

차이가 잘 안보이시나요?

왼쪽이 바꾸기 전이고, 오른쪽이 바꾼 후에요.

이상하지않나요?

저는 분명히 subView의 origin을 바꿔줬는데, 

subView는 가만히있고 갑자기 imageView가 움직이게 되었어요. 

또한, origin이 (0,0)인상태에서 더 큰 값(60,50)을 주면 오른쪽 하단으로 subView가 내려가야?할 것 같잖아요?

하지만, subView는 움직이지않고, 오른쪽 하단으로 내려가긴 커녕 왼쪽 상단으로 subView안에있던 imageView가 올라간 것을 볼 수 있어요. 

이상하지않나요..?

저는 처음에 이걸보고 정말 음..?했답니다 :)

Q : 왜 subView의 origin을 바꿔줬는데, 그 안에 있던 imageView가 움직이느냐!!!

A : Bounds는 상위뷰 안에서의 좌표가 아닌 "자신만의 좌표시스템"을 가진다고 그랬죠? Bounds를 변경하는 것은 해당 위치에서 View를 다시그리라는 의미가 돼요. Bounds는 상위뷰와 아무런 관련이 없으므로, subView는 움직이지 않는 것 처럼 보이고 그 안에있던 imageView가 움직이는 것 처럼 보이는 것입니다. 

이렇게요. 

이래서 Bounds는 Scroll View 핵심이라고 할 수 있어요.

엥;;;웬 스크롤뷰..?;;

자, 아이패드를 상상해볼게요. 

 Scroll View 안에 저렇게 도형들이 있어요. 

지금은 초록색 네모가 보이죠? 

하지만 가로로 스크롤링을 해서, 파란색 동그라미를 보고싶어요.

그러면, 우리는 손가락을 스와이프?해서 

이렇게 파란색 동그라미를 볼 수 있어요. 

이 스크롤링이 바로 Bounds의 origin을 변경해준 것과 똑같아요. 지금은 x좌표만 바꿔줬지만말이죠. 

우리가 눈으로 볼때는  ScrollView가 움직이는 것이 아니라, 

저 파란색 동그라미가 왼쪽으로 온 것처럼 보이는 거죠. 

사실은  ScrollView Bounds의 x좌표를 양수값으로 준건데 말입니다!!!!!!

흠..잘 이해가 가셨나 모르겠네요.

저도 이해가 갈듯..하면서도 뭔가 완벽하게 이해가 안됐었어요.

그래서 예제를 하나 더 만들어왔습니다!!!

이 예제를 보시면 Bounds에 대한 이해가 조금은..? 더 되실거라 생각해요. 

자, ScrollView 안에 이미지가 이렇게 있다고 생각해볼게요. 

ScrollView 안에 imageView 있다는 것을 잊지마세요!

지금 이 상태로 실행해볼까요?

이렇게 나옵니다.

그러면 이제,

● ScrollView의 Bounds를 바꿔보자. 

scrollView.bounds.origin.x = 300
scrollView.bounds.origin.y = 500

(조금 극단적으로 바꿔봤어요..ㅎㅎ)

그러고 실행을 하면!!!

차이가 보이시나요?

ScrollView의 Bounds를 바꾸니, 이렇게 된거죠.  ScrollView의 Bounds를 바꿨지만, 내 입장에서는 이미지가 왼쪽 상단으로 올라온 것 처럼 보이는 것이죠. 

그럼 Frame을 바꿔줘볼까요?

● ScrollView의 Frame을 바꿔보자. 

scrollView.frame.origin.x = 100
scrollView.frame.origin.y = 100

위에서 Frame설명한 것 기억하시죠?

Frame은 상위뷰를 기준으로 위치를 결정하기 때문에, ScrollView의 상위뷰인 

저 View의 origin, 즉 (0,0)으로부터 (100,100)떨어진 곳에 scrollView의 origin을 지정한 것이죠. 

이렇게요!