UIView와 CALayer

iOS에서 화면에 보이는 모든 것들은 UIView를 서브클래싱 하고 있다. 이런 UIView의 생김새를 변경하거나 어떤 효과를 줄 때 layer를 통해 작업을 수행한다. cornerRadius, shdow, Animation 등 의 작업할 때 항상 layer가 등장한다. layer가 무엇이길래 UIView와 함께 자주 등장할까?

UIView의 layer

공식문서에서는 렌더링에 사용되는 CoreAnimation의 layer (CALayer) 이고, view는 이 layer의 delegate라고 한다. UIView는 하나 이상의 layer를 가지고 있다고 한다. 렌더링은 무엇이고, CoreAnimation은 어떤 것이고, CALayer은 어떤 클래스이며 CALayerDelegate가 무엇이길래 UIView가 할당되어 어떤 작업을 수행할까?

CALayer

UIView의 layer는 CALayer 타입이다. 앞에 CA가 붙는것을 보면 알 수 있듯이 Core Service 프레임워크에 해당되며 CoreAnimation 프레임워크에 포함되어 있다.

CALayer의 공식 문서를 보면 다음과 같이 정리할 수 있다.

• view를 위한 backing store을 제공하는 데 사용되지만 뷰 없이 콘텐츠를 표시할 수 있다.
• CALayer의 주목적은 사용자가 제공하는 visual content (시각적 콘텐츠)를 관리하는 것
• layer 자체의 visual 속성인 배경색, 테두리, 그림자 같은 시각적 설정 가능
• 그 외에도 콘텐츠를 화면에 표시하는데 geometry(위치, 크기, transform 등)를 유지 및 관리
• layer의 프로퍼티를 수정하여 layer의 콘텐츠나 geometry에 대한 애니메이션 시작 가능
• UIView에 의해 layer 객체가 만들어진 경우, UIView는 자동으로 layer의 delegate로 할당된다.
• 사용자가 layer를 생성한 경우 delegate를 할당하고, 할당한 객체로 layer의 content를 제공하고 다른 작업을 할 수 있다.
• subview의 레이아웃을 각각 관리하기 위해 layoutManager가 있을 수도 있다.

backing store가 뭔지, subviews가 UIView인지 하위 layer인지 아직은 모르겠지만, 설명된 내용을 보면 다음과 같이 간단히 정리할 수 있다.

• CALayer는 콘텐츠를 표시 및 관리하는 역할
• CALayer의 프로퍼티를 수정하여 애니메이션 (corner Radius, shadow, Background color 등)을 만들 수 있다.
• UIView는 CALayer의 delegate다.

UIView에서 background color를 설정하거나 corner Radius를 설정하거나 그림자 효과를 넣을 때 UIView 자체에 효과가 들어가는 것이 아닌 UIView의 layer에 효과가 적용된다는 것.

렌더링

레이어는 콘텐츠를 그리는 게 아니라 “렌더링”을 한다고 한다. 레이어는 콘텐츠를 캡처해서 backing store라고 불리는 비트맵에 캐싱하고, 레이어는 레이어 객체와 그와 관련된 정보를 관리하며, 변경사항이 발생해서 애니메이션을 트리거하면 Core Animation이 변경된 정보를 사용해서 렌더링을 하면 이를 화면에 표시한다.

 

 

즉 레이어는 표시를 하는 역할을 하는 것이고, Core Animation은 corner Radius나 backgroundColor 같은 layer의 속성변경과 애니메이션을 처리하고 렌더링 하는 역할을 한다.

 

정리

• UIView는 CALayer의 delegate 및 wrapper
• UIView의 cornerRadius, shadow, backgroundColor나 ImageView의 contentMode 등 화면에 보여주는 동작과 관련된 기능은 사실 레이어에 적용되는 것
• layer는 콘텐츠를 직접 그리지 않고, 제공받아 이를 비트맵으로 캐싱 및 관련 데이터 저장
• 데이터에 변경이 일어나면 CoreAnimation이 이를 이용해 비트맵을 렌더링 하는 작업을 수행 

참고:

https://developer.apple.com/documentation/quartzcore/calayer/

https://developer.apple.com/documentation/uikit/uiview

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/CoreAnimationBasics.html#//apple_ref/doc/uid/TP40004514-CH2-SW15

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/CoreAnimationBasics.html#//apple_ref/doc/uid/TP40004514-CH2-SW12