[iOS] Frame & Bounds (2) - Bounds

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

 

이번 글은 Frame & Bounds 2편! Bounds에 대한 글이야.

Frame에 관한 1편을 안본 사람은 [iOS] Frame & Bounds (1) -Frame을 꼭 보고 오길 추천해!

---

Bounds

먼저 Apple Documents의 정의를 살펴보자

 

Bounds는 해당 뷰 자체의 좌표계에서의 Location과 Size를 나타내는 직사각형을 의미한다고 나와있네

 

음 Frame을 알아볼 때는 superview 좌표계를 따른다고 해서그에 대해 알아봤는데 Bounds는 해당 뷰 자체의 좌표계를 따른다??

뭔가 쉬운 말인 거 같은데 감이 안 오는 건 나만 그런 건 아니겠지... 그럼 자세히 알아보자!!

 

일단 자신의 좌표계를 따른다는 의미는 자신의 원점을 (0, 0)이라고 생각하는 것이라는데.. 음?? 뭔 말이여 이게

 

왜 자신의 원점을 (0, 0)으로 보는 거지??

보통은 해당 view의 절대적인 위치와 크기를 표한하기 위해 bounds와 Frame을 사용한다고 알고 있는데

자기 자신의 원점을 (0, 0)이라고 생각한다니...

 

이런 의문점을 가지고 이리저리 알아본 결과.. 역시나 쓰임새가 분명히 있었군요 bounds 선생님..

그것은 바로 ScrollView!! 에서 자주 쓰인다고 하네!!

ScrollView가 아니더라도 상위 뷰의 바깥으로 나간 하위 뷰가 있는 경우에도 쓰인다고 해!!

.

.

.

생소하니깐 곰곰이 한번 생각해 보자.

Scroll이 필요한 View라면 분명 iPhone 화면에 한 번에 출력되지 않을 만큼 커다란 View이기 때문일 거야.

 

예를 들어, 아이폰 화면의 크기를 넘어가는 엄청~ 큰 View를 만들었다고 생각했을 때

지금 우리가 보고 있는 view의 위치가 커다란 view의 어디쯤인지를 나타내기 위해 Bounds의 위치가 사용된다는 말인 것 같아!!

( 뒤에서 실험해 보자 ㅎㅎ 나도 사실 만들어본 적은 없어가지고.. )

 

이제 그럼 자신의 좌표계를 따른다는 말이 무슨 말인지 알겠지??

.. 이해가 잘 안 된다면 뒤의 Location 부분 예시를 보고 이해해 보자

 

그럼 이제 Frame에서 살펴본 것처럼 역시나 2가지 관점! "위치(Location)"와 "크기(size)"를 기준으로 Bounds를 해석해 보자 :)

---

[1] Location (Origin)

좌표계를 설명할 때마다 설명하는 것 같지만! 중요한 내용이니깐 반복해 볼게

iOS에서 좌표는 가장 왼쪽 최상단을 (0, 0)이라고 생각하고 오른쪽/아래로 갈수록 (+) , 왼쪽/위로 갈수록 (-) 된다고 생각하면 돼 ~

 

역시 이것도 눈으로 보는 게 더 이해가 쉽겠지

우리 블로그의 마스코트 잠만보를 잠깐 데려왔어

보라색 View안에 있는 잠만보 ImageView를 밖으로 벗어나게 만든 건데 불쌍한 잠만보는 반밖에 안 보여

 

이 잠만보의 몸통을 보고 싶다면 어떻게 해야 할까?

Bounds를 이용한다고 생각해 보자!!

.

.

.

정답은 보라색 View의 bounds를 바꾸는 거야 ~

봐바 보라색 View의 bounds를 x축 방향으로 70만큼 더해주면 어떻게 될까?? (처음 값은 당연히 (x: 0, y: 0)으로 설정되어 있음)

firstView == 보라색 View

 

바로 요렇게 되는 거지!

이제야 잠만보 몸통이 전부는 아니지만 대부분 보이게 됐어 :0

 

이해가 안 되는 친구들을 위해 더 쉽게 설명해 볼게!!

 

상위뷰가 담고 있는 하위뷰가 바깥으로 나간 경우,

Bounds는 상위 뷰를 보는 카메라의 위치 설정 값으로 생각하면 될 것 같아.

 

그렇기 때문에 상위 뷰의 bounds의 x 값을 키우면 ( 좌표계에서 x 축 값을 키운다(+)? -> 위에서 말했듯 오른쪽으로 간다! )

바깥으로 잠깐 외출 나갔던 잠만보의 몸통이 보이게 되는 거지!!

 

글로 적힌 정의로만 보면 굉장히 곤란한데 이렇게 예시로 보면 생각보다 할만하지?? ㅋㅎㅋ

다들 시간이 된다면 실습해 보길 바라 ^0^

---

[2] Size (Width & Height)

이번에는 Bounds를 Size 관점에서 생각해 보자.

 

Frame에서의 Size는 해당 view를 둘러싸는 직사각형의 위치와 폭을 Size로 갖는다고 표현했었어!!

그렇다면 Bounds는 어떨까?

 

이건 아주 아주 아주 간단해. 그냥 그 view 자체의 위치와 폭을 의미함.

당연히 Frame과 Bounds 둘 중 하나는 view 본연의 크기를 나타내 줄 거라고 생각했는데 Bounds가 그 역할을 하는 거지!

 

이건 예시가 없어도 무슨 소린지 알겠지만..

그래도 눈으로 보면 기억에 더 잘 남으니깐 한번 해보자

 

일단 코드로 45도만큼 보라색 뷰를 돌려주고 ~ 비교를 위해 frame과 bounds의 size와 height를 모두 출력하게 했어

결과를 보면!!!

.

.

.

삐딱한 잠만보 등장 :0

 

width랑 height 값을 확인해 보면

역시나 frame의 size는 삐딱한 보라색 View를 완전히 덮는 직사각형의 폭과 넓이를 나타내기 때문에 충격적인 수치가 나온 걸 확인할 수 있음

 

그리고 우리 Bounds는 아주 깔끔하게 원래 View의 크기가 출력되는 걸 볼 수 있어 ~~

 

Frame은 이전 포스팅에서 다른 경우에도 사용하지만 기울어진 view에서 constraint를 설정하는 등 특정 경우에 유용하게 쓰인다고 했었어!

 

Bounds는 그냥 수많은 UI 관련 메서드에서 이미지의 크기 비율을 줄이기 / 이미지 자르기 / 이미지 크기 구하기 등등을 위해 size를 인자로 전달받을 때 사용된다고 보면 돼 :)

 

---

[3] 정리

	Frame	Bounds
Location	superview 좌표계를 기준으로 해당 view의 위치(origin)를 나타낸다.	해당 view의 원점을 (0, 0)으로 잡는 자신의 좌표계를 기준으로 해당 view의 위치(origin)를 나타낸다.
Size	해당 view를 모두 감싸는 직사각형의 폭(width)과 넓이(Height)를 의미한다.	해당 view 본연의 폭(width)과 넓이(height)를 의미한다.

 

Frame과 Bounds는 정의에 나와있는 만큼이나 서로 굉장히 다른 의미를 가지고 있어!

 

그렇기 때문에 둘을 혼용해서 사용하는 경우도 많고 // 어떤 게 좋고 나쁘다의 개념이 아니기 때문에!!!

특정 View를 다룰 때, 두 개념의 정확한 의미를 파악하는 건 기본 중에 기본이라고 생각해

 

구현을 시작하면 너무 많이 사용하겠지만 은근히 많은 개발자들이 정확히 모르고 사용하는 경우가 많으니깐 (나도 그랬고,, ㅎㅎ)

정확히 알고 코드를 작성하길 바라 ~ 습관이 제일 무서운 법이니깐..

 

---

이걸로 Frame과 Bounds의 아주 기본적인 정의에 대해 대부분(?) 다뤄봤어!! ㅎㅎ

 

사실 Frame과 Bounds를 더 정확히 이해하기 위해서는 CGPoint, CGSize, CGRect, CALayer에 대해서 알아야 해... 크흠

관련된 많이 쓰이는 내용으로는 ClipsToBounds, MasksToBounds도 있으니깐 같이 공부하면 좋아.. 쿨럭

 

하지만 시작이 반! 우리는 벌써 반이나 한 거야

저것들도 어렵진 않은 내용이니깐 금방 공부할 수 있을 거야

 

아무튼 같이 공부하느라 수고했고!! 다음 포스팅에서 또 보자 ~~ 바이바이