[ iOS ] Bounds와 Frame 비교 - 1. 공식문서와 origin

 

🤔 문제 🤔

Bounds와 Frame의 차이는 뭘까? UIView에는 bounds 프로퍼티와 frame 프로퍼티가 있다. 공식 문서를 봐도 둘의 차이는 크게 와닿지 않는다. 따라서 StoryBoad를 사용해 실습하며 View의 Bounds와 Frame을 비교 분석 해보자!

 

 

---

 

 

 

1. 공식문서와 origin

 

📚공식문서 확인하기

Bounds의 공식문서

/UIKit /Views and controls /UIView /bounds
Instance Property

bounds
자체 좌표 시스템으로 해당 view의 위치와 크기를 표현하는 경계 사각형

기본적인 bound 원점은 (0, 0)이고, size는 frame 프로퍼티에 있는 사각형의 size와 동일하다. 이 사각형의 size 변화는 center  point를 기준으로 view를 커지게 하거나 줄어들게 한다. size 변화는 또 frame 프로퍼티의 사각형 size가 일치되도록 변경한다. 경계 사각형의 좌표는 항상 point로 지정된다.
경계 사각형의 변화는 draw(_:) 메서드 호출 없이 자동으로 view를 다시 표시한다. 만약 당신이 UIKit가 draw(_:) 메서드를 호출하길 바란다면, contentMode 프로퍼티를 UIView.ContentMode.redraw 로 설정해라. 이 프로퍼티의 변경사항에 애니메이션을 적용할 수 있다.

 

Frame의 공식문서

/UIKit /Views and controls /UIView /frame
Instance Property

frame
부모 뷰의 좌표 시스템에 기반한 view의 위치와 크기을 표현하는 틀 사각형

이 사각형은 부모 뷰의 좌표 시스템을 기준으로 뷰의 크기와 위치를 정의한다. 레이아웃 작업 동안 이 사각형으로 크기를 설정하고 뷰를 배치할 수 있다. frame 프로퍼티 설정은 center 프로퍼티에 의해 지정된 point를 변경하고, bounds 사각형의 size를 변경시킨다. frame 사각형의 좌표는 항상 point 단위로 설정된다.
 
(Warning) 만약 transform 프로퍼티가 식별 transform이 아니라면, 이 프로퍼티의 값은 정의되지 않으므로 무시해야한다.
 
frame 사각형은 변화는 draw(_:) 메서드 호출없이 자동으로 뷰를 다시 표시한다. 만약 frame 사각형이 변경될 때 UIKit가 draw(_:) 메서드를 호출하길 바란다면, contentMode 프로퍼티를 UIView.ContentMode.redraw 로 설정하라.
이 프로퍼티 변경에 애니메이션을 적용할 수 있다. 하지만 만약 transform 프로퍼티가 비식별 transform을 포함한다면, frame 프로퍼티의 값은 정의되어질 수 없으며 수정해서는 안 된다. 이런 경우에, center 프로퍼티를 사용하여 뷰를 재배치하고 대신 bounds 프로퍼티를 사용하여 size를 조정하라.

 

공식 문서에 나온 내용들로 비교 표를 만들어보자. 아래 구분은 실습을 하다보면 다 연관되어 있다. 따라서 주의깊게 보면 좋다.

	bounds	frame
표현	경계, 범위	틀
좌표	자체 좌표 시스템 - (0, 0) 기준	부모 뷰의 좌표 시스템
단위	point	point
애니메이션	o	o
자동 뷰 표시	o	o
관련된 프로퍼티	frame	frame, center, transform

 

 

 

🦾실습하기

Frame 실습

1. 보라뷰 frame의 기본 origin 확인하기

보라뷰를 스토리보드로 배치한 후  print(purpleView.frame)   를 해보면 그림 속 좌표값이 나온다

 

 

2. 보라뷰의 frame.origin을 (0, 0)으로 변경하기

frame은 부모 뷰 기반의 좌표 시스템을 갖고 있기 때문에 보라뷰는 가장 상위 View의 좌표에 기반하여 (0, 0)으로 이동한다. 보라뷰의 자식뷰들 또한 부모뷰에 기반한 frame을 갖고 있으므로 보라뷰를 따라 이동한다. 즉 보라뷰의 frame.origin을 변경하면 자식뷰도 따라간다.

 

 

3. 노랑뷰의 frame.origin을 (0, 120)으로 변경하기

노랑뷰는 부모인 보라뷰의 좌표시스템에 기반해 (0, 120)으로 이동한다. 그리고 그 자식뷰가 따라간다.

 

4. 민트뷰의 frame.origin을 (0, 0)으로 변경하기

민트뷰는 부모인 노랑뷰의 좌표 시스템에 기반해 (0, 0)으로 이동한다. 

 

 

 

bounds 실습

frame은 공식문서만으로도 이해가 가능해 실습도 무리없이 진행했다. 하지만 bounds는 공식문서만으로 이해하기에 조금 어려움이 있어 실습이 꼭 필요하다.

 

1. 보라뷰의 bounds의 기본 origin 확인하기

보라뷰를 스토리보드로 배치한 후 print(purpleView.bounds) 를 해보면 (0, 0) 좌표값이 나온다. 보이는 것과 다른 값에 처음에는 당황했지만 공식문서를 보면 이해가능하다. 공식 문서에는 bounds의 기본적인 원점이 (0, 0)이라고 한다. 즉, 현재 스토리보드로 배치된 위치가 자체 좌표계를 가지는 bounds의 (0, 0)인 것이다.

 

2. 보라뷰 bounds.origin을 (100, 0)으로 변경하기

보라뷰의 bounds.origin을 변경했는데 자식뷰가 움직인다. 오히려 보라뷰는 그 자리에 가만히 있는다.

 

3. 노랑뷰 bounds.origin을 (100, 0)으로 변경하기

변경된 보라뷰를 두고 이제 노랑뷰를 변경해보자. 그럼 자식뷰가 움직여 있고, 오히려 노랑뷰는 그 자리에 그대로이다.

 

4.  최상위 View의 bounds.origin을 (100, 0)으로 변경하기

그럼 최상위 View를 변경하면 어떻게 될까? 변경된 보라뷰, 노랑뷰를 두고 최상위 View를 변경해보면, 자식뷰들이 이동한다. View는 그 자리 그래도이다.

 

 

🗃️정리하기

어떻게 해당 뷰가 아닌 자식뷰들이 움직일까? 이는 휴대폰 화면을 생각해보면 쉽다. 

우리가 큰 사진을 휴대폰으로 확대했을 때 화면에 담기는 부분만 우리는 볼 수 있다. 좌우로 화면을 이동하면 화면에 담기지 않는 부분은 잘리게 된다. bounds도 똑같다. 보라뷰를 휴대폰 화면이라 생각해보자. 보라뷰에 손가락을 대 오른쪽 100정도 이동시킨다 생각해보자.그럼 노랑뷰는 아래 예시처럼 왼쪽으로 이동되어 일부분만 보일 것이다.

Bounds는 곧 우리가 보는 화면인 것이다. 즉 View, 보라뷰, 노랑뷰의 bounds가 뷰 각각의 화면인 것이다.

 

 

 

ScrollView

위의 예시는 뭔가 어디서 많이 본 것 같다. 바로 우리가 화면을 스크롤하는 작업과 동일하다. ScrollView에는 전체 내용에 해당하는 Content영역이 있고 우리가 보는 화면인 frame 영역이 있다. 우리는 상하좌우 스크롤을 하며 Content영역을 돌아다닌다. 이때 우리가 어디를 보는지 알 수 있는 좌표가 있는데 그게 바로 contentOffset 프로퍼티이다. contentOffset과 bounds는 동일한 역할을 수행하는 것이다. ScrollView에 대한 설명은 이전 글을 통해 확인할 수 있다.

 

[ iOS ] ScrollView 화면 캡쳐하기 (Image Creation)

 

 

 

각각의 origin은 어디에 적용될까?

Frame은 부모 뷰를 기준으로 실제 배치되기 때문에 Layout을 구성할 때 사용할 수 있을 것 같다.

Bounds는 굿노트같은 걸 만들 때 사용할 수 있을 것 같다. 왜냐하면 굿노트의 경우 확대와 이동이 자유로운데, 이러한 작업은 자체 좌표계를 갖고 있어 화면 역할을 하는 bounds가 적합할 것 같다. 하지만 아직 실습해보지 않아 정확하지 않다.

 

 

 

 

2편

[ iOS ] Bounds와 Frame 비교 - 2. Size

 

 

 

 

frame
bounds
⭐️Frame vs Bounds 제대로 이해하기