2017년 2월 13일 월요일

CALayer - CAGradientLayer

CAGradientLayer 는 CALayer 기반 클래스로 그라디언트를 그리는 기능을 제공하는 특수 레이어다.

그라디언트(Gradient)라는 단어는 주로 기울기를 의미하는데, 그래픽 영역에서는 한 색에서 다른 색으로 부드럽게 변화하도록 그리는 것을 의미한다.

의미가 이해가 안된다면 그냥 예시를 보자. -_-;

아래 코드는 CAGradientLayer 를 뷰(UIView)의 기본 레이어에 붙이는 예제이다.
let view = UIView(frame: CGRect(x: 0, y: 0, width: 256, height: 256))

let layer = CAGradientLayer()
layer.frame = view.bounds
layer.colors = [UIColor.black.cgColor, UIColor.white.cgColor]
view.layer.addSublayer(layer)
위 코드는 검정색에서 시작해서 흰색으로 끝나는 그라디언트를 그린다. 방향은 위에서 아래로, 즉 스샷처럼 검은색이 위고 아래쪽이 흰색이다.

이런 식으로 부드럽게 색의 변화를 그리는 것이 바로 그라디언트다. 굉장히 다용도로 사용되는 효과인데 잘 알아두면 여러 군데서 (이미지 없이 코딩하는 경우) 써 먹기 좋다.

그라디언트 기준 색상(colors)은 2개를 넘게 입력하는 것도 가능하다.
let view = UIView(frame: CGRect(x: 0, y: 0, width: 256, height: 256))

let layer = CAGradientLayer()
layer.frame = view.bounds
layer.colors = [UIColor.red.cgColor, 
                UIColor.black.cgColor, 
                UIColor.blue.cgColor, 
                UIColor.white.cgColor, 
                UIColor.green.cgColor]
view.layer.addSublayer(layer)
5개의 색상을 이용해서 그라디언트를 만들었다. 그럭저럭 잘 그려진다.

위의 예제들은 그라디언트의 색상들이 매우 고르게 그려져있는데, 만약 특정 색상 영역을 좀 더 넓게 혹은 좁게 그리고 싶다면 locations 프로퍼티를 이용 할 수 있다.
let view = UIView(frame: CGRect(x: 0, y: 0, width: 256, height: 256))

let layer = CAGradientLayer()
layer.frame = view.bounds
layer.colors = [UIColor.black.cgColor, UIColor.white.cgColor]
layer.locations = [0.0, 0.8]
view.layer.addSublayer(layer)
locations 프로퍼티는 1.0이 전체크기라 가정하고 각 색상의 기준 위치(?)를 비율로 설정할 수 있다. 제일 위의 검은색과 흰색으로 그린 그라디언트의 경우와 비교해 보자. 여기서는 흰색이 0.8 즉 위에서 80% 위치쯤에서 최대치로 그려졌다.

그라디언트가 그려지는 방향을 직접 결정하는 프로퍼티는 없는 것 같다. 대신 시작점(startPoint)과 끝점(endPoint)을 지정하는 방법이 있다.
let view = UIView(frame: CGRect(x: 0, y: 0, width: 256, height: 256))

let layer = CAGradientLayer()
layer.frame = view.bounds
layer.colors = [UIColor.black.cgColor, UIColor.white.cgColor]
layer.startPoint = CGPoint(x: 0, y: 0)
layer.endPoint = CGPoint(x: 1, y: 1)
view.layer.addSublayer(layer)
레이어의 실제 크기가 아니라 0~1 사이의 상대크기를 사용한다는 점에 주의하자. (x: 0, y: 0) 은 좌측 상단, (x: 1, y: 1) 은 우측 하단이다.
macOS 에서는 좌표계가 iOS와는 다르게 위 아래가 뒤집힌 그래프 좌표계를 사용한다. 이는 포인트 지정에도 동일하다. 즉 (x: 0, y: 0) 은 좌측 하단이고 (x: 1, y: 1) 은 우측 상단이다. iOS와 동일하게 그리려면 y 축 수치를 뒤집거나 혹은 isGeometryFlipped 값을 true 로 바꾸자.
시작점과 끝점 대신 변형(transform)을 이용해 방향을 바꿀 수도 있다.
let view = UIView(frame: CGRect(x: 0, y: 0, width: 256, height: 256))

let layer = CAGradientLayer()
layer.frame = view.bounds
layer.colors = [UIColor.black.cgColor, UIColor.white.cgColor]
layer.transform = CATransform3DMakeRotation(CGFloat.pi / 2, 0, 0, 1)
view.layer.addSublayer(layer)
transform 에 대한 것이 추가되었다. 스샷처럼 오른쪽에서 왼쪽으로 그라디언트가 그려진다.

대신 이 방법은 3D 연산에 대한 지식이 있어야 제대로 쓸 수 있을 것 같다. 3D 매트릭스 연산에 대한 이해가 필요한데 유감스럽게도 난 이 분야에선 꽝이라 잘 이해가 안된다. XD

이상으로 그라디언트 레이어(CAGradientLayer)에 대해 간략히(?) 살펴봤다.

[관련글] CALayer 시작하기
[관련글] 스위프트(Swift) 가이드​

댓글 없음 :