iOS frame vs bounds

✅ 학습 내용

📌 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)