Kotlin Weekly # -378 "Compose Canvas API로 계기판 만들기"

10월 5주차에는 안드로이드 기사에도 있었던 Compose Canvas API을 이용해 계기판 만들기라는 글입니다.

 

https://saurabharora.dev/posts/building-a-speedometer-with-compose-canvas-api/

Building a Speedometer with Compose Canvas API

 

 

소개

Saurabh Arora가 작성한 이 글은 Jetpack Compose의 Canvas API를 사용하여 속도계를 만드는 과정을 설명합니다. Canvas API에 대한 기본적인 지식을 가진 사람들을 대상으로 하며, 속도계의 시각적 표현을 세밀하게 제어하는 방법과 코드를 제공하고 있습니다.

 

내용

 

1. Canvas와 Arc 그리기

• Jetpack Compose의 Canvas API를 사용하여 속도계의 시각적 요소를 생성합니다.
• drawArc 함수를 이용해 속도 범위를 나타내는 반원형 아크를 그립니다. 이때 시작 각도는 30도, 스윕 각도는 -240도로 설정합니다.

Canvas(modifier = modifier, onDraw = {
    drawArc(
        color = Color.Red,
        startAngle = 30f,
        sweepAngle = -240f,
        useCenter = false,
        style = Stroke(width = 2.dp.toPx())
    )
})

2. 속도 표시 마커 그리기

• 속도 마커는 크게 세 종류로 나뉩니다: 주요 마커(20의 배수), 중간 마커(10의 배수), 작은 마커(2의 배수).
• 이 마커들을 그리기 위해 drawLine 메소드와 삼각함수를 사용하여 마커의 시작점과 끝점을 계산합니다.

for (angle in 300 downTo 60 step 2) {
    // ...
    val startOffset = pointOnCircle(...) // startPoint 계산
    val endOffset = pointOnCircle(...) // endPoint 계산

    drawLine(brush = brush, start = startPoint, end = endPoint, strokeWidth = strokeWidth)
}

 

 

3. 속도 텍스트 그리기

• 각 주요 마커에 해당하는 속도 값을 표시합니다.
• 텍스트의 정확한 위치를 계산하기 위해 pointOnCircle 메소드를 다시 사용하며, drawText 메소드로 캔버스에 텍스트를 그립니다.

val textOffset = pointOnCircle(...)
drawContext.canvas.save()
drawContext.canvas.translate(textOffset.x, textOffset.y)
drawText(textLayoutResult)
drawContext.canvas.restore()

 

4. 속도 지시기 그리기

• 속도 지시기는 현재 속도를 나타내는 간단한 선입니다.
• pointOnCircle 메소드를 사용하여 지시기의 시작점과 끝점을 계산하고, drawLine 메소드로 그립니다.

private fun DrawScope.speedIndicator(speedAngle: Float) {
    val endOffset = pointOnCircle(...)
    drawLine(...)
}

 

5. 코드와 애니메이션

• 전체 코드는 https://gist.github.com/saurabharora90/636ca81907e20997199795ca16368276
• 사용자 입력을 받아 속도 지시기를 애니메이션화 할 수 있습니다.
• (추가) 개인적으로 계기판과 기어를 구현해보았습니다. https://github.com/veblen1/Native/tree/main/practice3_Speedometer

 

정리

이 글은 Compose의 Canvas API를 사용하여 속도계와 같은 복잡한 UI 컴포넌트를 구현하는 방법을 보여줍니다. 속도계의 시각적 요소들을 정교하게 그리는 과정에서 수학적 계산과 프로그래밍적 접근이 결합되어 있습니다.

그리고 개인적으로 계기판과 기어를 구현해 보았는데, 문득 생각난것이 일본에서 병상에서 일어날 수 없는 사람들이 누워서 화면을 보고 로봇 종업원을 하고 있는것이 생각났습니다. 자율주행과 이런 모바일의 연동이 미래에는 어떻게 사용될지 생각 해보는 기회가 된 것 같습니다.

 

 

 

 

http://kotlinweekly.net/

** Kotlin Weekly **