[iOS] UIView의 frame, bounds

안녕하세요, Wody입니다.

 

오늘 배워볼건 UIView의 frame, bounds입니다.

 

각각 직역해보면 frame은 액자, bounds는 범위라는 뜻을 갖고 있는데요 어떤 차이가 있는지 한번 알아보겠습니다.

 

밑의 더보기는 UIView에 대해 간단히 알아보는 글입니다!

제가 아직 UIView에 대해 포스팅하지 않아서 간단히 UIView가 무엇인지 알아보고 넘어가보겠습니다.

 

Apple Developer - UIView

`뷰`는 화면의 직사각형 영역에 대한 내용을 관리한다고 설명하고 있습니다.

 

관리한다고 했으니 책임도 있겠죠?

 

뷰가 갖는 책임은 크게 3가지입니다.

 

1. 드로잉 및 애니메이션

 

2. 레이아웃 및 하위 뷰 관리

 

3. 이벤트 처리

 

2번과 3번은 익숙한 책임입니다. 뷰를 사용하다보면 레이아웃 및 하위 뷰를 관리해 UI를 구성합니다.

 

또한 각종 이벤트가 발생할 경우(ex. 터치) 뷰를 통해 이벤트를 처리하게 됩니다.

 

그럼 오늘 주제인 1번. 드로잉 및 애니메이션에 대해 더 알아보겠습니다.

 

드로잉 및 애니메이션

 

 

뷰는 UIKit 혹은 Core Graphics를 통해 그려지는데 우리에게 익숙한 UIKit을 중심으로 알아보겠습니다.

뷰 만들어보기

뷰를 만드는 예제를 보면 `UIView`를 호출할 때 초기화로 frame에 상수 rect를 전달하고 있습니다.

 

어?! 이번 글의 주제인 frame이 드디어 나왔네요!!

 

뷰가 생성될 때 frame에 필요한 이유는 초기화에 선언되기도 했지만 프로퍼티로 frame이 존재하기 때문입니다!

 

frame? bounds?

프레임과 바운즈는 UIView에 프로퍼티로 속한 변수입니다.

 

그리고 둘 다 CGRect 타입으로 구성됩니다.

 

CGRect?

Apple Developer - CGRect

CGRect는 Core Graphics에 해당하는 구조체입니다. 직사각형의 위치와 치수 정보를 담는 구조체죠!

Apple Developer - CGRect

CGRect는 Core Graphics에 해당하는 구조체입니다. 직사각형의 위치와 치수 정보를 담는 구조체죠!

 

frame

Apple Developer - frame

 

 

 

 

frame은 `superview`의 좌표계에서 뷰의 위치와 크기를 나타내는 프레임 사각형입니다.

 

 

bounds

bounds는 `자체(own)` 좌표계에서 뷰의 위치와 크기를 나타내는 프레임 사각형입니다.

 

 

superview와 자체의 차이는 무엇일까?

직접 프로젝트를 통해 확인해볼까요?!

 

처음 만든 프로젝트의 Main.storyboard를 보면 다음과 같이 생겼습니다

View Controller 안에 View가 있는데요

 

여기서 이 View는 상위뷰도, 하위 뷰도 없기 때문에 그냥 view입니다.

 

그런데 만약 이 View위에 상위 개념의 View가 있을 경우 상위 개념 View가 View의 superview 지위를 갖게 되며

 

상위 개념 View 기준 subView는 현재 View가 됩니다

 

이걸 코드로 한번 구현해볼까요?

 

저기 위 스토리보드에서 보셨던 View 안에 `myView`라는 UIView를 생성해서 view의 subView로 추가해줬습니다.

 

그럼 myView의 superview는 무엇일까요?

 

정답은....!

 

그렇습니다 그냥 view가 됩니다. 

 

그럼 반대로 view의 subView는 코드에 나와있듯이 `myView`라는 프로퍼티가 됩니다.

 

실제로 이 코드를 돌려보면 다음과 같은 화면을 얻을 수 있습니다.

 

우리가 코드에서 설정해줬던 `subView`의 frame은 superview기준으로부터

 

x: 100, y: 100 좌표에 가로 세로의 길이가 200이므로 다음과 같은 결과물을 얻을 수 있었습니다.

 

그럼 여기에 bounds 값을 지정해주면 어떻게 될까요?!

 

 

어...? 확실하게 myView의 크기와 위치가 바뀌었습니다!

 

과정을 해석해보면요!

 

frame을 통해 superview로 부터의 myView의 좌표는 [100, 100]이 됩니다. 그리고 만들어진 크기는 200 x 200이 되구요

 

그 결과가 파란색 네모 박스가 됩니다. 그런데 여기서 bounds 값을 추가로 주었기 때문에

 

bounds는 자기자신(myView)을 기준으로 [20, 20] 의 지점에 100 x 100 크기의 빨간색 네모 박스를 최종적으로 그리게 됩니다.

 

지금까지 frame과 bounds의 차이를 알아보았습니다!