[iOS_Swift] View의 Frame & Bounds 차이 _ 18

 

안녕하세요 개발하는 윤기사입니다! 

 

오늘은 문득 앱개발을 하다가 View에 대한 Frame과 Bounds의 차이가 궁금해졌습니다!

 

두 개의 명확한 차이를 잘 모르고 써왔기에, 이번 기회에 알아보도록 하겠습니다!!

 

 

어려우니까 잘 보셔야해요!!

 

- Frame -

The frame rectangle,
which describes the view’s location and size in the coordinate system of the view’s superview.

 

즉, Frame은 슈퍼뷰의 좌표계에서 뷰의 위치와 크기를 나타내는 사각형 형태의 틀입니다.

 

간단하게 말해서 슈퍼뷰의 좌표 시스템에서의 view의 위치와 크기이죠.

 

예를 들면서 설명드리겠습니다.

 

스토리보드를 통해 view 안에 RedView 안에 MintView를 구성했습니다.

 

RedView 안에 MintView를 넣어주었따.

 

RedView 선택시

 

MintView 선택시

 

두 개의 차이가 보이시나요? 사이즈 인스펙터 영역에서 보시면 기본적으로 Frame Rectangle로 구성이 되어 있으나,

 

RedView의 X, Y 좌표와 MintView의 X, Y 좌표 차이가 보이시나요?

 

MintView가 RedView안에 있기 때문에 MintView의 좌표는 슈퍼뷰인 RedView를 기준으로 잡는답니다!

 

한 번 MintView의 위치와 크기를 코드를 통해 수정해보겠습니다.

 

mintView의 Frame 수정!

 

MintView를 X축으로 20만큼, Y축으로 20만큼 이동시키고, 너비와 높이를 각각 100씩 주었을 때

 

슈퍼뷰인 RedView를 기준으로 움직이는 걸 확인하실 수 있습니다!

 

 

 

🍎 그렇다면 Frame이 아닌 bounds로 바꿔주면 어떻게 될까요?

 

 

 

- Bounds -

The bounds rectangle, which describes the view’s location and size in its own coordinate system.

 

 

bounds는 frame과 다른점이 자기 자신의 좌표계에서 위치와 사이즈를 결정한다는 점입니다.

 

간단하게 말해서, 자신만의 좌표시스템에서의 View의 위치와 크기입니다.

 

예를 들어보겠습니다!

 

앞서 했던 Frame과 동일한 레이아웃을 구성했습니다. RedView 안에 MintView가 존재하는 형태입니다!

 

RedView 안에 MintView를 넣어주었다.

 

이번엔 MintView를 Frame이 아닌 bounds로 바꿔준 후, 실행시켜 본다면?

 

mintView.bounds 이용! 달라진게 없는거 같은데...

 

하지만 슈퍼뷰인 RedView의 bounds를 이동시켜준다면 이상해 보이는 결과를 얻을 수 있습니다!

 

redView.bounds 이용!

 

bounds는 자신의 좌표를 사용하므로, 이동시키면 자기 자신 기준으로 만들어진 좌표가 변경됩니다!

 

bounds를 변화시키는 것은 view가 해당 위치로 이동했을 때 subView들의 위치를 다시 잡아준다고 생각하시면 됩니다.

 

정리하자면! bounds는 자기 자신만의 좌표계를 기준으로 움직입니다. 자신의 내부적인 좌표를 움직이면 그 안에 있는 뷰들이 움직입니다.

 

그래서 RedView를 기준으로 bounds를 주었을 때 MintView가 움직인 거죠!

 

RedView는 가만히 있고, SubView인 MintView만 이동한 것 같은 느낌이라고 보시면 됩니다.

 

 

 

 

 

차이점을 아시겠나요? Frame과 Bounds에 관한 다른 블로그 글 링크도 첨부해드릴테니 같이 참고해보시면 좋을 것 같습니다 ㅎㅎ

 

이상! 오늘 포스팅은 여기서 마칩니다!

 

개발하는 윤기사는 오늘도 빡코딩하겠습니다!! 😎

 

 

References

 

- 애플 개발자 공식 문서

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

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

 

- 참고 블로그

https://tong94.tistory.com/14

[Swift] Frame과 Bounds에 대해 알아보자

 

https://nsios.tistory.com/78

[iOS] Bounds 와 Frame의 차이점