본문 바로가기

iOS/iOS

iOS) Frame vs Bounds 제대로 이해하기 (1/3)

 

 

안녕하세요 :D

소들입니다 후후.........

 

오늘은

FrameBounds에 대해 알아볼 거예욥...!

그 있잖음.. UIView에 등장하는 두 놈...

 

 

 

 

이전 포스팅 에서

CGRectView의 위치(origin)와 크기(size)를 나타내기 위해 사용한ㄷ ㅏ했어요!

따라서

 

frame과 bounds는 View의 위치와 크기를 나타내는구나

 

정도로 유추할 수 있겠네용..? :)

자, 근데 다음과 같이 View를 하나 만들고

 

 

 

 

이 View의 frame과 bounds를 각각 출력해보면

 

 

 

 

frame과 bounds의

size(width, height)는 동일하지만,

origin(x, y) 값이 다름을 볼 수 있슴니다!!!!

 

근데 또 frame과 bounds의 size가 동일하다고

frame과 bounds는 origin만 달라!!! 하고 오해하고 계신 분도 있을 거 같아요..

(아니랍니다 😱 둘의 size가 어떻게 다른지도 알아볼 거예요)

 

 

쨌든

근데 그럼 뭐가 어떻게 다른데? 라고 물어본다면..

뭔가 알고 있지만 명확히 설명하자면 모르겠는

그런 사이랄까........? 따흑흑 (내 기준...)

 

그래서 이를 확실하게 짚고 넘어가기 위해서 포스팅을 해봅니다 🐝

모든 포스팅은 편의 말투로 합니다~!!

(이번 포스팅은 완전 초보를 대상으로 포스팅 해서 진행이 답답할 수도 있습니다)

 

 

 

 

 

1. Frame

 

자, 먼저 frame에 대해서 볼 거임 :)

 

 

 

Super View 좌표계에서 View의 위치와 크를 나타낸다

 

 

자, 여기서 먼저 눈에 띄어야 하는 것은

바로 Super View 좌표계 라는 것임!!!!

 

 자, 하나하나 알아 봅시다 💩

 

 

 

 

1-1. Super View가 뭔가요? 👀

 

iOS 병아리🐣를 위하여..

Super View가 뭐임?? 이라고 한다면

우리는 화면을 구성할 때 UIView를 이용해서 하잖음?

(UIButton, UILabel 등 모두 UIView를 상속 받고 있음)

 

뭐 쨌든 이러한 뷰들을 요리조리 넣고 빼고 하면서 화면을 만들텐데

이 View로 화면을 구성할 땐 계층 구조라는 것이 존재함 👀

 

 

예로 보면

View Controller를 만들면 자동으로 생성되는

 

 

 

 

최상위 View인 루트 View가 존재하고,

(이름 자체는 그냥 View인데 편의상 루트 View라 부르겠음)

 

 

 

 

루트 View는 하위 View(firstView)를 둘 수 있고

 

 

 

 

하위 View(firstView) 또 하위 View(secondView)를 둘 수 있음

 

뭐 이런 식으로 View가 계층 구조를 갖는다는 말임 ;)

(아무 View도 추가 안하면 루트 View 하나만 있음)

 

 

 

 

참고로 이런 경우 firstView와 secondView는

루트 View의 하위 계층이자, 둘은 동일한 계층

 

 

쨌든 다시 돌아와서  Super View란

이 계층 구조에서, 내 View의 한칸 윗 계층 View를 말하는 것임

음.. 이렇게 글로만 설명하면 헷갈리지만 실제 스토리보드를 보면 이해하기 쉬움

 

 

 

 

secondView Super View는

바로 한칸 윗 계층인 firstView가 되는 것임

오케!? 👀

 

 

 

요런 식임 👀

 

secondView의 SuperView는 firstView,

firstView의 SuperView는 루트 View

 

이런 식으로 된단말임!!!!

 

Super View란 최상위 View인 루트 View가 아니라

나의 한칸 윗 계층 View를 말하는 것임!!!!

 

그럼 Super View에 대한 설명 끝 🎃

이 Super View에 대한 이해가 완벽해야 다음 내용을 이해할 수 있음돠 :)

 

자 이젠 frame의 origin 즉, View 위치를 얻는 방법에 대해 먼저 알아보겠움

 

 

 

 

1-2. frame의 origin(x, y)

 

자, 이제 frame의 origin 값이 어떻게 설정되는지 보겠움 :)

 

frame이 나타내는 origin(x, y) 좌표는

 

Super View의 원점을 (0, 0)으로 놓고

원점으로부터 얼마나 떨어져 있는지를 나타낸 것임

(원점이란 View의 가장 왼쪽, 가장 윗 부분을 말함)

 

Super View의 원점이 곧 좌표의 시작점(0, 0)이 되는 거니까

Super View의 좌표계에서 나타낸단 표현이 되는 것임

 

애플 공식 문서의 "Super View 좌표계"란 표현을 이해시키기 위해 이렇게 말한 거지만

머.. 더 쉽게 말하면

 

SuperView의 원점으로부터 얼마큼 떨어져 있는가

 

임.. :)

또 이론으로만 설명하면 이해가 잘 안 되니께

 

 

 

 

아까 봤던 위 예시를 이용하여

firstView, secondView가 frame의 origin을 어떻게 갖는지 봐볼 것임

 

 

 

 ① firstView 

 

 

 

먼저, firstView의 SuperView는 루트 View임

루트 View는 Super View가 없으니 원점 좌표가 (0, 0)임

 

쨌든

firstView는 루트 View의 원점을 기준으로

 

x축으로 20

y축으로 50

 

만큼 떨어져 있으니,

firstView의 frame의 origin은

 

(20, 50)

 

이 되는 것임 오키???🌝🌝

 

 

 

 

 ② secondView 

 

 

 

secondView의 Super View는 firstView

그리고 firstView의 원점의 좌표는 (20, 50)임

 

하지만!!!!!! 그것따윈 중요하지 않음.

원점에서 얼마큼 떨어져 있는지만 중요할 뿐

 

secondView는 firstView의 원점을 기준으로

 

x축으로 10

y축으로 10

 

만큼 떨어져 있으니,

secondView의 frame의 origin은

 

(10, 10)

 

이 되는 것임

오키?!?!?!?

 

 

 

자, 이렇듯

frame의 경우 origin을 Super View의 좌표계에서 나타냄(좌표 시작점이 Super View의 원점)

즉, Super View의 원점에서 얼마큼 떨어져 있느냐 를 나타내는 것임

🥴

 

 

 

 

1-3. frame의 size(width, height)

 

자, 이제 frame의 size 즉, width, height를 봐보겠움!!!!

frame의 size는

 

 View 영역을 모두 감싸는 사각형으로 나타낸 것

 

이것이 정의임..ㅎㅎ

ㅎㅎ;; 먼말임;

 

예시로 보여드리겠음

 

 

 

 

 

자, 이렇게 width = 200, height = 130 VIew가 있을 때 

이 VIew의 frame.size를 출력 해보면

 

 

 

 

이렇게 우리가 지정한 값으로 출력 됨 ㅇ..ㅇ

근데 있잖음 

 

 

 

 

요롷게 View를 회전시키면

 

 

 

 

이렇게 되잖음!? 

 

나는 View를 회전시켰을 뿐 width, height는 건들지 않았음!!!

근데 회전 후 frame의 size를 출력해보면

 

 

 

 

width, height가 변함..!!!!!!! 😱

(소숫점 한자리만 출력하도록 했음)

 

이유라 함은..!

위에서 설명 했듯이 frame의 size는

 

 View 영역을 모두 감싸는 사각형으로 나타낸 것

 

이기 때문임..

감싼다.. 이말이 핵심

말이 좀 어려운데 다음 그림을 보면 이 말이 이해가 감

 

 

 

 

으응.. 이렇게 된다는 말임

frame의 size는 View 자체의 크기가 아니라

View가 차지하는 영역을 감싸서 만든 사각형이 바로

바로 frame의 size라는 것임

 

따라서 이런 식으로 frame의 size가 변경되면

 

 

 

 

그에 따라 frame의 origin 값도 변경될 수 있음!!!

이것이 바로 frame의 속성 ㅎㅎ

 

 

그럼 회전시켰을 땐 진짜 View의 size (200, 130)는 알 수 없나?ㅜㅜ

아니.. !!! 이때 사용하는 것이 bounds임!!!!

스포 ㅈㅅ

 

쨌든 frame의 size가 어떻게 측정되는지에 대해서도 알아봤음 ㅎㅎ 

 

이 글을 읽는 분들이 frame에 대해 마스터가 되었다고

가정하고.. bounds로 넘어가 보겠움.. 👀

 

 

 

 

2. Bounds

 

자, 이번엔 bounds에 대해 볼 것임 :)

 

 

 

자신의 좌표계에서 View의 위치와 크를 나타낸다

 

 

frame이 Super View의 좌표계였다면,

bounds는 

 

자신의 좌표계

 

이것이 핵심임 ㅎㅎ

거두절미하고 바로 설명으로 넘어가겠움

 

 

 

 

2-1. bounds의 origin(x, y)

 

bounds의 좌표계는

frame과 달리 Super View와는 아!~~~ 무 상관이 없으며

 기준이 자기 자신이라고 했음

 

무슨 말이냐...

 

자신의 원점을 (0, 0)으로 놓음

 

좌표의 시작점을 자기의 원점으로 놓는단 말임

때문에 View를 처음 생성하면 

 

bounds의 origin은 무조건

 

 

 

 

(0, 0)으로 초기화 되어 있움

 

그림으로 보면

 

 

 

 

머 이렇다는 말임

 

근데ㅔ ... 흠....

근데 그럼 항상 (0, 0)일거면

bounds의 origin은 무슨 의미가 있나..???;ㅁ;

싶었는데!!!!

 

bounds를 바꿔줘야 하는 경우 (대표적인 예 : ScrollView의 ContentOffset)

를 보면 왜 bounds가 필요한지 알 수 있음

 

흠 이부분은 넘 길고 좀 어려워져서 ㅠ 다음 포스팅에 이어서 하겠음!!!

이번 포스팅에선 일단 frame과 bounds의 개념에 대해서만 확실하게 알고 가겠음

 

지금은 bounds가 왜 존재하는지 이해 안 갈 것임!

근데 다음 포스팅을 읽으면 이 bounds란 놈이 왜 있는지 이해가 갈 것이니

지금은 그냥

 

bounds의 origin은 자신의 좌표계를 기준으로 삼는구나

처음엔 (0, 0)로 초기화 되는구나

 

이 정도만 알고 넘어갑시다 :)

 

 

 

 

2-2. bounds의 size(width, height)

 

이건 아까 내가 frame size를 설명하다가 스포해버렸는데

bounds의 size는

 

View 자체의 영역을 나타낸 것

 

이말임

아까 frame의 size와 비교해서 생각하면 쉬움

 

 

 

 

이 View의 Bounds의 size는 frame과 마찬가지로

 

 

 

 

내가 그린 View 사이즈 만큼 출력 됨 👀

 

 

 

 

근데 이렇게 회전 시키고 출력하면 frame의 size는 바꼈단 말임?

 

 

 

 

하지만 bounds의 size는 바뀌지 않음

 

왜냐??

 

bounds는 View 자체의 영역을 나타내기 때문

frame 처럼 View 영역을 모두 감싼 사각형이 아님

 

때문에

위 그림 자체가 bounds의 size를 나타내는 그림임 ㅎㅎ

 

 

그렇다면 bounds의 origin은 변할까?

결론적으로 말하면 변하지 않음!!

 

 

 

 

왜냐면 bounds는 시작점이 자신의 원점이기 때문에

View가 회전하든 안하든 자신의 원점이 곧 좌표의 시작점

 

 

 

 

3. 정리

 

  frame bounds
origin (x, y) 기준점 Super View의 좌표계 자신의 좌표계
size (width, height) 기준 View 영역을 모두 감싸는 사각형 View 영역 자체

 

 

 

 

 

.

.

.

 

흐엉 힘들다

오늘은 간단?하게 frame과 bounds의 개념에 대해 알아 봤어요 :)

 

근데 이건 정말 개념에 대해서 공부한 것이기 때문에

실제 frame은 언제, bounds는 언제 써야할지 잘 모를 것 같아요!

 

때문에 다음 포스팅에선

 

frame vs bounds

frame을 사용하는 이유

bounds를 사용하는 이유

 

에 대해 자세하게 다뤄볼 예정입니다!

나름 심화 내용이라 공부 많이 하고 포스팅 할게용 :)

 

 

이해 안 가시거나 틀리 내용은 언제든 댓글 남겨 주세요 ! 😱

 

 

 

 

2편 링크

https://babbab2.tistory.com/45



Calendar
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
최근 댓글
Visits
Today
Yesterday