안드로이드 앱 만들기 : 동시에 시작하는 타원형 progress bar 구현해 보기

오늘은 챗봇에게 질문을 했습니다. 타원형  progress bar를그려 보자고...

 

동그란 progress bar 구현

같은 지점에서 출발해서 2개의 입력이 동시에 그려지는 progress bar 그리기입니다.   이 하나의 그림을 얻기 위해서 질문을 여러 번 해야 했습니다. 

 

1. Kotlin으로 타원형 진행률 표시줄을 그리는 코드 만들기

2. 하나의 그래프에 두 개의 서로 다른 입력을 받는 진행률을 그릴 수 있습니까?

3. 이 코드는 오류가 없습니까?

4. 타워의 경계를 따라 진행 상황을 보여주는 kotlin 코드

5. 두 개의 입력을 받고 진행률을 동시에 표시하도록 kotlin 코드 수정

6. canvas.drawPath를 사용하여 다시 만듭니다.

7. 놀이터 트랙처럼 보이는 타원에 트랙을 따라 동일한 지점에서 시작하여 두 개의 진행률을 표시하는 kotlin 코드를 작성합니다.

8. 하단이 아닌 테두리에만 표시해야 합니다.

9. 진행률이 테두리를 따라 곡선으로 표시되도록 만들어주세요

10. 바닥면은 도색 안해도 되나요?

11. 바닥은 아직 칠하고 있지만 칠하고 싶지 않습니다.

12. 둥근 타원 그래프

13. 약간 더 넓은 원형 타원 그래프

 

이렇게 13번의 수정 질문을 던져서 받은 코드입니다.

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.graphics.RectF
import android.util.AttributeSet
import android.view.View

class DualOvalProgressBar(context: Context, attrs: AttributeSet) : View(context, attrs) {

    private val progressPaint1: Paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val progressPaint2: Paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val progressPath1: Path = Path()
    private val progressPath2: Path = Path()

    private var progress1: Float = 0f
    private var progress2: Float = 0f
    private var maxProgress: Float = 100f

    init {
        progressPaint1.color = Color.BLUE
        progressPaint2.color = Color.RED
        progressPaint1.style = Paint.Style.STROKE
        progressPaint2.style = Paint.Style.STROKE
        progressPaint1.strokeWidth = 40f
        progressPaint2.strokeWidth = 40f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        val centerX = width / 2f
        val centerY = height / 2f
        val horizontalRadius = Math.min(width, height) / 2f - progressPaint1.strokeWidth / 2f
        val verticalRadius = horizontalRadius / 2f

        // Calculate the sweep angles for the progress arcs
        val progressSweepAngle1 = 360f * progress1 / maxProgress
        val progressSweepAngle2 = 360f * progress2 / maxProgress

        // Calculate the start and end angles for the progress arcs
        val startAngle1 = -90f
        val endAngle1 = startAngle1 + progressSweepAngle1
        val startAngle2 = endAngle1
        val endAngle2 = startAngle2 + progressSweepAngle2

        // Create the progress paths
        progressPath1.reset()
        progressPath1.addArc(
            centerX - horizontalRadius,
            centerY - verticalRadius,
            centerX + horizontalRadius,
            centerY + verticalRadius,
            startAngle1,
            progressSweepAngle1
        )
        progressPath2.reset()
        progressPath2.addArc(
            centerX - horizontalRadius,
            centerY - verticalRadius,
            centerX + horizontalRadius,
            centerY + verticalRadius,
            startAngle2,
            progressSweepAngle2
        )

        // Draw the progress paths
        canvas.drawPath(progressPath1, progressPaint1)
        canvas.drawPath(progressPath2, progressPaint2)
    }

    fun setProgress1(progress: Float) {
        this.progress1 = progress
        invalidate()
    }

    fun setProgress2(progress: Float) {
        this.progress2 = progress
        invalidate()
    }

    fun setMaxProgress(maxProgress: Float) {
        this.maxProgress = maxProgress
        invalidate()
    }
}

 

이렇게 class을 하나 만들어 내고 난 다음.  layout xml에 다음을 추가했습니다. 

 

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        tools:context=".MainActivity"
        tools:ignore="HardcodedText,SpUsage,ContentDescription">


        <!--        app:layout_constraintStart_toEndOf="@+id/guideLine"-->
        <com.example.twowayprogressgraph.DualOvalProgressBar
            android:id="@+id/progressBar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout_editor_absoluteX="20dp"
            tools:layout_editor_absoluteY="20dp" />



    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

이렇게 layout 을 만들고 mainActivity에서는 다음과 같이 호출하여 사용합니다. 

 

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val progressBar: DualOvalProgressBar = findViewById(R.id.progressBar)
        progressBar.setMaxProgress(100f)
        progressBar.setProgress1(30f)
        progressBar.setProgress2(70f)

    }
}

 

이제 API을 통해서 결과를 받아오고 그것을 표시하는 progress bar을 구현해야 한다면... 이렇게 구현해 볼 수 있을 것 같습니다. 

 

https://github.com/nari4169/TwoWayProgressGraph

GitHub - nari4169/TwoWayProgressGraph

코드는 이렇게 공유를 해 보겠습니다.