Frame과 Bounds 이해하기

baecheese·2021년 5월 6일

CALayer CGAffineTransform Center anchorPoint bounds frame iOS swift transform

Frame

var frame: CGRect { get set }

Superview의 좌표계에서의 위치와 크기를 나타내는 직사각형
- 뷰 포지션과 사이즈를 설정하는 레이아웃 작업 시에 사용
frame을 설정하면 center 가 바뀌고, bounds 범위 안에서의 적절한 사이즈로 바뀐다.
(bounds와 동일) frame의 변화는 draw(_:) 없이 재표시된다.
- 만약 draw(_:) method를 사용하고 싶다면, contentMode 의 UIView.ContentMode.redraw 를 사용할 것.

⚠️ Warning

transform property가 default 상태가 아니라면 (== CGAffineTransformIdentity가 아니라면), frame은 정의되지 않고, 수정하면 안된다.
이와 같은 경우
1. center property를 통해 위치를 재배치
2. bounds property를 통해 크기를 맞춤

Bounds

var bounds: CGRect { get set }

View 자신의 내부 좌표계에서의 위치과 크기를 나타내는 직사각형
default bounds
- origin == (0, 0)
- size == frame size
bounds size를 변경하면
- center를 중심으로 커지거나 작아진다.
- frame size도 함께 변한다.
(frame와 동일) bounds의 변화는 draw(_:) 없이 재표시된다.
- 만약 draw(_:) method를 사용하고 싶다면, contentMode 의 UIView.ContentMode.redraw 를 사용할 것.

Center

var center: CGPoint { get set }

frame rectangle의 중심점
frame 대신 view position을 바꿀 때도 쓸 수 있음

Transform

var transform: CGAffineTransform { get set }

frame rectangle의 스케일을 조절하거나 회전하는 데에 쓰임
CGAffineTransformIdentity 가 default value이다.
- transform했던 view에 view.transform = CGAffineTransform.identiy 하면 원상복구된다.
변환은 뷰의 anchor point에 연관되어 발생한다.
- default로 anchor point는 frame의 center point와 같다.
- anchor point를 바꾸면, CALayer object의 anchorPoint 가 수정된다.
iOS 8.0 이상에서는 transform property가 Autolayout에 영향을 주지 않는다. Autolayout은 untransformed frame을 기준으로 뷰의 정렬을 계산한다.

CGAffineTransform

An affine transformation matrix for use in drawing 2D graphics.
2D 그래픽을 그릴 때 사용되는 아핀 변환(affine transformation) 행렬

image for 2D affine transformation matrix-ko

CGAffineTransform data structure에는 처음 두 열의 값만 포함
세 번째 열은 항상 (0, 0, 1)
일반적으로 아핀 변환을 직접 만들 필요는 없고 아래 메서드를 이용한다.
- 이동 - translateBy(x:y:)
- 스케일 - scaleBy(x:y:)
- 회전 - rotate(by:)

CALayer

class CALayer : NSObject

image base의 시각적 컨텐츠를 관리하는 object
layer들은 대부분 backing store를 제공받기 위해서 사용되지만, view의 display contents 없이도 사용될 수 있다.
- 이미지 데이터가 backing store에 저장되어있다가 화면 렌더링 시에 메모리로 올라오게 되는 것
메인 기능은 비주얼 컨텐츠 관리
그 외에
- 레이어 스스로가 background, color, border, shadow같은 visual attributes를 설정할 수 있음
- 스크린 위에 컨텐츠를 나타낼 때, position, size, and transform 같은 콘텐츠 도형 표시에 대한 정보를 가짐
- layer property를 수정해서 컨텐츠나 도형 위에 애니메이션을 initiate 할 수 있음
  - 애니메이션 타이밍 관련 CAMediaTiming protocol 같은 것을을 제공하여 duration과 pacing을 캡슐화한다.
  - pacing이란, 프레임을 어떻게 배치하냐에 따라 애니메이션의 빠르게 혹은 느리게 움직임을 보여주는 것에 대한 수치.
    - Animation Pacing: How To Animate Quick Movement vs. Slow Movement
    - Pose-To-Pose Pacing Animation
일반적으로 view에는 layer delegate가 자동적으로 할당된다.
- layer는 왠만하면 따로 만들지 말라.
- 만약에 따로 만들려면, 개발자가 delegate object 할당하고, 해당 object를 사용해서 레이어의 내용을 동적으로 제공하는 등 여러가지 다른 작업을 수행해야 한다.
- layer의 subviews layerout를 관리하기 위해 layoutManager 같은 것을 사용할 수 있다.

anchorPoint

bounds의 회전 기준점
default : bounds의 중심을 나타내는 (0.5, 0.5)

마치며

~~공부할거 쏟는다 입벌ㄹ려~~

평소 잘 쓰고 있던 것들이기에, Frame과 Bounds에 대한 개념 정리만 ~~가볍게~~ 하려는 계획이었으나, 파고 파다보니 거의 이틀동안 이것만 공부하게 되었다. 후후.. 그치만 이런 시간을 가져야 한다. 일정에 쫒기고 사용하기에 급급한 날들이 쌓여 더 넘기 어려운 정체를 만들게 될 것이다. 개발을 처음 시작했을 때, 궁금증을 채우는 정도로 가볍게 맛만 보려고 했던 과거의 내가 떠오르네..~~호기심천국멈춰🖐🏻~~