원형 프로그래스바 만들어보기 (2): 완성을 향해서...

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

오늘은 지난 번에 원에서 끝냈던 원형 프로그래스바를 완성 시켜보겠습니다.

 

이제 고민해볼 시간입니다.

프로그래스바를 어떠한 방식으로 구현할지..

먼저 생각해볼 수 있는 건 경로를 조작해보는거네요.

 

어..되긴되네요.

근데 제가볼 땐 직관적이지 못하네요

-0.5 ~ 1.5 까지면 총 2.0 인데..

우리가 흔히 쓰는 프로그래스뷰는 0.0 ~ 1.0까지 표현되죠?

이것뿐만 아니라 지금 그림만 보면 4분의 1이 칠해져있으니까 0.25 같지만..

실제로 데이터 값의 입력은 -0.5 ~ 0 까지 0.5가 들어가있어요.

1.0 -> 2.0 이 두 배가 되었듯이 들어가는 값도 두배가 되야하네요.

그래서 결론은 제 주관으로는 직관적이지 못하다..라는 거에요

 

그래서 UIBezierPathI와 CAShapeLayer를 다시 한 번 봅시다.

무언가 방법이 있을꺼라 믿으면서.,.

 

 

자 있네요. 될 것처럼 보이는 프로퍼티가..

start는 path를 그릴 상대적인 시작경로 end는 멈출 경로.

둘 다 0.0 부터 1.0까지 표현되며 start는 0.0 end는 1.0이 default value네요.

 

그러면 start는 냅두고 end값을 조정 해보겠습니다.

아 그전에

 

선 굵기를 조정해서 잘보이게하겠습니다

그리고 end값을 조정해주면...

오 아까와 같은 모양이 나오지만 0.25라는 직관적인 값을 넣어서

25%를 표현했네요.

 

이걸로 완성하면 좋겠지만 조금 더 꾸며봅시다.

지금은 그냥 결과물인 프로그래바가 나오지만

빨간색부분은  딜레이를 줘서 조금 나중에 뜨게하면 애니메이션 효과가 나타나지않을까요?

처음에는 0.0으로 아무것도 그리지 않았다가

일정딜레이(0.3) 이후엔 strikeEnd에 값을 줍니다.

 

완성입니다.

저 0.25부분을 원하는 값을 넣으면 원하는 만큼 칠해집니다.

 

 

 

조만간 시간내서 코어데이터랑 이거랑 같이 소스코드 올려드리겠습니다.

이만~!