DividerSeekBar

구분선이 들어간 SeekBar를 만들어보았습니다.

Photo by Ashkan Forouzani on Unsplash

배경

최근 SeekBar를 사용해야할 일이 생겨서 사용하고 있었는데 제가 원하는 기능은 막대기 자처럼 구분선이 들어가있고 내가 원하는 위치에 텍스트를 넣을 수 있으며 뭔가 active한 상태를 구분할 수 있는 기능을 원하고 있었습니다. 혹시 관련된 유명한 라이브러리가 있나 싶어서 찾아보았지만 별로 없었고 직접 만들어서 사용해 보기로 마음먹었습니다.

결과

다른 커스텀 뷰를 만드는 것에 비해 SeekBar는 SeekBar를 상속받아서 구현하면 되므로 그렇게 어려운 작업은 아니었습니다.

Active Mode

setOnSeekBarChangeListener에 커스텀 리스너를 추가하여 active 상태를 체크하고 어떤 상태일때 active하게 할 것인지 모드를 최소, 최대, 타겟 모드 이렇게 3개로 나누어 구현하였습니다.

Text & Divider & SeaLine

텍스트의 위치도 아래, 위로 바꾸거나 Size, Interval 등도 커스텀 할 수 있도록 구현하였습니다. 물론 구분선과 수평선도 커스텀 가능하게 구현했습니다.

Conclusion

처음으로 커스텀 뷰를 만들어보고 배포까지 완료해보았는데 생각보다 노가다(?) 느낌의 작업이 많아서 쉽지 않았습니다. 하지만 만들고 나니 더 굉장한 라이브러리를 만들어보고 싶고 이런 걸 만드시는 분들이 얼마나 대단하신 건지 느껴지는 작업이었습니다. 부족한 코드지만 이슈나 PR로 피드백 주시면 정말 감사드리겠습니다🤣

gif라 구분선이 조금 깨졌네요ㅜ

읽어주셔서 감사합니다🙌

DividerSeekBar Github링크 👇

hongbeomi/DividerSeekBar