[UIView] frame & bounds (2)

아래 좌표계가 나와서 본편의 사진은 소들님 걸로 사용하겠습니다
사진 출처: 개발자 소들이

학습 목표

• frame과 bounds 차이 다시 알아보기
• bounds를 왜 쓰는 건지 알아보기

---

학습 내용

frame vs bounds

	frame	bounds
origin (x, y) 기준점	Super View의 좌표계	자신의 좌표계
size (width, height) 기준점	View 영역 모두를 감싸는 사각형	View 영역 자체

지난 주에 하나하나 실습하며 알아봤던 각각의 특징이다.

이제 위치 (x, y)를 변경할 때, frame과 bounds가 어떻게 달라지는 지 알아보자

frame의 origin 값을 변경하는 경우

bounds가 아닌 frame의 origin은 SuperView의 영향을 받음

즉, secondView가 바뀌면, thirdView 위치도 바뀜

마치 아래처럼 말이다.

bounds의 origin 값을 변경하는 경우

bounds.origin은 모두 (0, 0)으로 이루어져있음

그리고 이론상, secondView.bounds.origin을 (50, 50) 이동 시키면

secondView가 움직일 거 같지만 그렇지 않았다.

그 결과 secondView가 움직이는 것이 아닌, thirdView가 움직였다.

내가 뭘 본거지 싶어서 실습해봤다.

왜 자식인 blueView가 움직이는 걸까 ?

이론상 반대로 움직인 것이다.

알아 본 결과,

bounds에서 origin (x, y)값을 (50, 50)으로 해준 것은

frame처럼 (50, 50) 위치로 이동해! 가 아니라고 한다.

viewport를 secondView의 자체 좌표계에서 (50, 50)으로 이동한다는 것이라는데..

viewport와 bounds

실제 화면이 보여지는 창

만약 iPhone 8이 320 * 480만 보여줄 수 있는데,

내가 보여주고 싶은 화면이 500 * 800이면 모두 다 보여주지 못 한다.

여기서 보여지는 화면이 ViewPort임!

다시 말하면,

bounds의 x, y좌표를 바꿔주는 것은 viewport의 x, y를 바꿔주는 것으로

viewport가 바뀌면서 다른 화면이 보이게 되는 것이다.

위 사진은 (200, 200)만큼 옮겨준 것.

중요

1. viewport가 바뀐 것.
   즉, redView와 blueView의 frame이 바뀐 것이 아님
2. viewport를 이동하기에 (200, 200)만큼 양의 방향으로 이동했으나
   실제 화면에서는 redView와 blueView가 (-200, -200)으로 이동한 것처럼 보임

즉, bounds의 origin을 바꾸게 되면,

내가 원한 방향과 반대 방향으로 SubView들의 frame이 움직이는 것처럼 보임

이게 핵심인듯

frame이 움직인 게 아니라, viewport가 움직이는 것

예제 다시보기

아까 secondView를 (50, 50)만큼 움직여줬는데, 원하는대로 움직이지 않았었다.

bounds는 모든 UIView에 대해 존재하므로,
모든 UIView는 자기 자신의 크기만큼 viewport를 가진다고 가정

1. 뷰컨트롤러의 Root View가 가진 viewport

rootView입장에서 자식은 firstView - secondView - thirdView임

그럼 뷰 포트는 아래와 같이 보임

rootView의 origin을 (100, 100)으로 변경하면 다음과 같이 viewport가 이동함

즉, 위위 사진의 예상은 rootView일 때였고,

secondView의 bounds를 바꾸면 이렇게 되는 것이 아님.

2. firstView의 viewport

firstView입장에서는 secondView와 thirdView를 자식으로 가지고 있음

여기서 firstView의 bounds.origin을 (100, 100)만큼 이동시켜주면

아래와 같이 보이게 된다.

여기서 또 다른 개념,

clipsToBounds

SubView가 나의 View를 벗어났을 때
넘어간 부분을 보여줄지 말지 결정하는 것, 디폴트는 false이다 (상관없다는 뜻)

SubView가 부모의 뷰를 벗어났는데 잘 보이고 있다.

이게 가능한 이유는 firstView.clipsToBounds 옵션 때문.

firstView.clipsToBounds = true로 해주면 잘리게 됨

3. secondView 입장에서 viewport

secondView는 thirdView를 자식으로 갖고 있음

이 상태에서 secondView.bounds.origin을 (50, 50) 옮겨주면 아래와 같이 됨

정리

View의 Bounds.origin을 변경하면,

자기 자신은 가만히 있고 SubView가 반대로 이동하는 것 처럼 보이고 있으나,

사실 그렇지 않음

실제로는 SubView가 움직이는 게 아닌,
내가 갖고 있는 viewport가 변경되어 SubView가 다르게 보이는 것

---

배운 점

• frame과 bounds를 옮겼을 때의 특징을 알게됐다
• clipsToBounds의 기능을 알게 되었다.
• viewport의 개념을 알게 되었다.
• UIView는 어렵다..

---

참조 링크

https://babbab2.tistory.com/45