Canvas를 사용한, 원형 프로그래스 바 제작기(1)

“모티부”라는 서비스의 앱 프로젝트를 진행하면서, 커스텀 뷰를 만들어야 했던 과정에 대해서 설명하고 진행하려고 합니다. 자녀와 부모의 걸음을 원형 프로그래스 바로 나타내야했던 모든 과정을 낱낱이 파헤쳐 보도록 하겠습니다.

아래는 "모티부" 깃허브입니다!
https://github.com/Team-Motivoo/Motivoo-Android

필자는 해당 주제를 발단, 전개, 결론 순서대로 총 6개의 글을 작성하려고 합니다.

• 첫 번째는 문제의 발단의 주제로 해당 문제가 발생하고 이 부분을 해석하기 위해 고민한 흔적을 담습니다.
• 두 번째부터 다섯 번째는 전개로 이어지면서 원형 프로그래스 바를 구현하면서 겪은 문제점과 그에 따른 해결책, 사용된 다양한 기능들을 설명합니다.
• 다섯 번째 블로그에서 마지막 전개를 다루면서 결론을 블로그 마지막에서 설명하려고 합니다. 결론에는 필자의 해당 문제를 해결하면서 겪은 점과 느낀 점에 대해서 서술하려고 합니다.

많관부!

문제의 발단

• 진행한 앱 프로젝트는 2주라는 시간 내 결과물 만들어야 했다.

  1) 커스텀 뷰?

  2) canvas?

  3) 반대로 올라오는 원형 프로그래스 바? (반 시계방향)

  4) 자녀와 부모 아이콘 이미지는 어떻게 넣지?

  5) 원형 프로그래스 바와 같이 자녀와 부모 아이콘 이미지를 어떻게 움직이게하지?

와 같은 5가지의 문제가 생겨났습니다. 이 문제를 어떻게 해결했으며, 전개 부분에서 풀어보도록 하겠습니다.

이해를 돕고자 완성된 뷰를 아래에서 볼 수 있습니다.