[iOS] Bounds 와 Frame의 차이점

간단히 요약하면 

• bounds: 자신만의 좌표시스템에서 view의 위치와 크기
• frame: 슈퍼뷰의 좌표시스템에서 view의 위치와 크기

가 되겠죠?

 

이렇게만 들으면 잘 이해가 안될 수 도 있어요

자신의 좌표와 슈퍼뷰의 좌표가 뭐가 다른지 자세히 알아볼까요??

 

기본적인 뷰구조는

이런식으로 rootView(흰색)안에 view1(주황색)안에 view2(갈색)가 있는 형태에요

현재 이렇게 보이는 상태에요

생성위치가 (x: 0, y: 0)이니까 모두 왼쪽상단에서부터 시작해요

 

이상태에서 view1의 frame을 움직여볼께요

frame은 슈퍼뷰 기준좌표계니까

30, 30을 이동한다고하면

view1(주황색)은 rootView(흰색)기준으로 (30, 30)을 이동한 상태가 되요

iOS좌표계는 x가 양수면 오른쪽 y가 양수면 아래로 이동하구요

view2(갈색은) view(주황색)기준으로 (0,0)에 생성 되니까 같은 위치에서 부터그려지겠네요

 

frame의 이동은

위로 쌓은 물건을 담은 물체를 이동시키는 것과 같은 느낌이에요

맨 아래에있는 물건을 옮기면 위에있는 물건도 같이 딸려 움직이잖아요? 그런 느낌이죠 ㅎㅎ

비유가적절한지 모르겟네요..

 

 

그럼 bounds는 뭘까요?! 어디에 쓰일까요?

우선 뷰를 생성하면 따로 설정해주지 않는 이상 frame과 bounds의 크기는 같아요 

 

먼저 결과를 보기위해 view1의 bounds를 y로 50을 이동시켜봤어요

 

음...!

저는 view1(주황색)bounds을 이동시켰는데

view2(갈색)이 움직이네요?!

 

네 맞아요 bounds는 자신의 좌표계를 기준으로 움직이니까요

자신의 내부적인 좌표를 움직이면 그안에있는 뷰들이 움직이겠죠?

스크롤뷰를 생각해보면 frame은 화면 사이즈에 꽉맞는데 안에 내용물은 스크롤하면 움직이잖아요??

고런 느낌이에요

 

 

그림으로 보면서 이해 해볼까요?

위와같이 view1(주황색)의 bounds를 (0, 0)에서 (0, 50)으로 이동하는 과정이에요

bounds는 자신의 좌표를 쓰므로 이동하면 자신기준으로 만들어진 좌표가 변경되요

현재 검정색선으로 둘러쌓인 영역이 현재 bounds에요

50으로 이동하면 가운데 그림같이 자신의 내부좌표가 저렇게 움직일거에요

(주황색영역은 무시해주세요 자신의 좌표이기때문에 주황색영역은 줄어들지 않아요. 저희가 보는것은 오른쪽 그림처럼 보이죠)

갈색이 보여지는 영역의 크기가 달라지는게 보이시나요?

아래로 50으로 이동하면 좌표계에 존재하는 하위 뷰들은 50만큼 위로 올라가요

즉, 반대로 이동 하고 있어요

이때 좌표를 출력해보면

view2의 위치는 위로 가있지만 frame의 좌표는 (0, 0)이네요

 

근데 갈색뷰가 주황색 바깥으로 튀어나왔는데 가능한가요?!

네 그렇죠

지금 view의 bounds의 좌표를 변경했지 view의 크기를 조절한게아니에요

따라서 뷰의 크기에는 영향이 없어야겠죠

 

이런 뷰가있다면

현재는 오른쪽그림처럼 보일거구요

 

 

RootView의 bounds를 x를 100 만큼이동한다면

frame에는 변화가없죠?

그리고 내부좌표를 움직이니까 마치 하위뷰들이 반대로 움직이는것 같은 효과가 일어나요

이동하면 오른쪽 그림처럼 보이겠네요

 

 

frame와 bounds 차이 이해가 좀 가시나요??

 

또 큰 차이라고 하면 회전할 때 적용되는게 달라요

frame에는 영향이 있지만 bounds에는 영향이 없어요

 

frame은 뷰를 감싸는 범위를 나타내기때문에

회전하면 뷰의 frame크기와 위치가 변할 수 있어요

무슨말이냐 하면

이렇게 뷰가 있고 이 뷰를 회전한 뷰가 있다면

점선으로 쳐진 부분의 영역이 다른게보이시나요??

따라서 frame의 size가 커질 수 있고 위치도 변할 수 있어요

 

가로 세로가 2√2 인경우 대각선은 4가 될거에요

회전후 frame 크기는 4가

될것으로 예상되네요

정답!

frame의 위치도 변한게 보이죠??

 

view1 = makeView(superView: self.view,
                 color: .orange,
                 frame: CGRect(x: 100, y: 100, width: 200, height: 200))
view1.transform = CGAffineTransform(rotationAngle: .pi/4)
makeView(superView: self.view, color: .lightGray, frame: view1.frame)
view.bringSubviewToFront(view1)

view1을 회전시키고

회전후 frame의 크기와 같은 뷰를 만들어봤어요 

view1은 주황색

frame영역은 회색이에요

위에서 설명했던것과 같이 주황색을 감싸고 있는 크기가 frame인걸 알 수 있죠

 

 

이럴때 뷰의 크기를 어떻게 찾냐..!

bounds는 영향이 없뎃죠???

나의 좌표이기때문에 변함이 없어요

회전이 되어도 위치는 (0, 0)이고 크기도 200, 200으로 만든 도형과 같은걸 볼 수 있죠