[iOS] CGPoint, CGSize, CGRect, Frame, Bounds

 

어떻게 지평좌표계로 고정하셨죠?

 

 

 

 

 

 

 

 

좌표계에 화면을 띄우기 위해서는 origin(x, y), width, height값을 알아야합니다.

CGPoint

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

• x좌표, y좌표를 가지고 있음
• 시작점 (origin)을 나타나게 될 구조체

CGSize

넓이와 높이 값을 가지고 있는 구조체

• width와 height값을 가지고 있음
• Size는 넓이와 높이만 가지고 있을 뿐 아직 사각형은 아님.

CGRect

• 직사각형의 위치와 크기를 포함하고 있는 구조체
• 이름에서 알 수 있듯이 CGRect, 사각형의 모습.

코드로 순서대로 살펴봅시다.

CGPoint → CGSize → CGRect 순.

/* Points. */
public struct CGPoint {

    public init()

    public init(x: Double, y: Double)


    public var x: Double

    public var y: Double
}

/* Sizes. */

public struct CGSize {

    public init()

    public init(width: Double, height: Double)

    public var width: Double

    public var height: Double
}

/* Rectangles. */

public struct CGRect {

    public init()

    public init(origin: CGPoint, size: CGSize)

    public var origin: CGPoint

    public var size: CGSize
}

이제 iOS에서는 어디에(CGPoint타입의 origin) 얼만큼의 사이즈로(CGSize타입의 widht와 height) 사각형을 그릴지 알 수 있게 됩니다.

Frame vs Bounds

Frame

UIView의 프로퍼티

프레임 직사각형으로, 상위 뷰(superview)의 좌표계에서 뷰의 위치 및 크기를 설명합니다.

위치 및 크기가 익숙하지 않나요?? 위에서 살펴봤던 CGRect입니다.

코드를 살펴보면 frame의 타입은 CGRect인걸 알 수 있습니다.

extension UIView {

    open var frame: CGRect

    open var bounds: CGRect

        ...
}

한가지 더 중요한 점은 “superview의 좌표계에서”라는 말입니다.

frame의 origin(x,y) 좌표는 superview의 origin을 (0, 0)으로 놓고 원점으로부터 얼마나 떨어져있는지를 나타냅니다.

이 사진에서 사각형의 frame origin은 CGPoint라고 적힌 해당 좌표값이 되겠네요.

frame의 size

해당 사각형의 width를 240 높이를 130으로 잡고 frame을 출력해보면

위에 값 처럼 나옵니다. Frame은 다시 CGRect이였기 때문에 앞에 두 값들은 origin의 x,y좌표인 걸 알 수 있습니다. 뒤에 frame은 우리가 잡았던 대로 240, 130이 뜨는걸 확인할 수 있습니다.

뷰를 그대로 회전만 시킨 후 frame을 출력한다면 어떻게 될까?

(84.78804959713, 289.595615319537, 223.75723413907338, 272.80876936092596)

뭐지 왜 바뀐거지?

frame은 View가 차지하는 영역을 감싸는 것이라고 생각하면 됩니다. 프레임 씌우지마! 라는 말을 예로 들면 씌울려면 안에 있는 content를 모두 감싸야하는게 자연스럽죠?

따라서 아래 그림과 같은 빨간색 테두리의 사각형이 곧 Frame이 됩니다.

자연스럽게 origin도 바뀌게 되고 사각형의 width와 height도 모두 바뀐 모습을 볼 수 있습니다. 값이 바뀌어 나오는게 이제 이해가 가시나요?

만약 이 때 뷰를 회전시키든 뭘 하든 내가 처음에 줬던 넓이와 높이 값을 알고 싶어!라고 한다면 그 때 사용할 수 있는 것이 Bounds입니다.

Bounds

UIView의 프로퍼티

뷰의 위치와 크기를 자체 좌표계로 나타내는 사각형입니다.

자체 좌표계가 핵심 키워드입니다. Frame은 앞에서 superview, 즉 상위 뷰의 좌표계를 기준으로 잡았는데 bounds는 자기 자신의 좌표계를 기준으로 합니다.

따라서 origin은 항상 (0,0) !

아까 뷰를 다시 가져와볼게요

=====frame=====

(84.78804959713, 289.595615319537, 223.75723413907338, 272.80876936092596)

=====bounds=====

(0.0, 0.0, 240.0, 130.0)

bounds를 보면 origin (0, 0)에 우리가 처음 설정해줬던 width 240 height 130값이 온전히 들어있는 것을 확인할 수 있습니다.

Ref

---

https://babbab2.tistory.com/44

https://zeddios.tistory.com/201