날씨차트를 나타낼때 유용한 RangeBar차트(feat.없어서 직접 만들었다..)

Ted Park
박상권의 삽질블로그
5 min readAug 17, 2022

--

TL;DR

  • 범위를 나타내는 차트가 필요하세요?
  • RangeBarChart라이브러리를 쓰세요.
    여러분이 원하는 차트를 그릴 수 있어요.
  • MPAndroidChart에 없어서 직접 만들었습니다.

안드로이드에서 차트를 보여줘야 한다면,
여러분의 머리속에 제일 먼저 떠오르는것은 무엇인가요?

아마 대부분의 안드로이드 개발자들은 MPAndroidChart 라이브러리를 떠올리고 사용하고 계실겁니다.

MPAndroidChart에서는 LineChart /BarChart / PieChart / CandleStickChart 등 정말 다양한 차트를 보여줄 수 있도록 제공하고 있습니다.

저또한 차트를 보여줄 일이 있다면 항상 이 라이브러리를 사용해 왔습니다.

그러나…
정말 완벽해보이는 이 MPAndroidChart에도 없는것이 한가지가 있었으니…

바로 범위를 나타내는 차트를 보여주고 싶을때 사용할 수 있는 Chart가 없다는 것이었습니다.

예를들면 아래와 같은 UI요건으로 차트를 보여줘야 하는 경우들 입니다.

주로 날씨와 같이
특정 기간동안의 최대와 최소의 값을 기반으로한 범위를 나타내는 차트를 보여주고 싶을때, RangeBar개념의 차트를 만들고 싶어집니다.

MPAndroidChart에 정말 없을까?

네, 정말로 없습니다.
비슷한 차트는 있습니다.

바로 주식/코인 차트를 나타낼때 많이 보았던 CandleStick 차트입니다.

CandleStick은 시작값, 종료값, 최소값, 최대값 4개의 개념이 있습니다.
그래서 억지로 범위값을 만들기 위해

  • 시작값 = 최소값
  • 종료값 = 최대값

으로 임의로 데이터를 조작해서 Bar형태의 긴 RangeBar를 만들어서 표현해야만 했습니다.

하지만 이것은 CandleStick의 목적이 아니기도 하고
해당 값을 표현하는 Label을 그리고자 해도 CandleStick 차트의 경우는 주식차트로 사용하는 만큼 종료값(마지막값)만을 Label로 표시하도록 구현되어 있습니다.

우리가 원하는 RangeBar 차트는 최소/최대의 Label이 모두 표현되길 원하는겁니다.

그래서 준비했습니다.

답답해서 제가 만들었습니다.

날씨처럼 시간 분포에 따른 최소/최대값을 보여주고 싶은 RangeBar 차트를 그리고 싶을때 사용할 수 있는 RangeBarChart입니다.

  • RangeBarChart는 MPAndroidChart를 상속받아 구현된 라이브러리 입니다.
  • BarChart를 상속받아서 사용하기 때문에 BarChart에서 사용하는 모든 기능을 그대로 동일하게 사용할 수 있습니다.
  • 기존에도 MPAndroidChart를 사용하고 계셨다면 동일한 패턴으로 RangeBarchart를 사용하실 수 있습니다.

자세한 라이브러리에 대한 설명과 예시, 사용방법은 해당 페이지에서 확인해주시면 됩니다.

라이브러리를 사용하다보면 내가 원하는 기능이 없는 경우가 있습니다.

  • 그럴때는 해당 라이브러리에 새로운 기능을 만들어서 PR을 올려보시거나
  • 직접 필요한 기능을 구현한 라이브러리를 만들어서 공유해보세요

나한테 필요한 기능은 또다른 누군가에게도 필요한 기능입니다.

UI를 구현하느라 고민하는 안드로이드 개발자분들이여,
항상 행복한 개발 하세요

감사합니다. 피쓰!

안드로이드 개발자들이 모여있는 오픈채팅방에 참여해보세요 .
Q&A 및 팁을 공유하는 방입니다.

--

--