[iOS] Custom에서 CGRect로 객체 위치 잡기 (CGPoint, CGSize 추가 설명) - HoonIOS

안녕하세요, HoonIOS입니다.

 

이번 포스팅은 Custom으로 코딩을 할 때 객체의 위치를 잡아주기 위한 객체로 CGRect에 대해 포스팅을 하려고 합니다.

 

 

 뷰의 위치 잡기

 

뷰의 위치를 결정하는 방법은 기준점에 의해서 위치가 결정되게 됩니다.

 

그럼 뷰의 기준점이 어딘가 많이 궁금해 하실수 있는데 뷰의 기준점은 왼쪽의 꼭지점을 말하는 것입니다.

 

이해가 안 되시면 아래 그림을 통해 확인해보시기 바랍니다.

 

즉 위의 모서리에 있는 뷰의 기준점을 iOS에서는 (0,0)으로 하고 꼭짓점을 기준으로 아래로 내려갈수록 Y축, 오른쪽으로 이동할수록 X축이 증가를 하는 방식입니다.

 

뷰의 위치를 잡는 것은 뷰의 속성인 frame, bounds에 CGRect을 넣어줌으로써 위치를 잡는 것입니다.

※frame, bounds는 다음 포스팅에서 차이를 비교해보겠습니다. 

 

CGRect은 CGSize, CGPoint로 구성되어 있는데 한번 순서대로 잡는 순서를 설명해보겠습니다.

1. CGPoint를 통해서 x, y축을 잡아줍니다.
2. CGSize를 통해서 width, height을 잡아줍니다.
3. 각 x, y축과 넓이, 높이를 잡아준 값을 CGRect에 넣어서 잡아줍니다.

그럼 각 구조체에 대해 하나씩 알아보겠습니다.

 

 CGPoint

 

애플 공식문서에 따르면 구조체의 형태로 두 개의 2차원 좌표계 x, y를 포함하고 있습니다. 

 

각 x y는 실수 값을 가지게 되는 CGFloat타입으로 선언이 되어 있습니다.

 

위 CGPoint구조체는 CoreGraphics 프레임워크를 반입해야만 사용을 할 수 있는데 UIKit에도 해당 프레임워크가 반입이 되어 있어 UIKit만 반입해주면 상관없습니다.

 

CGPoint를 잡는 방법은 아래 코드와 같습니다.

import UIKit

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

이제는 위치를 잡았으니 크기를 잡는 CGSize에 대해 알아보겠습니다.

 

 CGSize

애플 공식 문서에서는 높이와 넓이의 값을 포함하고 있는 구조체라고 설명이 나와있습니다.

 

말 그대로 이 구조체는 넓이와 높이의 값을 표현할 수 있는 초기화 이니셜 라이저가 정의가 되어있습니다, 이 CGSize를 표현해주기 위해서는 UIKit을 import 시켜주어야 합니다.

 

높이와 넓이를 잡아주는 표현으로 width, height의 프로퍼티를 통해서 해당 뷰의 높이, 넓이를 잡아주면 됩니다.

 

CGSize를 잡는 방법은 아래와 같습니다.

import UIKit

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

 

이제 이 CGPoint와 CGSize를 통해서 크기와 위치를 합치기 위해서는 CGRect구조체를 사용하면 됩니다.

 

 CGRect

애플 공식문서에서는 사각형의 크기와 위치가 포함되어 있는 구조체라고 설명이 나와있습니다.

 

즉 이 구조체는 뷰의 우치, 크기를 모두 한 번에 잡아주기 위한 구조체로 각 x, y, width, height의 네 가지 값을 일일이 이니셜 라이저 할 수도 있고 CGPoint,CGSize를 이니셜라이저 할수 있습니다.

 

이 구조체도 사용할려면 UIKit을 import시켜줘야 합니다.

 

이해가 안 되실 수 있으니 CGRect구조체를 한번 살펴보겠습니다.

 

//Mark - CGRect
public struct CGRect {
   public var orgin: CGPoint
   public var size: CGSize
   
   public init()
   public init(orgin: CGPoint, size: CGSize)
}

 

이렇게 CGPoint의 이니셜 라이저를 보면 인자 값이 없는 기본 초기화 메서드가 있고 해당하는 인자 값을 입력받는 멤버 와이즈 초기화 메서드가 있습니다.

 

즉 CGRect로 뷰의 위치, 크기를 지정해주기 위해서는 CGPoint, CGSize를 모두 잡거나 x, y, width, height를 모두 잡는 구조체 값들이 있어야 합니다.

 

CGPoint, CGSize를 이용해서 잡는 방법은  아래와 같이 origin, size매개변수를 통해서 잡아주면 됩니다.

CGRect(orgin: CGPoint, size: CGSize)

 

그럼 CGRect를 잡아줬으니 이 값을 뷰의 위치에 넣어줘야겠죠? 

 

근데 뷰의 위치 기준을 잡는 속성은 Frame, Bounds 총 2개가 존재합니다...ㅠㅠ 이 두 개 속성은 상당히 다르니 주의해야 합니다.

 

그래서 다음 포스팅에서 한번 알아보려고 합니다. :)