[iOS] frame,bounds의 차이 - HoonIOS

안녕하세요, HoonIOS입니다.

 

저번에 뷰의 위치를 잡는 기준을 설정하는 CGRect에 대해서 포스팅을 했습니다.

<Custom에서 CGRect로 객체 위치 잡기>

 

위치만 잡았지 아직 객체에 값을 넣어주지 않았습니다. 앞 포스팅에서 뷰의 위치를 잡아주는 방법은 Frame, Bounds두개가 있다고 했는데요...

 

한 개도 복잡한데 두 개라니 ㅠㅠㅠ 헷갈리지 않게 개념을 잡는 게 중요한 것 같습니다.

 

 frame

애플 공식문서에서는 슈퍼뷰의 좌표계 시스템을 기준으로 뷰의 위치와 사이즈를 설정하는 것이라고 나와있네요.

 

frame은 이렇게 프로퍼티로 설정을 할수도 있고 이니셜 라이저를 통해서는 설정할 수 있어 인스턴스를 생성하는 동시에 frame속성을 설정을 할 수 있습니다.

 

이렇게 이니셜라이저를 사용하여 인스턴스를 생성하려면 아래와 같이 이니셜 라이저를 사용해주면 됩니다.

 

let view = UIView(frame:CGRect값)

 

뷰 객체라던지 다양한 객체들을 생성해줄 때 frame을 설정해주지 않으면 자기 자신의 위치, 영역을 설정하지 못하기 때문에 화면에 표시되지 않습니다.

즉, frame속성에 올바르게 값이 들어가야 합니다.

 

frame속성을 중간에 바꿔서 뷰의 위치를 옮길 수도 있는데 이때 frame.origin속성을 통해서 CGPoint객체를 정의해서 넣어주면 됩니다.

//Mark - 뷰 위치 잡기
let view = UIView(frame: CGRect(x: 100, y: 200, width: 100, height: 150))

//Mark - 뷰 위치 이동
let new = CGPoint(x:200, y: 300)
view.frame.origin = new

frame의 origin속성은 CGRect객체의 위치 좌표를 저장하는 속성입니다.

 

frame의 설정에 대해 알아봤습니다. 위 애플 공식문서에서는 슈퍼뷰를 기준으로 잡는다고 말했는데요.

x:100, y:200, width:100, height:150이 frame을 통해서 잡혔다고 했을 때 어떻게 되는지 보겠습니다.

 

* 설명

• frame으로 설정한 그림을 보면 뷰의 위치는 해당 뷰의 슈퍼뷰(자신의 상위 뷰)의 원점에서를 기준으로 x, y만큼 지정해 둔 곳에 옮겨진 것을 볼 수 있습니다.
• 이렇게 frame은 화면의 기준이 아니라 슈퍼뷰(부모 뷰)의 기준으로 좌표를 계산하게 됩니다.
• 위 예시를 보시면 아시겠지만 만약 슈퍼뷰의 서브뷰면 좌표에 상관이 없지만 만약 서브뷰의 서브뷰면 좌표 계산에 주의해야 합니다.

※ 슈퍼뷰와 서브뷰의 차이는?

슈퍼뷰는 최상의 뷰 즉 음... 테이블 뷰 컨트롤러에서 테이블 뷰, 컬랙션 뷰 컨트롤러에서 컬랙션 뷰가 이에 해당합니다.

서브뷰는 뷰의 자식 뷰 즉 뷰의 안에 있는 뷰를 말합니다.

 

frame의 장점은 서브뷰의 서브뷰로 설정을 했다고 치면 만약. origin속성을 통해 해당 뷰의 좌표를 바꾼다고 할 때 서브뷰는 그 부모뷰를 기준으로 잡았으니 따로 위치를 잡아줄 필요가 없이 알아서 움직인다는 장점이 있습니다.

 

그럼 이제 bounds를 알아보겠습니다.

 

 bounds

애플 공식문서에서 bounds는 뷰의 위치와 사이즈를 자기 자신만의 좌표 시스템을 기준으로 설정하는 것이라고 나와 있습니다.

 

frame과 bounds의 가장 큰 차이는 공식문서에서 말하는 것처럼 좌표의 기준입니다.

frame의 좌표 기준은 슈퍼뷰이고 bounds의 좌표 기준은 자기 자신입니다.

 

bounds는 이니셜 라이저로 설정을 못해주고 오직 프로퍼티를 통해서만 설정을 해줄 수 있습니다.

 

즉 다시 말해서 bounds는 자기 자신(뷰)의 왼쪽 위 가장자리 좌표가 (0,0)이 되는 것입니다. 

(0,0, width, height)가 되는 것이죠

 

이게 무슨 말이지 하시는 분들이 있을 수 있으니 한번 예시를 들어 설명을 해보겠습니다.

* 설명

• 어라 뭐야 앞에 봤던 거랑 같은 그림이잖아?라고 생각을 하실 수 있는데 맞습니다. frame으로는 (100,200) position에 있지만 bounds에는 (0,0)에 있는 것입니다. 
  
  그 이유는 앞에서 말씀드린 것처럼 bounds는 자기 자신의 왼쪽 위 꼭짓점을 기준으로 하기 때문에 해당 위치가 (0,0) 시작점이 되는 것이죠
• 좌표의 기준이 자기 자신이 된다고 생각을 하시면 됩니다. :)

그럼 두 개를 어디다가 언제 쓰는 거지?라고 고민을 하시는데 frame속성은 뷰 자신의 위치나 크기를 설정을 하는 것이고 bounds는 뷰 내부에 있는 객체와 관계에 사용을 합니다.

 

bounds는 뷰 내부에 터치 이벤트가 발생을 했을 때 그 위치를 차지 위해서 많이 사용하고 뷰 내부에 서브 뷰를 추가하기 위해서 원점을 잡아줄 때 그때 많이 사용을 합니다.

 

 슈퍼뷰의 bounds의 x, y의 좌표를 바꾸게 되면 슈퍼뷰는 가만히 있지만 밑에 있는 서브 뷰들이 슈퍼뷰가 움직인줄 알고 서브뷰들이 그에 맞춰서 이동을 하게 돼 bounds를 사용할 때는 그에 유의해합니다.

 

 

이제 위치를 잡아주는 기준에 대해서 포스팅을 해봤습니다. custom으로 작업을 해줄 때 많이 사용되므로 이에 유의하여 사용을 하셔야 될 거 같습니다.