[CustomView] 단계를 표현하는 StepIndicator 제작

프로젝트를 진행하던 중 UI 개선이 필요했다

다음은 Before의  Step Indicator(?)이다.

Before

위와 같이 기존에는 단순하게 동그라미 모양으로 되어 있으며 각 단계마다 동그라미에 색을 채워주고 있었기에 사용도 불편했으며 소스를 다른 사람이 관리하게 되면 실수할 가능성도 컸기에 다른 방법을 모색했다.

 

그 방법으로 저걸 하나의 View로 작성하면 어떨까하는 생각으로 만들게 되었다.

내가 만든 CustomView 중에 가장 처음 만든거라 어색한 것도 많지만 프로젝트에 바로 사용해야 했기에 아직은 버전업을 못하고 있다.(핑계...)

 

내가 만든 버전은 단순하다.

After

이렇게 생긴 조각을 여러개 붙여서 그림을 그리고 제일 처음과 뒤는 각각 View의 색을 배경과 맞춰주었고, 

사용할 때는 메소드는 최대한 적게 사용하도록 만들고 상황에 따라서도 사용 가능하도록 만들었다.

 

void selectDot(int position)

- 해당 Position에 위치한 점이 켜지도록 설정

void selectDot(int position, String text)

- 해당 Position에 위차한 점이 켜지도록 설정하며, 글자 변경 가능

DynamicIndicator setMode(final int mode) (MODE_DOT / MODE_LINE)

- indicator의 모습이 select된 점만 색이 바뀔지, 지나간 흔적까지 모두 남길지를 선택

등

Sample App

 

사용법과 코드는 Github에 공유해두었으며, Gradle로 사용할 수 있도록 배포도 하였다.

Github

aqoong/DynamicIndicator