[iOS] CGPoint, CGSize, CGRect

 화면에 View를 그릴 때 필요한 정보에는 무엇이 있을까? 일단 View를 화면의 어느 위치에 놓을지를 결정해야 한다. 그리고 그 위치에서 크기를 어느 정도로 할지를 결정해야 한다. 

 

 정리하면, View를 그리기 위해 필요한 정보에는 View의 시작 위치에 대한 (x, y) 좌표가 필요하고 (x, y) 좌표에서 어느 크기만큼 그릴 건지 width, height에 대한 정보가 필요하다.

 

View를 그릴 때 이러한 정보들을 담아두기 위한 구조체들을 살펴보자.

 

CGPoint - View의 시작 위치

CGPoint에 대한 정의 (출처: https://developer.apple.com/documentation/corefoundation/cgpoint)

 

 CGPoint 구조체는 2차원 좌표계의 점을 포함하는 구조체이다.

 CGPoint는 다음과 같의 정의되어 있다.

 

 

 CGPoint 구조체 안에는 x, y라는 변수가 선언되어 있다. 두 변수 안에 원하는 값을 넣어 View의 시작 위치를 지정할 수 있다. 기준점은 왼쪽 상단 (0, 0)에서 시작하여 (x, y)만큼 떨어진 곳에 View가 위치하게 된다.

 

 

CGSize - View의 width, height 지정

CGSize에 대한 정의 (출처 : https://developer.apple.com/documentation/corefoundation/cgsize)

 

 CGSize 구조체는 width와 height를 갖는 구조체이다. 

 CGSize는 다음과 같이 정의되어 있다.

 

 

 width와 height에 값을 대입하여 View의 사이즈를 지정할 수 있다. 

 

 이제 CGPoint와 CGSize를 통해서 View의 시작 위치와 크기를 지정할 수 있다는 것을 알 수 있다. 코드를 통해서 View를 생성할 때 보면 View의 frame으로 CGRect라는 구조체가 사용되고 있음을 알 수 있다. 

 

 마지막으로 CGRect에 대해서 알아보자.

 

CGRect 

CGRect에 대한 정의 (출처 : https://developer.apple.com/documentation/corefoundation/cgrect)

 CGRect는 사각형의 위치와 크기를 포함하고 있는 구조체다.

 CGRect의 정의는 다음과 같다.

 

 

 CGRect 구조체 안에는 CGPoint 타입의 변수 origin과 CGSize 타입의 변수 size가 존재함을 알 수 있다. 

 CGRect 구조체에 CGPoint 정보와 CGSize 정보를 넣어 View의 위치와 크기를 지정할 수 있다. 다음과 같은 표현을 사용하여 CGRect를 생성하고 이를 View의 frame으로 지정하여 View를 생성할 수 있다.

 

var rect: CGRect = .init(origin: CGPoint(x: 3, y: 4),
                            size: CGSize(width: 100, height: 200))
       
rect = .init(x: 3, y: 4, width: 100, height: 200) // 조금 더 간단하게
       
let view: UIView = .init(frame: rect)

 

 

References

- https://babbab2.tistory.com/42

- https://zeddios.tistory.com/201