[안드로이드] 커스텀 원형 프로그레스 바(도넛 그래프) 만드는 방법

커스텀 뷰를 이용해 도넛 그래프 형태의 원형 프로그레스바를 만들어 본다.

 

안드로이드 원형 프로그레스 바

 

커스텀 뷰 기초는 아래 글을 참고하자.

[안드로이드 코틀린] View 출력 원리와 커스텀뷰 생성/사용 방법 기초

 

[안드로이드 코틀린] 커스텀 View 전용 속성 정의 및 사용 방법: attr.xml

 

[안드로이드 코틀린] 커스텀 View 화면 갱신 방법(새로 그리기): invalidate()

---

# 원형 프로그레스바 생성 방법

1. 바탕이 되는 360도의 호를 그려준다.

2. 진행률을 표시할 호를 다른색으로 그려준다.

class CustomCircleBarView: View {

    // 생성자
    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)


    // 원형 프로그레스바 그리기
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        // Paint 객체 생성
        val paint = Paint()


        // 1. 회색 원(배경)그리기
        paint.color = Color.GRAY
        paint.style = Paint.Style.STROKE
        paint.strokeWidth = 40f        
        // 0도에서 시작하는 360도의 호를 그린다.
        canvas?.drawArc(200f, 200f, 700f, 700f, 0f, 360f, false, paint)


        // 2. 파란 원(프로그레스) 그리기
        paint.color = Color.BLUE        
        // -90도에서 시작하는 180도의 호를 그린다.
        canvas?.drawArc(200f, 200f, 700f, 700f, -90f, 180f, false, paint)

    }

}

 

여기서 사용한 drawArc() 메서드의 스펙은 아래와 같다.

 

open fun drawArc(
    left: Float, 
    top: Float, 
    right: Float, 
    bottom: Float, 
    startAngle: Float, 
    sweepAngle: Float, 
    useCenter: Boolean, 
    paint: Paint
): Unit

 

startAngle로 호의 시작점을 설정하고,

sweppAngle로 호를 얼마나 그릴지 설정할 수 있다.

 

주의할 점은

시작점이 3시 방향이라는 것이다.

그래서 startAngle 값을 0f로 설정하면, 3시 위치부터 호가 그려진다.

위쪽(12시)부터 호를 그리려면  startAngle 값을 -90f로 주면된다.

 

즉, 12시~6시까지 반을 차지하는 180도의 호를 그리려면,

startAngle: -90f, sweepAngle: 180f 로 설정하면 된다.

 

drawArc() 메서드에 대해서는 아래 레퍼런스를 더 참고하자

https://developer.android.com/reference/kotlin/android/graphics/Canvas#drawarc_1

---

* 참고

Paint 객체의 속성을 잘 활용하면,

아래처럼 원형 프로그레스 바의 디자인을 좀 자연스럽게 다듬을 수도 있다.

 

자세한 방법은 아래 글을 참고

 

[안드로이드] 원형 프로그레스바 테두리 끝 둥글게 Roound 처리 방법