[iOS] UIView 살펴보기 frame과 bounds의 차이

UIView는 사용자에게 보여지고 상호작용하는 부분인 만큼 정말 중요하다고 할 수 있는데요. 그래서 오늘은 정말 기초적이면서도 중요한 UIView에 대해 살펴보려 합니다.

 

UIView는 UIResponder를 상속받는 class로 스크린 안의 여러 content를 관리하는 객체입니다. 여기서 UIResponder는 이벤트를 응답하고 처리하는 class 입니다. (touchesBegan 등등..)

 

View는 사용자와 인터렉션하는 가장 주된 방식임으로 그에 따른 다양한 책임을 갖습니다.

 

뷰 그리기, subview 관리, 이벤트 핸들링 등등..

 

그리고 뷰는 다른 뷰 안에 중첩되어 뷰 계층을 생성 할 수 있고(부모 뷰 - 자식 뷰 관계), 이는 연관된 콘텐츠를 구성하는데 있어 더 편리한 방법을 제공해 줍니다. 여기서 부모 뷰(superview)는 여러개의 자식 뷰(subview)를 가질 수 있지만 자식 뷰는 오직 하나의 부모 뷰를 갖습니다.

 

기본적으로 subview의 표시 영역이 superview의 바운드를 넘어갔을 때 subview의 벗어난 표시 영역이 잘리지 않습니다. 만약 잘리게 하고 싶으면 clipsToBounds 프로퍼티를 변경하세요 

 

-> clipsToBounds 다들 많이 보신 프로퍼티아니신가요?? ㅎㅎ 이게 무슨 말이냐면 부모 뷰의 clipsToBounds 설정을 true로 하면 자식 뷰가 부모 뷰의 바운드를 넘어가도 그 넘어간 부분은 잘려서 보이지 않게 됩니다. 기본 설정은 false임으로 만약 자식뷰가 부모 뷰의 범위를 벗어나 보이는 것을 원치 않다면 clipsToBounds 설정을 true로 명시해주세요.

frame과 bounds의 차이

frame - superview의 좌표 시스템안에서 view의 위치와 크기 정의

bounds - 자기 자신의 좌표 시스템에서 view의 위치와 크기 정의 (자신의 상위 뷰와 연관성이 없음, 즉 자신이 기준)

 

frame이야 어렵지 않은 내용으로 이해하기 쉬운데, bounds의 자기 자신의 좌표 시스템이 무슨말일까요 ?? 흐음..

 

bounds를 살펴 보기 이전에 아쉬우니까 frame에 대해 간단히 살펴보고 갑시다!

frame은 자신의 부모뷰를 기준으로 위치와 크기를 정하기 때문에 보라색 뷰는 자신의 부모 뷰인 흰색 뷰를 기준으로 좌표값을 갖게 되고 주황색 뷰는 보라색 뷰를 기준으로 좌표를 설정하게 됩니다.  만약 주황색 뷰의 부모 뷰인 보라색 뷰의 좌표값을 변경하면 주황색 뷰는 자신의 부모 뷰인 보라색 뷰를 기준으로 좌표를 갖기 때문에 주황색 뷰 또한 보라색 뷰와 같이 이동하게 되겠죠.  

 

이해하기 어려울 수도 있는부분이 바로 bounds인데,  부모 뷰(보라색 뷰)와 자식 뷰(주황색 뷰)의 frame과 bounds를 출력해보면 bounds는 다음과 같이 부모 뷰 자식 뷰 모두 (0, 0)의 좌표값을 갖는 것 을 볼 수 있습니다.

 

이렇게 0, 0인 이유는 위에서 말 했다 싶이 자기 자신이 곧 기준이기 때문입니다.  부모 뷰(보라색 뷰)의 bounds를 x: 20 y: 50으로 변경하면 어떻게 될까요?? 

예상했던 결과가 맞나요? ㅎㅎ 우리는 부모 뷰를 건드렸는데 실제로 이동한 건 자식 뷰처럼 보이네요? 이건 상대적으로 이렇게 보이는 것일 뿐입니다. (우리가 차를 타고 가만히 있는 물체를 지나갈 때 그 물체가 움직이는 것처럼 보이는 것과 같은 이치죠) bounds는 상대적인 좌표가 아니라 절대적인 좌표인데 그 좌표가 아래로 50 우로 20만큼 이동했으니 그 좌표 위의 자식 뷰는 가만히 있음에도 그 자식 뷰가 움직이는 것처럼 보이는 거죠 ㅎㅎ 이해하셨나요?   뷰의 frame은 변하지 않았기 때문에 그 위치 그대로입니다. 하지만 bounds가 변한 만큼 이동한 bounds의 좌표계에서 다시 뷰를 그리는 것이죠. 그래서 자식 뷰인 주황색 뷰의 frame이 이동한 것처럼 보이는 겁니다.  

 

마지막으로, 조금 생소할 수도 있는 View Drawing Cycle 입니다.  뷰의 라이프 사이클은 들어봤어도 이건 뭐지??

 

View는 컨텐츠 및 레이아웃을 그리거나 업데이트할 때 Drawing Cycle 안에서 이뤄집니다. 그래서  View의 변경사항이 있어 업데이트를 요청하면 바로 View를 그리는 것이 아니라 다음 사이클이 올 때까지 대기하다가 다음 사이클이 오게 되면 그때 요청받은 변경 사항을  업데이트하게 됩니다.

 

view나 layout의 업데이트는 setNeedsDisplay(), setNeedsLayout(), layoutIfNeeded()등의 메소드를 통해 다음 주기에 업데이트 혹은 즉시 업데이트가 가능 한데. 이 부분은 다른 포스팅에서 다뤄보도록 하겠습니다.

 

긴 글 읽어주셔서 감사합니다 :)

 

참고)

developer.apple.com/documentation/uikit/uiview

Apple Developer Documentation