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

 

 

🤔 문제 🤔

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

 

 

1편 보기

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

 

 

 

---

 

 

 

 

2. Size

1편에 이어 2편에서는 bounds와 frame의 size를 비교해보자.

---

 

 

 

📚공식문서 다시보기

---

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를 조정하라.

 

 

 

 

 

🦾실습하기

---

size 변경

Storyboard를 통해 직사각형을 배치해 출력해보면 bounds와 frame의 size는 동일하다. 그럼 frame의 size를 변경하면 어떨까? 변경된  size에 맞게 bounds의 size도 변경된다. bounds의 size를 변경해보아도 동일하다. 이는 공식문서에 잘 나와있다. 공식문서에는 size 변경이 서로의 size에 반영된다고 한다. 

 

공식문서

bounds	- size는 frame 프로퍼티에 있는 사각형의 size와 동일하다. - size 변화는 또 frame 프로퍼티의 사각형 size가 일치되도록 변경한다.
frame	- bounds 사각형의 size를 변경시킨다.

 

 

 

Size 변경 시 위치

bounds와 frame은 size는 동일하게 변경되지만, 위치도 동일할까? 아니다. 왜냐하면 서로의 기준 좌표 시스템이 다르기 때문이다.

변경 전 직사각형을 연노랑뷰로 위치를 확인하고 각각에 대해 size를 변경해보자. 위 사진처럼 frame과 bounds는 size 변경에 따라 모양은 동일하지만 크기가 줄어든 기준점이 다르다. 
frame의 경우, 부모 뷰의 좌표시스템을 기준으로 하기 때문에 왼쪽 상단을 기준으로 모양이 변화했다. 하지만 bounds의 경우는 공식문서에 나와있듯, size의 변화는 center point를 기준으로 변화한다. 따라서 size는 동일할 지라도 위치는 다르다.

 

공식문서

bounds	- 이 사각형의 size 변화는 center  point를 기준으로 view를 커지게 하거나 줄어들게 한다.
frame	- 이 사각형은 부모 뷰의 좌표 시스템을 기준으로 뷰의 크기와 위치를 정의한다.

 

 

 

회전된 View의 Size

그럼 frame과 bounds는 size에 있어서 모두 동일한가? 그건 아니다. 둘의 차이는 바로 이름에서 알 수 있다.
bounds는 경계라는 의미, frame은 틀 이라는 의미를 갖고 있다. 처음에 공식 문서만 읽었을 때에는 경계와 틀의 의미를 잘 파악하기 힘들었다. 하지만 실습을 해보면 왜 bounds는 경계이고, frame은 틀인지 와닿는다.

노랑뷰를 너비를 150, 높이를 10으로 바꾼 후 약 0.25정도 회전시켰다. 그리고 bounds와 frame의 size를 출력해보니 분명 위에서는 똑같던 크기가 달라졌다. 이는 바로 frame이 틀이기 때문이다.

빨강뷰는 너비가 113, 높이가 113이다. 근데 노랑뷰의 frame.size도 이와 같다. 즉 기울어진 노량뷰를 사각형 틀로 감싸면 그게 바로 frame의 size인것이다. 그럼 bounds는 뭐지? 바로 노랑뷰의 바깥 경계선의 너비와 높이로, 즉 실제 노량뷰 크기이다.

그래서 frame이 틀이고 bounds가 경계인 것이다.

 

 

 

 

😴마무리하며

---

간단 정리

frame와 bounds는 서로 size가 반영된다. 하지만 frame은 사각형 틀, bounds는 실제 경계선이라는 걸 잊지 말자.

 

 

transform

이번에 뷰를 회전시키면서 transform을 처음 사용해 보았는데 이것도 view의 프로퍼티 중 애니메이션이 가능한 프로퍼티라고 한다. frame의 공식문서에서 transform의 프로퍼티가 identifier이 아니면 적용이 안 된다는 내용이 있는데, 이와 관련해서 애니메이션을 공부해보면 좋을 것 같다.

 

 

 

 

 

---