iOS ) CAGradientLayer

 

안녕하세요 :) Zedd입니다.

 

지금 글을 다 쓰고 올라왔습니다.

하하

 

ㅇㅇ

이 글은

2020.02.02 02시 02분에 올라가도록 예약을 걸어놓을 예정입니다 

하하~~~~!~!~!~

제 평생 다신 안올...아주 아름다운 시간이죠

 

그거 아시나요!? 2020년은...현 세대가 누릴 수 있는 가장 힙한 숫자의 해라는 것을..

2020년을 이길 수 있는건

2222년밖에 없음.. 또는 2345년..

그러니 올 한해 알차게 보내봅시다.

 

그럼 글 시작!

 

요새 저는 활동앱에

 

요 Activity Ring을 다 채우려고 노력하는 중입니다.

아 참고로...이 활동앱은 애플워치가 있어야 설치가 됩니다!!!

애플워치가 없는 사람은.........워치 사야지 뭘 어떡해

 

아무튼 애플워치를 산 이후로 가장 알차게 쓰고 있는 요즘..

이 활동앱을 쓰면서 따라해보고싶은 부분이 정말 많아요!!!!!!!

그 중 하나를 공부해보려고 해요 :D

 

 제목에서도 보실 수 있듯이..

저 Activity Ring의 그라데이션 느낌을 내보려고 합니다 :D

링을 보면 진하게 시작했다가 점점 밝아지는 걸 볼 수 있죠!!!

 

 

제꺼는 그냥 밝기만 하네요...아무튼 그라데이션을 넣는 방법을 공부해볼게요!!

 

CAGradientLayer

---

CAGradientLayer는 우리가 저번에 배웠던 CAShapeLayer의 칭구칭긔입니다.

정의는 background color위에 color gradient를 그려서 layer의 shape을 채우는 layer..인데요.

그냥 쉽게 gradient 효과 넣어주는 칭구다!!! 이렇게 이해할게요.

 

프로퍼티는 꽤나

 

직관적이에요.

시작, 끝 Point, color..등등

그럼 사용해봅시다.

 

간-단

 

이렇게만 해주면

이렇게 gradient가 적용된..아주 아름다운....화면을 볼 수 있습니다.

 

가장 핵심인 코드는

이 2가지 코드인데요

frame은 저 gradientLayer의 frame을 말하는 걸거고

colors는 당연하게도....적용 할 색상들을 의미하겠죠?

 

그럼 colors는 봤고..locations부터 착착 봐봅시다.

 

locations는 NSNumber array를 받는데요,

각 gradient가 멈추는 location을 의미합니다. 0 ~ 1 사이의 값을 가지며, 반드시!! 증가해야합니다.

[1.0, 0.8, 0.5] < 이런거 안되고

[0.5, 0.8, 1.0] < 이렇게 해야함.

 

엥 근데 저는 처음에 locations값 안줬는데... < nil이면 범위 전체에 균일하게 분산됩니다.

 

ㅇㅇ자 생각해봅시다.

멈추는 지점이야.

 

우리는 색상이 총 3가지가 있어요.

 

red

blue

yellow

 

이 상태에서 locations를 줘보겠습니다.

1로 줘볼게요.

정의가 "각" gradient가 멈추는 location을 의미한다고 그랬어요.

그럼 우리는 지금 color가 3가지인데, 그 중 첫번째가 red잖아요?

근데 locations는 0 ~ 1 사이의 값을 가지는데

내가 멈추는 지점을 1로 줬어.

그럼 red가 처음부터 끝까지 덮고 있는게 나와야 합니다.

이해가셨나요?

네 멈추는 지점이에요!!!

 

locations를 [0.5]로 줘볼게요.

그럼 red가 0.5에서 멈추겠죠? 그리고 다음 색상들이 그려질겁니다.

흠 신기한건 yellow가 그려지지 않았네요.

0.5에서 red가 끝나고 이제 blue가 시작되는데, blue의 멈추는 지점을 지정해주지 않았으니..1까지 blue가 전부 먹어버린것 같다는 생각이..

그럼 0.5, 0.6으로 줘볼게요.

그럼 red가 0.5쯤에서 멈추고, 0.6쯤에서 blue가 멈출겁니다!! 그리고 그 나머지는 yellow로 채워지겠네요.

아무튼 좀 locations에 대해 이해가 가셨나요? 그냥 정의대로..멈추는 위치입니다.

 

startPoint / endPoint

시작/끝 지점이라고 생각하면 되겠죠..?

각각 정의는 gradient의 시작점/끝점입니다. 

 

시작점은 gradient의 첫번째 정지 point에 해당합니다. 

point는 단위 좌표 공간에서 정의 된 다음, 그려질 때 레이어의 bounds rectangle에 매핑됩니다. 기본값은 (0.5, 0.0)

 

시작점은 gradient의 마지막 정지 point에 해당합니다.

point는 단위 좌표 공간에서 정의 된 다음, 그려질 때 레이어의 bounds rectangle에 매핑됩니다. 기본값은 (0.5, 1.0)

 

첫번째/마지막 point라는 건 알겠는데..

기본값이 왜그래

0.5, 0.0, 1.0은 뭐지!?

 

자 하나씩 알아볼게요.

먼저

 

지금 우리의 gradient는 위에서 아래로..gradient가 나오고 있죠? 

top -> bottom이 기본값입니다.

 

엥 나는 left -> right로 하고싶은디;;;

 

 

=> 그럴 때 startPoint/endPoint를 사용하면 됩니다!

출처 https://www.swiftdevcenter.com/how-to-create-gradient-color-using-cagradientlayer/

아주 잘 나와있는 그림이 있길래 가져와봤습니다. 

자 startPoint의 기본값이 (0.5, 0)

endPoint의 기본값이 (0.5, 1.0)라고 그랬죠?

그림에서 보면 저 빨간박스 입니다.

당연히.....top -> bottom으로 나올 수 밖에 없군요. 

그럼 나는 left -> right하려면 어떻게 주면 된다!?!?!

 

네 startPoint를 (0, 0.5)로 주고

endPoint를 (1, 0.5)로 주면 되겠네요.

응 개쉬워~~

(위 그림은 따로 locations는 안준 상태에요!)

 

그러면 type만 보면 된당.

type은 CAGradientLayerType타입입니다. 

CAGradientLayerType은 enum일 것 같지만 struct에요.

CAGradientLayerType안에 타입 프로퍼티들이 있어요. 

 

이렇게 3가지가 있네요.

 

하나씩 볼게요.

axial(linear)

축이라는 뜻이죠? linear라고도 부른다고 합니다.

axial gradient은 정의 된 두 endPoint 사이의 축을 따라 달라집니다. 축에 수직인 선 위에 놓여있는 모든 점들은 동일한 색상 값을 갖습니다.

CAGradientLayer의 type 기본값이 이 axial이에요.

 

 

conic

radial

 

zzzzzz아니 놀랍게도...정의가 없음......장난?

심지어 conic은 iOS 12.0부터 나왔네요. 꽤나 최신..

ㅎ
ㅡ
ㅁ..하나씩 봅시다.

 

conic

conic은 원뿔 곡선...이라는 뜻이라고 합니다.

ㅇ ㅏ 이거~~~~~ 

뭔데

뭐냐고

 

아니 왠지 보니까

이걸 써야 Activity Ring처럼 만들 수 있나본데.......어케 쓰냐고

 

ㅇ ㅏ~~~

startPoint랑 endPoint를 잘 잡아줘야 하네.....

 

 

 

radial

방사형..이라는 뜻ㄱ

이런 ㄴ낌

하

,,,,

오!?!?

이것도 startPoint, endPoint를 잘 잡아줘야하는군요...

이렇게 해줬더니 진짜 방사형 됨. 

 

 

흠 그렇구만

 

 

이제 CAGradientLayer에 대해 공부를 다 했으니...Activity Ring을 만들어봅시다.

conic type을 이용해서요!

 

어쩌구 저쩌구를 하면

이런 예쁜넘이 만들어집니다.

색상은 그냥 UIColor에 정의된 거 쓰고싶어서..Activity Ring색상이랑 안맞춤 ㅎ

 

https://gist.github.com/Zedd0202/308b9a3f86056cc61ec20dad3c43b8e8

GradientCircle.swift

간단하게 Gist로 만들어봤어요!