[iOS] Frame & Bounds

[iOS] Frame & Bounds

Frame 과 Bounds 는 모두 UIView 의 CGRect 프로퍼티로 각각의 origin 과 size 를 가지고 있습니다.

 

얼핏 보았을때는 같은것이 아닐까 싶을수도 있지만, 오늘은 이 둘의 차이점에 대해 명확하게 알아보도록 하겠습니다.

 

Frame

 

먼저 Frame 은 자신의 SuperView (상위 뷰) 의 좌표시스템에서의 위치와 크기를 나타냅니다. 

 

이 말은 곧 자신의 SuperView 를 어떤 좌표평면으로 가정하고, 자기 자신은 해당 좌표위에 존재하는 View 라고 생각할 수 있겠죠?

예시로 가장 바깥쪽의 하얀색 영역을 First View, 안쪽의 핑크색 영역을 Second View, 그 안쪽의 노란색 영역을 ThirdView 라고 하겠습니다.

 

각 View 들은 모두 계층관계 내에 자리잡고 있습니다. Storyboard 에서 View 영역을 클릭하면 해당 View 의 Frame 을 우측에서 확인할 수 있습니다.

 

먼저 Second View 부터 확인해보겠습니다.

Second View 의 Frame origin 은 (56, 142) 입니다. 

 

이는 Second View 가 Super View 인 First View 에서부터 x 좌표는 56만큼, y 좌표는 142 만큼 떨어져있음을 나타냅니다.

 

다음은 Third View 입니다.

Third View 의 Frame origin 은 (31, 172) 입니다.

 

Third View 의 Super View 는 Second View 이기 때문에, 이는 Second View 에서 x 좌표는 31만큼, y 좌표는 172 만큼 떨어져 있음을 나타냅니다.

 

Second View 와 Third View 의 Frame origin 을 콘솔에 출력해보면 같은 결과가 나옵니다.

그렇다면 Frame 의 origin 을 변경하면 어떻게 되는지 Third View 의 Frame origin 을 (10, 10) 으로 설정해보겠습니다.

Third View 의 Frame origin 이 (10, 10) 으로 변경되었기 때문에 Second View 의 시작점에서 (10, 10) 만큼 떨어진 위치에 자리하게 됩니다.

 

이처럼 Frame 은 Super View 의 좌표시스템 내에서의 View 의 위치와 크기를 나타낸다는 것을 알 수 있습니다.

 

그렇다면 만약 View 를 회전시킨다면 Frame 은 어떻게 될까요?

새로운 View 를 그리고 회전하기 전, 회전한 후의 Frame origin 을 출력해보니 위와 같은 결과가 출력되었습니다.

 

핑크색 View 가 실제 회전한 View 이며, 회색 View 는 원래 핑크색 View 가 있던 위치입니다. 

 

만약 Frame origin 이 그대로 View 의 시작점을 따라가야한다면, y 좌표는 더 증가한 값이어야 하지만 오히려 감소하는 것을 확인할 수 있습니다.

 

그 이유는 위와 같습니다. Frame 은 어떤 View 가 포함되어있는 영역 전체를 나타내기 때문에 View 가 회전한다고 해서 그 시작점을 따라가지 않습니다.

 

그림에서 나타내는 Frame origin 이라는 포인트가 약 (85, 304) 의 좌표를 가지게 되는 것입니다.

Bounds

Bounds 는 View 의 위치를 자기 자신만의 좌표시스템 안에서 나타냅니다. 그래서 모든 초기 상태 View 의 Bounds origin 은 (0, 0) 입니다.

 

저는 Bounds 를 "시점" 이라고 이해했습니다. Bounds origin 을 (x, y) 로 바꾼다는 것은 현재 View 의 시점을 (x, y) 만큼 옮긴다는 뜻입니다. 

 

예시를 들어보겠습니다.

하얀색 영역은 그대로 First View, 초록색 영역을 Second View, 파란색 영역을 Third View 라고 해보겠습니다. 

 

이후 Second View 의 bounds 를 (100, 100) 으로 변경해보겠습니다.

Second View 의 Bounds origin 을 바꿔주었는데, Third View 가 움직인것처럼 보입니다. 

 

하지만 이는 Second View 의 시점이 이동한 것입니다. Second View 의 시점이 (100, 100) 만큼 움직였기 때문에 Third View 의 위치가 이동한 것처럼 보이는 것입니다.

 

현재는 clipToBounds 가 false 값을 가지고 있기 때문에 위와 같이 보이는 것이고, 이를 true 로 설정한다면 조금 더 이해가 되실 겁니다.

저희는 지금 Second View 라는 시점을 (100, 100) 만큼 움직인 것입니다.

 

잘 이해가 안될수도 있으니 평상시에 자주 이용하는 카메라를 예로 들어 설명해보겠습니다.

카메라로 풍경 사진을 찍으려고 할때 모든 풍경을 담기는 어렵습니다. 그렇기 때문에 저희는 카메라를 이동하며 적절한 위치를 찾아 사진을 찍습니다.

 

위 이미지에서 핸드폰의 화면을 View 라고 했을때, 현재 Bounds origin 은 (0, 0) 입니다. 그렇다면 이 origin 을 (100, 100) 으로 바꿨다고 가정해보겠습니다.

 

Bounds origin 을 바꾸자 카메라의 화면에 담기는 풍경이 달라졌습니다. 

 

저는 이렇게 카메라로 찍으려고 하는 부분을 옮겨간다, 즉 시점을 옮겨간다고 생각하며 Bounds 를 이해했습니다.

 

Frame 은 Super View 의 좌표시스템을 따른다면 Bounds 는 자기자신의 좌표시스템을 따라 시점을 이동시킨다고 생각하시면 이해하시기 편할 것 같습니다.

ScrollView

그래서 Bounds 는 ScrollView 의 핵심이기도 합니다.

 

ScrollView 를 이동시킬때마다 Bounds origin 이 변하는 것을 확인할 수 있는데, 이를 이용해 저희는 한 화면에 나타낼 수 없는 View 를 스크롤 하여 볼 수 있습니다.

 

아래는 ScrollView 를 이동시킬때마다 Bounds origin 이 변하는 것을 콘솔로 출력해본 결과입니다.

사용되는 경우

Frame

Frame 은 SuperView 의 좌표시스템을 이용하기 때문에 현재 나타내고자 하는 UIView 가 존재하지 않더라도 위치나 크기를 미리 설정해줄 수 있습니다.

 

이처럼 Frame 은 UIView 의 위치나 크기를 설정할 때 이용됩니다.

Bounds

Bounds 는 자기 자신만의 좌표시스템을 이용하기 때문에 View 내부에 그림을 그릴때라던지, transform 후 크기를 알고 싶을 때 사용됩니다.

 

또한 위에서 설명한것과 같이 ScrollView 에서 스크롤을 할 때 사용됩니다. 

참고 링크

https://developer.apple.com/documentation/uikit/uiview/1622621-frame

Apple Developer Documentation

https://developer.apple.com/documentation/uikit/uiview/1622580-bounds

Apple Developer Documentation

https://zeddios.tistory.com/203

iOS ) Frame과 Bounds의 차이 (1/2)

https://babbab2.tistory.com/44

iOS) Frame vs Bounds 제대로 이해하기 (1/3)