iOS) Bounds, Frame의 차이

필요한 사전 지식

• CGPoint, CGSize, CGRect

CGRect는 "사각형"으로 그려지며, origin과 size를 가진다. 즉, [x좌표, y좌표, width(너비), height(높이)]를 가진다.

 

Bounds, Frame의 차이

//MARK: -frame
//SupeView(상위뷰)의 좌표시스템 안에서 View의 위치와 크기를 나타냄
open var frame: CGRect

//MARK: -bounds
//View의 위치와 크기를 자신만의 좌표시스템 안에서 나타냄
open var bounds: CGRect

 

frame

SupeView(상위뷰)의 좌표시스템 안에서 View의 위치와 크기를 나타냄

 

 

log를 보면 하늘색 sub view의 frame은 (x:30, y:191) 이고, 보라색 sub sub view의 frame은 (x: 70, y: 101)임을 알 수 있다.

이 수치는 앞서 말한 frame의 정의이기도 한 SuperView를 기준으로 자신의 위치와 크기를 나타냄 때문이다.

 

 

따라서 다음과 같이 생각해야 한다.

• 하늘색의 SuperView는 노란색
  • 노란색의 origin을 기준으로 얼마만큼 떨어진 곳에 위치해 있는지 표시
• 보라색의 SuperView는 하늘색
  • 하늘색의 origin을 기준으로 얼마만큼 떨어진 곳에 위치해 있는지 표시

 

 

bounds

View의 위치와 크기를 자신만의 좌표시스템 안에서 나타냄

상위뷰와 아무런 상관이 없으며, 오직 자신이 기준.

 

Bounds는 자신만의 좌표계 (0,0)를 기준으로 위치 (x, y) 및 크기 (너비, 높이)로 표현되는 사각형이다. 

그래서 Bounds의 origin은 default로 (0,0). 

 

자 이게 무슨 소리인지 알기 위해!

 

왼쪽의 화면에서 하늘색의 bounds를

subView.bounds.origin.x = 50
subView.bounds.origin.y = 60

이렇게 주었더니 우측과 같은 결과가 나온다. 분명 하늘색의 위치를 조정해주었는데, 그것도 우측 아래로 이동시켰는데 왜 보라색이, 그것도 왼쪽 위로 움직였을까?

Bounds는 상위뷰 안에서의 좌표가 아닌 "자신만의 좌표시스템" 을 가진다고 하였다. 따라서 Bounds를 변경하는 것은 해당 위치에서 View를 다시그리라는 의미가 된다.

Bounds는 상위뷰와 아무런 관련이 없으므로, subView는 움직이지 않는 것 처럼 보이고 그 안에있던 sub-sub-View가 움직이는 것 처럼 보이는 것이다!

 

이해를 돕기위한 설명을 색상으로 다시 하자면!

 

휴대폰 디스플레이에 하늘색 사각형이 있고, 보라색 사각형은 휴대폰 위에 물리적으로 올려져 있다고 생각하자. 그러면 우리가 옮길 수 있는것은 휴대폰 혹은 보라색 사각형이다.

 

여기서 하늘색 사각형의 Bounds를 변경하는 것은 보라색 사각형의 위치는 그대로 둔 채 휴대폰을 우측 대각선으로 옮기는 것이라고 생각하면된다!

 

 

이해가 아직 어렵다면 내 글쓰기 실력의 문제이니..밑의 블로그를 참고해서 이해하면 더 좋을 것 같다 :)

도움을 준 좋은 블로그

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

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