안드로이드 코틀린 원형 그래프, 파이 그래프
Android Kotlin Circle Graph, Pie Graph
라이브러리 : MPAndroidChart
github.com/PhilJay/MPAndroidChart
안드로이드에서 그래프 혹은 차트를 구현해야 하는데, 이를 구현하는 라이브러리는 정말 많다.
그래도 그중에서 제일 괜찮고 유명한 라이브러리를 사용해 보았다. 제일 맘에 드는 것은 역시 기본적으로 구현이 되어 있는 애니메이션 효과지 않을까 싶다.
라이브러리 깃허브 주소를 통해 해당 라이브러리 적용법과 버전확인을 확인할 수 있다.
해당 라이브러리에는 많은 그래프를 제공해주고 있는데 그중 원형그래프, 여기선 파이그래프 라고 부르는데, 해당 그래프를 적용해 보았다.
<com.github.mikephil.charting.charts.PieChart
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="match_parent" />XML상에서는 할 것이 사용할 차트를 추가하는 것 밖에 없다.
chart.setUsePercentValues(true)
// data Set
val entries = ArrayList<PieEntry>()
entries.add(PieEntry(508f, "Apple"))
entries.add(PieEntry(600f, "Orange"))
entries.add(PieEntry(750f, "Mango"))
entries.add(PieEntry(508f, "RedOrange"))
entries.add(PieEntry(670f, "Other"))기본적인 셋팅은 setUsePercentValues를 true값으로 셋팅을 한 후
그래프에 들어갈 데이터를 셋팅을 해주는데 위에서 true값으로 셋팅을 해주어서 100%으로 계산하여 범위를 차지한다.
그런데 직접 값을 더해보니 101이 나오는걸 보니..반올림 해주는 듯 하다. 확인을 더 해봐야 할 듯 하지만 눈으로 보는 상 알맞는듯 싶다
// add a lot of colors
val colorsItems = ArrayList<Int>()
for (c in ColorTemplate.VORDIPLOM_COLORS) colorsItems.add(c)
for (c in ColorTemplate.JOYFUL_COLORS) colorsItems.add(c)
for (c in COLORFUL_COLORS) colorsItems.add(c)
for (c in ColorTemplate.LIBERTY_COLORS) colorsItems.add(c)
for (c in ColorTemplate.PASTEL_COLORS) colorsItems.add(c)
colorsItems.add(ColorTemplate.getHoloBlue())해당 그래프의 아이템별 범위의 색을 set해주는데 일단 List값에 담아서 셋팅을 해줘야한다. 이는 라이브러리에 있는 그대로 가져와서 아직 제대로 파악이 안되었는데, 핵심은 List에 담아서 셋팅을 해주어야 한다는 것만 기억하고 사용하면 될 듯 싶다.
val pieDataSet = PieDataSet(entries, "")
pieDataSet.apply {
colors = colorsItems
valueTextColor = Color.BLACK
valueTextSize = 16f
}PieDataSet 변수를 만들어 위에서 셋팅한 색상과 그래프에 들어갈 퍼센테이지 수치 색상과 사이즈를 지정할 수 있다.
생성할 때, entries는 위에서 데이터셋한 리스트의 이름이고 오른쪽은 value값인데 빈값으로 셋팅해도 된다. 해당 그래프 오른쪽 아래 어떤 표시해주는 내용을 여기서 셋팅해주는 듯 싶다.
val pieData = PieData(pieDataSet)
chart.apply {
data = pieData
description.isEnabled = false
isRotationEnabled = false
centerText = "This is Center"
setEntryLabelColor(Color.BLACK)
animateY(1400, Easing.EaseInOutQuad)
animate()
}마지막으로 PieData변수에 위에서 만든 PieDataSet을 넘겨주고, xml에서 만든 chart에 데이터를 셋팅해주는 부분이다.
description은 해당 그래프 오른쪽 아래 그래프의 이름을 표시해주는데 일단은 보기 싫어서 false로 하였다.
isRotationEnabled는 그래프의 회전 애니메이션인데 드래그를 통해 그래프를 회전판처럼 돌릴 수 있다. 이 기능도 쓰지 않아서 false로 지정하였다.
centerText는 그래프 한 가운데에 들어갈 텍스트를 셋해주는 부분이며, 그 아래 LabelColor은 그래프 아이템의 이름의 색을 지정해주는 부분이다. 디폴트는 흰색으로 되어잇다.
animateY는 최초 그래프가 실행시 동작하는 애니메이션인데, 12시를 시작으로 한바퀴 돌면서 해당 그래프가 나온다.
이런 애니메이션 효과를 잘 만들어 주어서 해당 라이브러리가 좋다.
아직 해당 라이브러리를 모두 알지 못하게 기본적인 기능만 알아보았는데, 커스텀이 어느정도는 쉽게 할 수 있지 않을까 싶다.
커스텀 없이 있는 그래도 데이터만 셋해서 사용해도 문제는 없지 않을까 싶다
이러한 그래프는 직접 그릴려고 지옥을 맛보지 않고 라이브러리를 통해 간단하게 구현하는 것이 너무너무 좋다고 생각이 든다. 공부한다고 하면 직접 구현하는 것도 나쁘지 않겠지만, 시간이 주어져 있는 거라면 라이브러리를 쓰는것을 추천한다.
마지막으로 아래 이미지는 위 코드를 빌드했을 때 나오는 화면이다. 물론 애니메이션 효과는 확인할 수 없다..
