web-dev-qa-db-ja.com

Android角が丸い円形のプログレスバー

以下に示すように、角が丸い円形のプログレスバーを取得しようとしています。 enter image description here

しかし、丸みを帯びたコーナーを取得することはできません。これまでのところ、円形のプログレスバーを取得することはできます。 enter image description here

私は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>

スケールパラメータを使用してみましたが、進行状況のコーナーは変わりませんでした。角を丸くする方法がわかりません。どうぞよろしくお願いいたします。

androidandroid-drawablexml-drawable
19
Rakesh

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

私はこれが古い質問であることを知っています。しかし、これは他の誰かに役立つかもしれない解決策です。

これは library を使用して実現できます。

これを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.

ライブラリはオープンソースであり、General Public License, version 2で使用できます

3
Rahulrr2602