[iOS] Frame & Bounds (1) - Frame

이 글을 읽는 모두가 Swift를 배우는 동문이라고 생각하고 경어체로 작성된 글입니다.

 

이번 글은 Frame과 Bounds에 대한 내용이야. 이에 대한 내용이 굉장히 길고 많기 때문에 여러 편에 걸쳐서 내용을 작성하려고 해!! iOS 개발의 기초 중의 기초 Frame과 Bounds에 대해 알아보자 ~

---

Frame

Apple Documents에 표기된 정의를 보면 superview 좌표계에서의 view의 위치와 크기를 나타내는 직사각형이라고 설명해

 

이 문장을 이해하기 위해선 문장의 핵심인 superview!! 를 이해해야 할 필요가 있음

view에 super가 붙은 걸 보면 먼가 지금 view보다는 상위의 view를 나타내는 것 같은데 이것도 정의를 한번 살펴보자

 

오랜만에 한번에 이해가 되는 시원한 정의야.

superview는 현재 view 바로 위의 parent view를 의미한다고 해!!

 

한번이라도 StoryBoard 혹은 Code로 UI를 구성해 본 사람이라면 바로 이해가 될 거야!!

 

예를 들어, 하나의 View안에 한 개의 Button과 한 개의 TextLabel을 추가했다고 가정해 보자!!

그럼 여기서 View는 Button과 TextLabel의 superview라고 할 수 있어!

반대로 Button과 TextLabel은 View의 subview라고 말해 :0

 

 

아~ 그럼 superview 좌표계라는 것은 subview 입장에서 부모 뷰의 origin(시작점 - 가장 왼쪽 위)을 기준으로 좌표를 계산하는 좌표계라는 것이구나~...

역시 한번 보는 게 열 번 듣는 것보다 나으니깐 눈으로 봐 보자

흰색 뷰가 하늘색 뷰의 superView!

하늘색 뷰가 파란색 뷰의 superView!

 

자 그럼 파란색 뷰의 위치와 크기를 확인해 보자!

(100, 150)!

참고로 iOS 개발 시, 일반적인 좌표계는

가장 왼쪽 최상단이 (0,0)이고 오른쪽/아래로 갈수록 +, 왼쪽/위로 갈수록 - 된다고 생각하면 아주 쉬워!ㅎㅎ

그렇다면 이 파란색 뷰의 좌표는 어떻게 될까??

.

.

.

다들 예상한 대로 (0,0)이 돼! 왜냐하면 Frame은 superview의 좌표계를 따르기 때문이야!

 

자! 여기까지가 정의의 기본적인 이해!

다음으로는 정의에 나온 2가지 관점을 짚어보자

바로 "위치(Location)"와 "크기(size)"!!

Frame은 superview 좌표계의 "위치"와 "크기"를 서술하는 직사각형 frame이라고 나와있어.

 

자 그럼 완벽한 이해를 위해 레츠고~

---

[1] Location(Origin)

일반적으로 위치는 superview의 원점을 (0, 0)이라고 생각하고

x축, y축 기준으로 떨어진 거리를 계산해서 표시해!

 

거리를 계산하는 subview의 기준 또한 가장 왼쪽 최상단을 기준으로 한다고 생각하면 돼 :)

 

이 내용은 superview 좌표계를 설명하면서 꽤나 자세히 다뤘기 때문에 한 번만 복습하고 넘어갈게

자 여기서 하늘색 view는 파란색 view의 superview가 된다고 했었지!!

그렇다면 파란색 view의 origin(위치)은 몇일까???

.

.

.

파란색 view's origin == (0, 0)!!

 

아 그리고 여기서 location보다는 origin이라는 단어를 위치를 나타내는데 더 많이 쓰니깐 꼭 알아둬!!

계속 반복되는 내용이라 엄청 쉽지?? 하하.. 이해했을 거라 믿고 넘어가지요

---

[2] Size (Width & Height)

다음 화에 나올 예정인 Bounds와 마찬가지로 Frame의 size는 width와 height로 이뤄져 있어!!

 

weight, height의 정의는 직역하면 폭과 높이고, 가로 세로라고 생각해도 좋아

 

근데 상식적으로 폭과 높이가 Frame과 Bounds를 나누는 큰 관점 중 하나로 생각할 수 있을까??라는 생각이 처음에 내 머리를 강타했지만 무시하고 공부해 보자..

 

일단 이런 식으로 파란색 뷰를 10도만큼 돌려서 실험에 돌입해 보자

??????

분명 돌리기 전에는 width: 100, Height: 150이었는데 10도를 돌리니깐 엉망진창이 된 걸 볼 수 있어...

 

여기서 Frame의 Size의 비밀이 밝혀지는데.. 바로 Frame의 Size는 전체 직사각형을 모두 감싸는 회전되지 않은 직사각형의 폭과 넓이를 의미해!!!

 

음..? 그걸 어디에 쓰려는 거지?라는 생각이 들어버렸다..

그래서 알아본 결과!! 엥? 그냥 보통 view는 회전하지 않는 경우가 많아서 size를 구할 때 사용한다고 하네 허허

하지만 회전한 view의 경우 constraint를 잡을 때 필요한 공간을 확보하기 위해서 사용한다고 하니 알아두면 특정 상황에 유용하게 사용할 것 같아 :)

 

constraint는 Auto-Layout 단에서 다루는 내용인데 간단하게 설명하자면,

frame과 bounds는 좌표값을 바탕으로 절대적인 위치와 크기를 갖기 때문에 해상도가 모두 다른 iPhone11, 12, 13,14에서 앱의 view를 생성한다고 가정했을 때, 계속 화면에 맞게 view를 다시 만들어줘야 해..

 

이게 정말 너무 귀찮고 힘들기 때문에, view끼리 상대적인 위치와 크기를 제한해서 어떤 해상도에서 봐도 의도한 대로의 화면이 나오도록 하기 위해 Constraint라는 걸 만들어서 Auto-Layout(자동 레이아웃 설정)을 실현하는 거지.

 

이것도 시간이 된다면 포스팅을 해보겠어 :0

---

[3] 정리

1. 위치 (Origin): superview 좌표계를 기준으로 나타낸 위치이다. -> 이제 무슨 의민지 알겠지요

2. 크기 (Size): 해당 view를 덮는 0도로 바르게 회전된(?) 직사각형의 폭과 높이를 의미한다. -> 이것도 이해되겠지요

 

---

역시 다시 정리하면 새롭게 보이는 것들이 많구만.. 처음에 공부한 부분을 요약해 보자는 생각에 글을 썼지만 오히려 내용이 많아져 버렸다는 비화가... ㅎㅎ

 

다음 편은 Bounds에 대해 다뤄보겠어.. 이미 너무 많이 등장했지만 ㅋㅋㅋ 아무튼 1편은 끗 ~~

 

수고했다 나 자신 그리고 이 글을 전부 읽어준 당신!! 화이팅 입니다요 :)

 

2편: [iOS] Frame & Bounds (2) - Bounds