원형 프로그래스바 만들어보기 (1) : 원 그리기

안녕하세요 밀쿄입니다:)

이튿만에 포스팅인가요?

매일매일 올리고 싶지만..어제 코딩버그가 ..60개를 고친다고..쿨럭..그렇습니다

 

오늘은 원형 프로그래스바를 만들어볼껍니다.

흔히 프로그래스바라고 한다면

보통은 요놈을 떠올릴꺼라 생각되어집니다.

근데 요놈이..참.. 이쁘게 만들기 힘들다고 생각해요..

(제 손에 문제가 있어서 그럴 수도 있어요.)

 

그래서 원형 프로그래스바를 만들어보자고 생각했습니다.

쉽...지...않..아......요..? 는 농담이고 그냥 저냥..할 만 했습니다...

 

일단 여러 내장 함수 중에..

이런 함수가 있습니다

대충 해석하면 3차원 공간에 무언가 그리는 레이어같네요.

근데 보면 "Bezier" 이란 녀석이 있습니다... 사전에 안나오는 녀석인데요..

 

너의 커스텀뷰에서 렌더링할 수 있는 직선, 곡선으로 구성된 경로네요.

 

쉽게 생각하면 저 경로를 따라 그려주는거 아닐까요..?

일단 원부터 만들어봅시다...

일단 클래스부터 만듭시다

자 이제 클래스 안을 하나하나 채워나가봅시다

일단 원이 그려질 경로를 UIBezierPath를 통해서 만들어봅시다

UIBezierPath를 초기화하는 방법이 여러개 있는데 저는 아래와 같은 방법을 썼습니다.

원의 중심, 반지름, 시작각도, 끝각도, 시계방향으로 그릴지 아닐지를 넣어서 초기화 하네요

 

일단 원의 중심부터 생각해봅시다.. 

원의 중심은..원이 있는 뷰의 중심이겠죠?

그러면....widh의 절반 heigh의 절반이 중심일꺼고

반지름은 당연히 width의 절반..

시작각도, 끝각도는 라디안인데.. 잘모르겠으니,, 일단 넘어가고'

시계방향은 트루를 주어봅시다

이제 각도는 설명을 보면 라디안이라면서 그림이 하나 나와있네요

수포자에겐 정말 무서운 그림이네요..

감으로... 0과 1.5파이를 넣어보겠습니다..

이렇게 경로를 만들었으니까 이제는 그려봅시다.

일단은 프로그래스바니까

채우는 색은 투명하게, 외각선(?)은 보여야겠네요.

찾아보니 stroke란 있네요.

쉽게 말하면 현재 경로를 따라 선을 그리는 것 같네요.

채우는 색은 fillColor 외각선(?)같은건 strokeColor에서 관리하네요

그러므로 코드가..

이런 코드가 나옵니다..

아 변수 선언한 그림을 캡쳐하는 걸 까먹었는데

circleProgress는 CAShapeLayer 타입의 변수 입니다.

 

이 코드를 실행시켜보면 아무것도 안뜹니다..

왜냐하면 우리가 메인뷰에 add를 안해줬기 때문입니다.

다음과 같은 코드를 만들어줍니다. 

 

자 이제 코드작성도 끝나겠다. 실행시켜봅시다

의도한건.. 원인데 애매한 원이 나왔네요

다시 그림을 보면.. 90도가 증가할 때마다 파이값이 0.5가 증가하네요..

그럼 startAngle를 -0.5파이로 바꿔보겠습니다

이렇게 코드를 바꿔주고 다시 실행시켜봅시다.

완전한 원이 나왔습니다..

성공이네요.