[SwiftUI] CGFloat, CGPoint, CGSize, CGRect

SwiftUI에서 레이아웃과 그래픽 작업을 할 때 사용되는 핵심 데이터 타입들이다.

1차원 벡터

CGFloat

• 정의: Core Graphics에서 사용하는 부동 소수점 타입
• 용도: 길이, 두께, 각도 등 단일 수치를 나타낼 때 사용
• 특징: 플랫폼에 따라 크기가 다를 수 있음 (64비트 환경에서는 Double과 같고, 32비트 환경에서는 Float과 같음)
• 예시:

  let width: CGFloat = 100.0
  let opacity: CGFloat = 0.5
  let cornerRadius: CGFloat = 8.0

Double

• 정의: Swift 표준 라이브러리의 부동 소수점 타입
• 용도: 일반적인 계산이나 값 저장에 사용
• 특징: 항상 64비트 정밀도를 가짐
• 예시:

  let distance: Double = 42.195

2차원 벡터

CGPoint

• 정의: 2D 좌표 공간의 점을 나타내는 구조체
• 구조: x와 y 좌표로 구성 (x: CGFloat, y: CGFloat)
• 용도: 화면이나 뷰 내의 위치를 지정할 때 사용
• 예시:

  let point = CGPoint(x: 50, y: 100)

CGSize

• 정의: 2D 공간에서의 너비와 높이를 나타내는 구조체
• 구조: 너비와 높이로 구성 (width: CGFloat, height: CGFloat)
• 용도: 뷰나 이미지의 크기를 지정할 때 사용
• 특징: 위치 정보는 없고 크기만 나타냄
• 예시:

  let size = CGSize(width: 200, height: 150)

4차원 벡터 (정확히는 2D 공간의 사각형)

CGRect

• 정의: 2D 공간에서의 사각형을 나타내는 구조체
• 구조: 원점(origin)과 크기(size)로 구성
  • origin: CGPoint - 사각형의 좌상단 좌표
  • size: CGSize - 사각형의 너비와 높이
• 용도: 뷰의 프레임, 바운드, 또는 클리핑 영역을 지정할 때 사용
• 예시:

  let rect = CGRect(x: 50, y: 50, width: 200, height: 100)
  // 또는
  let rect = CGRect(origin: CGPoint(x: 50, y: 50), size: CGSize(width: 200, height: 100))

• 유용한 속성:

  rect.minX    // 왼쪽 가장자리 x좌표
  rect.midX    // 수평 중앙 x좌표
  rect.maxX    // 오른쪽 가장자리 x좌표
  rect.minY    // 상단 가장자리 y좌표
  rect.midY    // 수직 중앙 y좌표
  rect.maxY    // 하단 가장자리 y좌표

SwiftUI에서의 활용 예시

struct ContentView: View {
    var body: some View {
        // CGFloat 사용
        Circle()
            .frame(width: 100)       // CGFloat 사용
            .opacity(0.8)            // CGFloat 사용
            .cornerRadius(10)        // CGFloat 사용
        
        // CGSize 사용
        Rectangle()
            .frame(width: 200, height: 150)  // CGSize로 변환됨
        
        // CGRect 사용 - GeometryReader 내부에서
        GeometryReader { geometry in
            Circle()
                .position(x: geometry.frame(in: .local).midX,
                          y: geometry.frame(in: .local).midY)
        }
        
        // CGPoint 사용
        Circle()
            .position(CGPoint(x: 150, y: 250))
    }
}