web-dev-qa-db-fra.com

Barre de progression circulaire Android aux angles arrondis

J'essaie d'obtenir une barre de progression circulaire avec un coin arrondi, comme indiqué ci-dessous.  enter image description here

Mais je ne parviens pas à obtenir le coin arrondi, mais la barre de progression circulaire.  enter image description here

J'essaye de le dessiner en utilisant le dessinable 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"/>

Progressbar_onboarding_view.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>

progressbar_rounded_corner.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>

J'ai essayé d'utiliser le paramètre scale mais le coin de progression n'a pas changé. Je ne suis pas sûr de savoir comment atteindre le coin arrondi. S'il vous plaît aidez je l'apprécierais vraiment.

androidandroid-drawablexml-drawable
19
Rakesh

Je sais que c'est une vieille question. Mais voici une solution qui pourrait être utile à quelqu'un d'autre.

Cette bibliothèque peut être utilisée pour y parvenir.

Ajoutez simplement ceci à votre fichier Gradel 

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

Et ajoutez ensuite ceci à votre mise en page 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" />

Et voici comment vous pouvez définir la progression de la barre

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.

La bibliothèque est Opensource et est utilisable sous le General Public License, version 2

2
Rahulrr2602

Une classe simple et efficace qui étend View pour dessiner un progrès circulaire, avec des angles arrondis en option. La couleur de progression, la couleur de fond, la largeur du trait sont également personnalisables.

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()
  }
}
1
EyesClear