带圆角的Android圆形进度条

Question

我试图制作一个类似下面展示的带圆角的圆形进度条： 但是目前我无法得到带有圆角的进度条，虽然我已经能够得到圆形进度条： 我尝试使用XML绘制来实现它。

 <ProgressBar
                android:id="@+id/onboarding_activity_progress_bar"
                android:layout_gravity="center"
                android:padding="10dp"
                android:layout_width="120dp"
                android:layout_height="120dp"
                style="?android:attr/progressBarStyleHorizontal"
                android:progressDrawable="@drawable/progressbar_onboarding_view"
                tools:progress="60"/>

进度条_引导页_视图.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:useLevel="false"
               android:innerRadiusRatio="2.0"
               android:shape="ring"
               android:thickness="10dp">
            <solid android:color="@color/progress_bar_background_color" />
            <corners android:radius="50dp"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <shape
              xmlns:android="http://schemas.android.com/apk/res/android"
              android:useLevel="true"
              android:innerRadiusRatio="2.0"
              android:shape="ring"
              android:thickness="10dp">
            <solid android:color="@color/progress_bar_color" />
        </shape>
        <!--
        <scale
              android:drawable="@drawable/progressbar_round_corner"
              android:scaleWidth="98%" /> -->
    </item>
</layer-list>

圆角进度条的XML文件

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

   <corners
         android:radius="10dp"/>

   <solid android:color="@android:color/white" />

   <stroke
         android:width="1dp"
         android:color="@android:color/holo_red_dark" />

</shape>

我尝试使用比例参数，但进度条的角没有改变。我不确定如何实现圆角。请帮忙，非常感谢。

- Rakesh

---

在 @android:id/progress 中添加角落 - Pavya

@Pravin 我已经尝试过了，但它没有起作用。似乎角落只适用于矩形形状。 - Rakesh

尝试使用这个库：进度小部件 - Vipul Asri

@VipulAsri 谢谢你的建议，但我不想使用第三方库。因为我想保持在 dex 限制范围内，而我的应用程序已经非常接近 dex 限制了。 - Rakesh

查看这个答案：https://dev59.com/u10Z5IYBdhLWcg3wphoE - satorikomeiji

Answer 1

一个简单而高效的类，继承 View，用于绘制圆形进度条，同时可选圆角。进度条的颜色、背景颜色以及边框宽度也可以自定义。

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.RectF
import android.util.AttributeSet
import android.view.View
import androidx.annotation.FloatRange

class CircularProgressView : View {
  constructor(context: Context) : super(context)
  constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
  constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

  private val progressPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
    style = Paint.Style.STROKE
  }
  private val backgroundPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
    style = Paint.Style.STROKE
  }

  private val rect = RectF()
  private val startAngle = -90f
  private val maxAngle = 360f
  private val maxProgress = 100

  private var diameter = 0f
  private var angle = 0f

  override fun onDraw(canvas: Canvas) {
    drawCircle(maxAngle, canvas, backgroundPaint)
    drawCircle(angle, canvas, progressPaint)
  }

  override fun onSizeChanged(width: Int, height: Int, oldWidth: Int, oldHeight: Int) {
    diameter = Math.min(width, height).toFloat()
    updateRect()
  }

  private fun updateRect() {
    val strokeWidth = backgroundPaint.strokeWidth
    rect.set(strokeWidth, strokeWidth, diameter - strokeWidth, diameter - strokeWidth)
  }

  private fun drawCircle(angle: Float, canvas: Canvas, paint: Paint) {
    canvas.drawArc(rect, startAngle, angle, false, paint)
  }

  private fun calculateAngle(progress: Float) = maxAngle / maxProgress * progress

  fun setProgress(@FloatRange(from = 0.0, to = 100.0) progress: Float) {
    angle = calculateAngle(progress)
    invalidate()
  }

  fun setProgressColor(color: Int) {
    progressPaint.color = color
    invalidate()
  }

  fun setProgressBackgroundColor(color: Int) {
    backgroundPaint.color = color
    invalidate()
  }

  fun setProgressWidth(width: Float) {
    progressPaint.strokeWidth = width
    backgroundPaint.strokeWidth = width
    updateRect()
    invalidate()
  }

  fun setRounded(rounded: Boolean) {
    progressPaint.strokeCap = if (rounded) Paint.Cap.ROUND else Paint.Cap.BUTT
    invalidate()
  }
}

- EyesClear

---

感谢您提供的出色解决方案！有一个澄清问题：在updateRect方法中，为了让圆形边缘相接，设置矩形坐标之前将获得的strokeWidth除以2是否更好？当前设置会在矩形周围留下小间距。 - Marat

这是用什么语言编写的？ - David Rector

以上程序是用 Kotlin 编写的。 - Prateek

Answer 2

使用 Material CircularProgressIndicator ，并使用 app:trackCornerRadius="5dp" 来获得带有曲线的进度指示器。

  <com.google.android.material.progressindicator.CircularProgressIndicator
            app:indicatorSize="95dp"
            android:progress="60"
            app:trackCornerRadius="5dp"
            app:trackThickness="6dp"
            app:trackColor="@color/track_color"
            app:indicatorColor="@color/yellow_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

- Reejesh

Answer 3

我知道这是一个老问题了，但是这里有一个解决方案，可能会对其他人有帮助。

可以使用这个库来实现这一点。

只需将其添加到您的Gradel文件中即可。

compile 'pl.pawelkleczkowski.customgauge:CustomGauge:1.0.3'

然后将此添加到您的XML布局中。

   <pl.pawelkleczkowski.customgauge.CustomGauge
        android:id="@+id/gauge2"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_centerHorizontal="true"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        app:gaugeEndValue="100"
        app:gaugePointEndColor="@color/md_blue_800"
        app:gaugePointStartColor="@color/md_blue_300"
        app:gaugeStartAngle="180"
        app:gaugeStartValue="0"
        app:gaugeStrokeCap="ROUND"
        app:gaugeStrokeColor="@color/md_grey_400"
        app:gaugeStrokeWidth="10dp"
        app:gaugeSweepAngle="360" />

这是如何设置进度条的方式。

private CustomGauge gauge;// Declare this variable in your activity

gauge = findViewById(R.id.gauge2);//And this on you OnCreate method

gauge.setValue(progress);// Set the progress like this.

该库是开源的，可在 GNU通用公共许可证第二版 下使用。

- Rahulrr2602

Answer 4

图书馆

compile 'pl.pawelkleczkowski.customgauge:CustomGauge:1.0.4'

XML 代码

<pl.pawelkleczkowski.customgauge.CustomGauge
            android:id="@+id/progressbar"
            android:layout_width="@dimen/dimens_550px"
            android:layout_height="@dimen/dimens_550px"

            app:layout_constraintStart_toStartOf="@id/lottie_empty"
            app:layout_constraintEnd_toEndOf="@id/lottie_empty"
            app:layout_constraintTop_toTopOf="@id/lottie_empty"
            app:layout_constraintBottom_toBottomOf="@id/lottie_empty"
            android:paddingBottom="10dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp"


            app:gaugePointEndColor="#3DEBFF"
            app:gaugePointStartColor="#246887"
            app:gaugeStartAngle="270"
            app:gaugeStrokeCap="ROUND"
            app:gaugeStrokeColor="#80777777"
            app:gaugeStrokeWidth="10dp"
            app:gaugeSweepAngle="360"
            
            />

编写Java代码

private CustomGauge gauge;// Declare this variable in your activity
gauge = findViewById(R.id.gauge2);//And this on you OnCreate method
gauge.setEndValue(max_progress);// Set the max progress like this.
gauge.setValue(progress);// Set the progress like this.

来自我的apk的图片

- Abdelmalek Bourhim