[ios] CALayer
[ios] CALayer
안녕하세요. 오늘은 iOS에서 상당히 중요한 역할을 하지만 생각보다 다룰일이 많이 없었던 UIView
의 layer
프로퍼티인 CALayer를 공부해보았고 제가 이해한 것을 바탕으로 기록을 해보고자 이렇게 글을 작성하게 되었습니다.
저는 layer
프로퍼티를 다뤄본 것이라고는 cornerRadius
를 설정할 때와 AVPlayerLayer
를 UIView
에 추가를 해본 것이 전부였습니다. 그것을 사용할 때도 그저 이렇게 쓰나 보다 하여 사용했지 layer
의 존재 이유와 그것이 정확히 어떤 역할을 하는지 알지 못하였습니다. 하지만 이번 기회를 통해 layer
의 역할이 굉장히 중요하다는 것을 알게 되었습니다. 그럼 바로 시작해보도록 하겠습니다.
Graphics in iOS
먼저 CALayer
에 대해 알아보기 전 iOS에서 화면에서 보여주는 여러 그래픽스 요소들을 그려내기 위해 어떤 것들이 존재하는지부터 알아보도록 하겠습니다.
먼저 OpenGL은 iOS 디바이스의 그래픽스 하드웨어와 가장 빠르고 직접적인 접근을 지원합니다. 하지만 이렇게 하드웨어에 높은 접근성을 지원하는만큼 간단한 작업조차 상당히 많은 양의 코드를 필요로합니다.
이런 식으로 단계적으로 아래 단계의 불편함을 보완하고자 Core Graphics와 Core Animation 등이 만들어졌습니다. 그리고 CALayer
는 Core Animation이 제공하는 요소 중 하나이고 이 CALayer
를 제공합니다. 이렇게 상위 수준의 Core Animation이 CALayer
를 제공하기 때문에 보다 편리하게 그래픽스 하드웨어에 직접적인 접근을 지원하고 빠른 속도로 작업을 처리할 수 있습니다.
CALayer
CALayer
는 실제로 UIView
에 속하며 UIView
를 지원해주는 역할을 합니다. 각 뷰마다 루트 layer
는 하나씩 존재하고 이 루트 layer
는 각각 SubLayer
들을 갖습니다.
UIView
는 레이아웃과 터치 이벤트 처리 등 많은 작업을 합니다. 하지만 실제로 뷰 위에 컨텐츠나 애니매이션을 그리는 행위는 직접적으로 다루지 않고 UIKit
가 이러한 작업들을 Core Animation에 위임합니다. 즉 실질적으로 뷰 위에 컨텐츠와 애니매이션을 그리는 행위는 CALayer
가 담당하게 됩니다.
이러한 점에서 UIView
는 사실 CALayer
를 감싸고 있는 것에 불과합니다. 그렇기 때문에 UIView
의 bounds가 변경되면 UIView
는 자신의 루트 layer
의 bounds를 변경합니다. 이렇게 루트 layer
의 레이아웃은 속해있는 UIVIew
에 맞추어 자동으로 변경됩니다. (하지만 SubLayer들은 자동으로 맞추어지지 않습니다.)
그럼 바로 코드를 통해 layer
에는 어떤 프로퍼티가 있는지 알아보도록 하겠습니다.
Implementation
이번 포스팅에서는 간단하게 cornerRadius
와 shadow
만을 다뤄보도록 하겠습니다.
위와 같이 뷰에 속한 루트 layer
를 통해 shadow
와 cornerRadius
값을 설정할 수 있습니다. shadow
에 관련된 프로퍼티로는 위에서 사용한 프로퍼티 이외에도 다양한 프로퍼티가 있습니다. 위의 코드의 결과는 다음과 같습니다.
그리고 cornerRadius
관련 예제 코드에서 많이 보이는 코드가 바로 clipsToBounds
와 masksToBounds
입니다.
self.view.clipsToBounds = true
self.view.layer.masksToBounds = true
이 둘의 역할을 똑같습니다. 다만 프로퍼티가 속한 곳이 다를 뿐인데요. clipsToBounds
는 UIView
에 속하고 masksToBounds
는 CALayer
에 속합니다.
이 둘의 용도는 SubView나 SubLayer의 내용이 SuperView나 루트 Layer의 경계를 무시하고 자신을 보여주느냐 아니면 경계에 맞추어 잘리느냐를 설정해주는 Bool 타입의 프로퍼티입니다. 위와 같이 true
로 설정한다면 SuperView나 루트 Layer에 경계에 맞추어 내용이 잘리게 됩니다.
제가 사용한 예제에서는 이 프로퍼티를 따로 지정해주지 않은 이유는 SubView나 SubLayer를 갖지 않기 때문입니다.
마무리
오늘은 이렇게 CALayer
에 관해 알아보았습니다. 이전에는 그냥 사용법을 알고 사용했다면 이제는 존재 이유와 작동 원리를 알고 사용할 수 있게 되어 사용하면서 죄책감을 덜 느끼게 된 것 같아 홀가분합니다!
다음에는 더욱 유익한 포스팅으로 찾아뵙도록 하겠습니다. 감사합니다.
Source : github