✅ 학습 내용
📌 frame vs bounds
💎 frame
The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.
-
슈퍼뷰의 좌표계에서 뷰의 위치와 크기를 설명하는 프레임 직사각형입니다.
-
frame에서 가장 핵심이 되는 것은 슈퍼뷰의 좌표계 이다. 여기서 슈퍼뷰는 이름에서도 유추할 수 있듯, 계층구조상 자신을 담고있는 상위계층을 의미한다.
-
이 그림을 다시 보자.
View의 위치를 잡는 기준이 자기자신을 담고 있는 슈퍼뷰이다. 슈퍼뷰의origin즉, 왼쪽 맨위(0, 0)에서 (x, y)포인트 만큼 떨어져 있다. 그리고 그 뷰의 크기를width와height가 지정하고 있다. -
이렇게 뷰의 위치와 크기를 슈퍼뷰를 기준으로 잡게 되는데, 그걸 나타내는 것이 바로
frame이다.
✏️ 위치
frame의 위치부터 보자.
- 이 앱은 이번 예제를 위해 무려 1시간동안 만든 앱이다. 엄청난 앱이라 할 수 있다.
-
넓은데 두고 저런곳에 꾸역꾸역 그리는 나도 대단 -
먼저 first를 누르자 오랜지색 뷰가 선택이 되었고 밑에 frame 버튼을 누르면
frame의 값을 알 수 있다. -
사진의 (x, y)의 좌표값이
(27, 44)임을 알 수 있다. 마찬가지로 크기도(374, 506)임을 알 수 있다. -
그럼 이 프레임의 값을 바꿔볼까? 놀랍게도 쌉가능이다. 내가 무려 1시간동안 만들어서 쌉가능.
-
(x, y)의 좌표값을 (0, 0)으로 바꿔주니 왼쪽 맨위에 딱! 붙는걸 볼 수 있다. 재미있는건 안에 담겨있는 뷰도 같이 움직인다는 점!
-
그럼 다른 뷰의 (x, y) 좌표값을 바꿔보자
- 아하! 이제 확실하게 알겠다. (x, y) 좌표값은 슈퍼뷰의
origin(0, 0)을 기준으로 위치를 잡는다!
✏️ 크기
-
다음은 크기이다.
-
frame이라는 단어를 통해 어느정도 유추가 가능한데, 이frame의 크기는 뷰가 차지하는 영역을 감싸서 만든 사각형 의 크기이다. -
설명이 조금 어려울 수 있는데 예제를 보자!
-
뭔가 버튼이 더 생겼다. 자꾸 다시 실행하는거 귀찮아서 리셋버튼 만들어벌임..
-
근데 뭔가 이상한 버튼이 있네? 눌러보자.
- !?!? 초록색 뷰가 삐딱해졌다. 그런데 뭔가 이상하다. 크기가 뭔가 바뀐거 같다.
| 비포 | 에프터 |
|---|---|
|  |
-
몬가.. 몬가 일어나고 있음.
-
다시
frame의 정의를 보자. 위치와 크기를 설명하는 프레임 직사각형 이라고 하고있다. 뷰가 차지하는 영역을 감싸는 직사각형! 딱frame이라는 단어 그대로 직사각형인 것이다. -
이
frame때문에, 사진을 보면 알 수 있듯 위치도 바뀌었다. 이게 바로frame의 특징. -
이렇게 뷰를 돌리는 것은은
transform프로퍼티로 구현하는데, 이 돌아가는 기준은 뷰의 anchor point를 기준으로 돌아간다. 기본적으로 anchor point는 frame의 center point와 같다.
💎 bounds
The bounds rectangle, which describes the view’s location and size in its own coordinate system.
- 경계 직사각형, 자신의 좌표계에서 뷰의 위치와 크기를 설명합니다.
bounds에서 가장 핵심이 되는 것은 자신의 좌표계 이다.
✏️ 위치
-
노란색 뷰의
bounds값을 보자. (x, y)값이 (0, 0)인 것을 알 수 있다. -
슈퍼뷰와 아무런 연관 없이 자기자신이 기준이 되는 것이다.
-
그럼 이
bounds의 위치 값은 항상 (0, 0)일까? 라는 생각이 들 것이다. 하지만, 이bounds는 몇몇 상황에서 매우 중요한 역할을 한다. 예를 들어 스크롤 뷰의contentOffset을 지정할 때 등등.. -
사실 이렇게 앱까지 만들어가며 열심히 설명한 이유가 바로 이 스크롤 뷰를 이해하고 제대로 사용하려면, 이 개념이 반드시 필요하기 때문이다.
-
일단, 이 부분은 다음에 시간이 남을 때 틈틈히 정리하기로 하고.. 다음 크기를 보자.
✏️ 크기
-
bounds의 크기는frame의 크기와는 다르게 뷰 자체의 영역을 나타낸다. -
다시 삐뚤어진 초록색 뷰를 보러가자.
frame | bounds |
|---|---|
|  |
- 놀랍게도
bounds의 크기값은 그대로이다!frame과 다르게bounds는 뷰 자체의 영역을 나타내기 때문이다. - 이러한 이유로 크기가 변하는
frame과 다르게 뷰를 돌려도bounds는 크기가 변하지 않는다. - 마찬가지로, 위치(origin)도 변하지 않는다.
frame
bounds
iOS) Frame vs Bounds 제대로 이해하기 (1/3)
iOS) Frame과 Bounds의 차이 (1/2)
