Layer, .anchorPoint, .Position, 그리고 view.center(feat, frame, bound)

정의

학습목표

그림을 그리는 객체인 CALayer 에서

• anchorPoint 
• position 
• view.center 

가 어떤 역할을 하는지 알아보자.

1. 뷰에서 Layer 의 정의

• 프로퍼티로 CALayer 타입의 layer 를 가지고 있음
• CA = Core Animation
  • Core Graphics 에 속하고, 이를 간단하게 사용하기 위한 것이 Core Animation
  • 그 CA 를 더 간단하게 만든것이 UIKit
• UIView 는 그리는 행위는 직접하지 않고 그리는 시각적 행위를 Core Animation 에 위임

1.1 UIView 에서 CALayer 의 구성

- UIView
    - CALayer(Root) - 뷰당 하나를 가지고 있음
        - SubLayer - 루트 레이어에 속하는 자식 레이어들
        - SubLayer
        - SubLayer
        - …

UIView 의 subView 들은 CALayer(Root) 위에 얹혀지는 것임

CALayer 도 frame, bound, position 을 가지고 있음

• frame
  • 외부에서 바라보는 좌표
• bound
  • 내부에서 바라보는 좌표
• position
  • anchorPoint을 기준으로 하는 상대적인 위치값

2. layer 에서 AnchorPoint 와 Position

• anchorPoint
  • 기본값은 CGPoint 타입이고, (0.5, 0.5) 입니다.
  • x, y 값의 범위는 각각 0.0 ~ 1.0 사이의 값
• position
  • 기준점이 anchorPoint에 놓이도록 layer 를 그리는 것

• 위의 그림을 보면, anchorPoint 가 (0.5, 0.5) (중앙)
  • 포지션이 100, 100 에 그려졌음
• 아래 그림을 보면, anchorPoint 가 (0.0, 0,0) (좌상단)으로 변경
  • 포지션이 40, 60 에 그려졌음
  • 아래 그림중에서도 왼쪽 것을 기준으로 보세요(StroyBoard에서 본다면 0.0, 0.0 이 좌상단에 있는 것이 맞습니다.
• 즉, layer.position 은 view.center 가 아니다.
  • position 하고 view.center 는 같다.
  • position 하고 (view.frame.midX, view.frame.midY) 는 다르다.

시작할 때 정중앙에 위치한 뷰

anchorPoint 를 조정한 뷰

 

• anchor 포인트를 변경했을 때 frame 의 origin 이 변경된 것을 확인할 수 있다.
• 이쯤에서 드는 의문이 position 하고 view.center 가 왜 값이 같은거지..?
  • view.center 로 하면 position 과 같은 값이 나온다.
  • frame.midX, frame.midY 로 해야 다른 값이 나온다(주의)

출력값

전체 코드

 

출처

http://minsone.github.io/mac/ios/coreanimation-layer-layout-in-uiview

https://developer.apple.com/documentation/uikit/uiview/1622627-center