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
의 위치부터 보자.넓은데 두고 저런곳에 꾸역꾸역 그리는 나도 대단
먼저 first를 누르자 오랜지색 뷰가 선택이 되었고 밑에 frame 버튼을 누르면 frame
의 값을 알 수 있다.
사진의 (x, y)의 좌표값이 (27, 44)
임을 알 수 있다. 마찬가지로 크기도 (374, 506)
임을 알 수 있다.
그럼 이 프레임의 값을 바꿔볼까? 놀랍게도 쌉가능이다. 내가 무려 1시간동안 만들어서 쌉가능.
(x, y)의 좌표값을 (0, 0)으로 바꿔주니 왼쪽 맨위에 딱! 붙는걸 볼 수 있다. 재미있는건 안에 담겨있는 뷰도 같이 움직인다는 점!
그럼 다른 뷰의 (x, y) 좌표값을 바꿔보자
origin
(0, 0)을 기준으로 위치를 잡는다!다음은 크기이다.
frame
이라는 단어를 통해 어느정도 유추가 가능한데, 이 frame
의 크기는 뷰가 차지하는 영역을 감싸서 만든 사각형 의 크기이다.
설명이 조금 어려울 수 있는데 예제를 보자!
뭔가 버튼이 더 생겼다. 자꾸 다시 실행하는거 귀찮아서 리셋버튼 만들어벌임..
근데 뭔가 이상한 버튼이 있네? 눌러보자.
비포 | 에프터 |
---|---|
![]() | ![]() |
몬가.. 몬가 일어나고 있음.
다시frame
의 정의를 보자. 위치와 크기를 설명하는 프레임 직사각형 이라고 하고있다. 뷰가 차지하는 영역을 감싸는 직사각형! 딱 frame
이라는 단어 그대로 직사각형인 것이다.
이 frame
때문에, 사진을 보면 알 수 있듯 위치도 바뀌었다. 이게 바로 frame
의 특징.
이렇게 뷰를 돌리는 것은은 transform
프로퍼티로 구현하는데, 이 돌아가는 기준은 뷰의 anchor point를 기준으로 돌아간다. 기본적으로 anchor point는 frame의 center point와 같다.
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
는 크기가 변하지 않는다.frame
bounds
iOS) Frame vs Bounds 제대로 이해하기 (1/3)
iOS) Frame과 Bounds의 차이 (1/2)