Swift + iOS/iOS

[ios] CALayer

군옥수수수 2018. 4. 17. 15:59

[ios] CALayer


안녕하세요. 오늘은 iOS에서 상당히 중요한 역할을 하지만 생각보다 다룰일이 많이 없었던 UIViewlayer프로퍼티인 CALayer를 공부해보았고 제가 이해한 것을 바탕으로 기록을 해보고자 이렇게 글을 작성하게 되었습니다.


저는 layer 프로퍼티를 다뤄본 것이라고는 cornerRadius를 설정할 때와 AVPlayerLayerUIView에 추가를 해본 것이 전부였습니다. 그것을 사용할 때도 그저 이렇게 쓰나 보다 하여 사용했지 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

이번 포스팅에서는 간단하게 cornerRadiusshadow만을 다뤄보도록 하겠습니다.


위와 같이 뷰에 속한 루트 layer를 통해 shadowcornerRadius 값을 설정할 수 있습니다. shadow에 관련된 프로퍼티로는 위에서 사용한 프로퍼티 이외에도 다양한 프로퍼티가 있습니다. 위의 코드의 결과는 다음과 같습니다.



그리고 cornerRadius 관련 예제 코드에서 많이 보이는 코드가 바로 clipsToBoundsmasksToBounds입니다.

self.view.clipsToBounds = true
self.view.layer.masksToBounds = true

이 둘의 역할을 똑같습니다. 다만 프로퍼티가 속한 곳이 다를 뿐인데요. clipsToBoundsUIView에 속하고 masksToBoundsCALayer에 속합니다.


이 둘의 용도는 SubView나 SubLayer의 내용이 SuperView나 루트 Layer의 경계를 무시하고 자신을 보여주느냐 아니면 경계에 맞추어 잘리느냐를 설정해주는 Bool 타입의 프로퍼티입니다. 위와 같이 true로 설정한다면 SuperView나 루트 Layer에 경계에 맞추어 내용이 잘리게 됩니다.


제가 사용한 예제에서는 이 프로퍼티를 따로 지정해주지 않은 이유는 SubView나 SubLayer를 갖지 않기 때문입니다.


마무리

오늘은 이렇게 CALayer에 관해 알아보았습니다. 이전에는 그냥 사용법을 알고 사용했다면 이제는 존재 이유와 작동 원리를 알고 사용할 수 있게 되어 사용하면서 죄책감을 덜 느끼게 된 것 같아 홀가분합니다!

다음에는 더욱 유익한 포스팅으로 찾아뵙도록 하겠습니다. 감사합니다.


Source : github


참고자료