Как создать круглый индикатор прогресса с пунктирной линией на Android?

Как разделить кастомное вью Circular Progress Bar на секции в Material 3 в зависимости от выбранного процента (25, 50, 75, 100), если количество секций может быть от 0 до 4?
  • 17 августа 2024 г. 11:53
Ответы на вопрос 1
Для создания круглого индикатора прогресса с пунктирной линией на Android, можно использовать кастомное вью (Custom View) и отрисовывать круг с помощью методов Canvas и Paint. Ниже приведен пример кода для создания такого индикатора:

```kotlin
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View

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

    private val paint = Paint()

    init {
        paint.color = Color.BLUE
        paint.style = Paint.Style.STROKE
        paint.strokeWidth = 10f
        paint.strokeCap = Paint.Cap.ROUND
        paint.isAntiAlias = true
        paint.pathEffect = DashPathEffect(floatArrayOf(20f, 20f), 0f)
        paint.setPathEffect(paint.pathEffect)
    }

    override fun onDraw(canvas: Canvas) {
        val centerX = width / 2f
        val centerY = height / 2f
        val radius = width / 2f - 5

        canvas.drawCircle(centerX, centerY, radius, paint)
    }
}
```

Для разделения кастомного вью Circular Progress Bar на секции в Material 3 в зависимости от выбранного процента (25, 50, 75, 100), можно задать соответствующее количество пунктов (секций) и изменять их цвет в зависимости от прогресса. Ниже приведен пример кода для создания такого индикатора:

```kotlin
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View

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

    private val paint = Paint()
    private var sections = 4 // количество секций
    private var progress = 75 // выбранный процент

    init {
        paint.color = Color.BLUE
        paint.style = Paint.Style.STROKE
        paint.strokeWidth = 10f
        paint.strokeCap = Paint.Cap.ROUND
        paint.isAntiAlias = true
    }

    override fun onDraw(canvas: Canvas) {
        val centerX = width / 2f
        val centerY = height / 2f
        val radius = width / 2f - 5
        val angle = 360f / sections

        for (i in 0 until sections) {
            if (progress >= 100 / sections * (i + 1)) {
                paint.color = Color.BLUE // цвет секции при достижении процента
            } else {
                paint.color = Color.LIGHT_GRAY // цвет секции при недостижении процента
            }
            canvas.drawArc(5f, 5f, width - 5f, height - 5f, i * angle, angle, false, paint)
        }
    }

    fun setProgress(progress: Int) {
        this.progress = progress
        invalidate()
    }
}
```

Оба примера можно доработать и настраивать по своему усмотрению для достижения нужного визуального эффекта.
Похожие вопросы