✅ 학습 내용
📌 CGRect
- 우리가 뷰를 화면에 그리고자 할 때 고려해야 하는 것이 두가지가 있다.
- 뷰의 위치 를 나타내는 좌표
- 뷰의 크기 를 나타내는 길이
- 이걸 표현하는 것이 바로
CGRect이다.
💎 CGPoint
A structure that contains a point in a two-dimensional coordinate system.
-
2차원 좌표계에서 점을 포함하는 구조체입니다.
-
먼저, 위치부터 알아보자. 공식문서의 설명을 보면, 2차원 좌표계에서 점! 을 표함하는 구조체라고 나와있다.
-
가장 중요한 포인트는 점 이다. 2차원 좌표에서 점을 표현하려면? 2개의 좌표값이 필요할 것이다.
-
실제 코드상에 구현되어있는
CGPoint를 보면:
public struct CGPoint {
public init()
public init(x: CGFloat, y: CGFloat)
public var x: CGFloat
public var y: CGFloat
}x,y라는CGFloat값을 가지고 있다.
✏️ CGFloat
The basic type for floating-point scalar values in Core Graphics and related frameworks.
-
코어 그래픽 및 관련 프레임워크에서 부동 소수점 스칼라 값의 기본 유형입니다.
-
뭐라는거냐 -
이 타입의 크기와 정밀도는 CPU 아키텍처에 따라 다르다.
-
64비트 CPU용으로 빌드하는 경우
CGFloat타입은Double타입과 동일한 "64비트 IEEE 이중 정밀 부동소수점 타입"이다. -
32비트 CPU용으로 빌드하는 경우
CGFloat타입은Float타입과 동일한 "32비트 IEEE 단일 정밀 부동소수점 타입"이다.
✏️ 실제 뷰에서 CGPoint는?
- 다시
CGPoint로 돌아와서, 실제 앱에서 이 값은 뷰를 그릴 때 어디에 영향을 줄까?
- 실제 화면에서 그릴 때 그림과 같이 View의 시작지점을 알기위해 (x, y)좌표가 필요하다.
- 그리고, 이 좌표의 시작점 즉, 기준점은 화면의 왼쪽 맨 윗부분(0, 0)이다.
💎 CGSize
A structure that contains width and height values.
-
너비 및 높이 값을 포함하는 구조체입니다.
-
자. 뷰의 시작점을 구했다. 그 다음, 뷰의 크기가 어느정도인지 알아보자.
-
중요한 점은
CGSize라는 이름에서도 알 수 있듯, 뷰의 크기 이다. 2차원 좌표계에서 크기는 너비와 높이값이 필요하다. -
이 역시 실제 코드상에 구현되어 있는
CGSize를 보면:
public struct CGSize {
public init()
public init(width: CGFloat, height: CGFloat)
public var width: CGFloat
public var height: CGFloat
}-
역시
width와height라는 두CGFloat값을 가지고 있다. -
그럼 실제 앱에서 이 값은 뷰를 그릴 때 어디에 영향을 줄까?
- 실제 화면에서 그릴 때 그림과 같이 View의 크기를 알기위해 너비 (width) 와 높이 (height) 값이 필요하다.
- 그리고, 이 너비와 높이를 지정해줌으로써 이 뷰의 위치와 크기를 알 수 있게 된다.
💎 CGRect
A structure that contains the location and dimensions of a rectangle.
-
직사각형의 위치와 치수를 포함하는 구조체입니다.
-
그럼 이제
CGRect이 무엇인지 쉽게 유추가 가능하다. -
위에서 설명한
CGPoint와CGSize를 가지고 있는 구조체이다. 코드상에 구현되어 있는CGRect을 보면:
public struct CGRect {
public init()
public init(origin: CGPoint, size: CGSize)
public var origin: CGPoint
public var size: CGSize
}-
origin이라는CGPoint값과,size라는CGSize값을 가지고 있다. -
그리고 이니셜라이저를 보면, 이 두 프로퍼티를 초기화 하고 있다.
-
결론적으로,
origin은 뷰의 위치를,size는 뷰의 크기를 결정하는 것이다. -
실제로 우리가 뷰를 그리고자 할 때는 이
CGRect가 들어간다.
let view = UIView(frame: CGRect)- 코드로 초기화를 할 때 다음과 같이 적으면 된다.
let rect: CGRect = .init(origin: CGPoint(x: 50, y: 100), size: CGSize(width: 200, height: 250))- 그리고 다음과 같이 조금 더 간단하게도 가능하다.
let rect: CGRect = .init(x: 50, y: 100, width: 200, height: 250)✏️ 실제로 코드를 사용해서 이 뷰를 그려보자!
- 실제로 이 코드를 활용해서 화면에 뷰를 그려보자.
let rect: CGRect = .init(x: 50, y: 100, width: 200, height: 250)
let newView: UIView = .init(frame: rect)
newView.backgroundColor = .orange
self.view.addSubview(newView)- 다음과 같이 코드를 짜볼 수 있다. 그리고 이를 실행해보면:
- 잘 그려진 것을 볼 수 있다.
CGPoint
CGFloat
CGSize
CGRect
iOS) CGPoint, CGSize, CGRect
iOS) CGRect와 CGSize의 차이, 그리고 CGPoint
