본문 바로가기

Android/차트그리기

(5)
5. Android Radar Chart에 Animation 적용하기 이전에 작성한 chart들이 너무 간단해서, 조금 역동적이게 보일 수 있도록 간단한 애니메이션을 추가해보고자 합니다. 전에 작성했던 Radar Chart를 활용할건데요, 이 글을 꼭 보고 와주세요~ 2022.06.28 - [Android/차트그리기] - 4. Android Radar Chart 직접 그리기 4. Android Radar Chart 직접 그리기 오늘은 Radar Chart(방사형 차트)를 그려볼까 합니다. 게임에서 캐릭터들의 능력치를 표시할때 흔히 보던 차트입니다. 먼저 다음과 같이 RadarChartView라는 Custom View를 생성하고, onDraw함수를 override해 jyys.tistory.com 이 Radar Chart는 5개의 특성을 가지고 있는데요, 다음 영상처럼 각 ..
4. Android Radar Chart 직접 그리기 오늘은 Radar Chart(방사형 차트)를 그려볼까 합니다. 게임에서 캐릭터들의 능력치를 표시할때 흔히 보던 차트입니다. 먼저 다음과 같이 RadarChartView라는 Custom View를 생성하고, onDraw함수를 override해 줍니다. 이 onDraw() 함수내에서 원하는 그림을 그리면 화면에 나타나게 됩니다. class RadarChartView(context: Context?, attrs: AttributeSet?) : View(context, attrs) { override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) } } 우선, 아래와 같이 drawLine() 함수를 이용하여 오각형을 그려보겠습니다. override fun onDra..
3. Android Pie Chart 직접 그리기 오늘은 Pie Chart를 직접 그려보려 합니다. 먼저 다음과 같이 PieChartView라는 Custom View를 생성하고, onDraw함수를 override해 줍니다. 이 onDraw() 함수내에서 원하는 그림을 그리면 화면에 나타나게 됩니다. class PieChartView(context: Context?, attrs: AttributeSet?) : View(context, attrs) { override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) } } onDraw()에 전달되는 canvas의 drawArc() API를 이용하여 부채꼴 모양을 그릴수가 있습니다. private val paint = Paint().apply { isAntiAlia..
2. Android Bar Chart 직접 그리기 이번엔 다음과 같이 Bar Chart를 그려볼 예정입니다. 역시 간단한 Bar Chart입니다. 먼저 다음과 같이 BarChartView라는 Custom View를 생성하고, onDraw함수를 override해 줍니다. 이 onDraw() 함수내에서 원하는 그림을 그리면 화면에 나타나게 됩니다. class BarChartView(context: Context?, attrs: AttributeSet?) : View(context, attrs) { override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) } } draw함수내에 다음과 같이 x, y 축을 그리는 코드를 작성해보았습니다. override fun onDraw(canvas: Canvas?) { s..
1. Android Line Chart 직접 그리기 프로젝트를 진행하다보면 간단한 차트를 표시해야 할 때가 있는데요, 이를 위해 차트라이브러리를 사용하자니 라이브러리 사용법도 공부해야 하고 라이센스도 확인해야 하는 등 배보다 배꼽이 더 커지는 경우가 있습니다. 그래서 간단한 차트는 직접 그려보는것이 더 좋겠단 생각이 들어 하나씩 그려보려고 합니다. 첫번째로, 다음과 같이 흔히 볼수 있는 Line Chart를 그려보고자 합니다. 먼저 다음과 같이 LineChartView라는 Custom View를 생성하고, onDraw함수를 override해 줍니다. 이 onDraw() 함수내에서 원하는 그림을 그리면 화면에 나타나게 됩니다. class LineChartView(context: Context?, attrs: AttributeSet?) : View(con..