带圆角的 Android 圆形进度条
Posted
技术标签:
【中文标题】带圆角的 Android 圆形进度条【英文标题】:Android circular progress bar with rounded corners 【发布时间】:2016-08-06 23:37:54 【问题描述】:我正在尝试获得一个带有圆角的圆形进度条,如下所示。
但到目前为止,我无法获得圆角,我能够获得圆形进度条。
我正在尝试使用 xml drawable 来绘制它。
<ProgressBar
android:id="@+id/onboarding_activity_progress_bar"
android:layout_gravity="center"
android:padding="10dp"
android:layout_
android:layout_
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:
android:color="@android:color/holo_red_dark" />
</shape>
我尝试使用 scale 参数,但进度角没有改变。我不确定如何实现圆角。请帮忙,我将不胜感激。
【问题讨论】:
在@android:id/progress 中添加角 @Pravin 我已经尝试过了,但是没有用。似乎角只适用于矩形。 试试这个库:Progress Widget @VipulAsri 感谢您的建议,但我不想使用第三方库。因为我想低于 dex 限制,而我的应用程序已经非常接近 dex 限制了。 看看这个答案***.com/questions/31219455/… 【参考方案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()
【讨论】:
感谢您的出色解决方案!一个澄清问题:在updateRect
方法中,要让圆边到边绘制,在设置矩形坐标之前将获得的strokeWidth
除以2 不是更好吗?在当前设置下,矩形周围有小填充。
这是用什么语言写的?
以上用 Kotlin 编写的程序【参考方案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_
android:layout_ />
【讨论】:
【参考方案3】:我知道这是一个老问题。但这里有一个可能对其他人有帮助的解决方案。
这个library可以用来实现这个。
只需将其添加到您的 Gradel 文件中
compile 'pl.pawelkleczkowski.customgauge:CustomGauge:1.0.3'
然后将其添加到您的 XML 布局
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="@+id/gauge2"
android:layout_
android:layout_
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
下使用
【讨论】:
【参考方案4】:图书馆
compile 'pl.pawelkleczkowski.customgauge:CustomGauge:1.0.4'
XML 代码
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="@+id/progressbar"
android:layout_
android:layout_
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.
Image from my apk
【讨论】:
以上是关于带圆角的 Android 圆形进度条的主要内容,如果未能解决你的问题,请参考以下文章