gpt4 book ai didi

带圆角的 Android 圆形进度条

转载 作者:IT王子 更新时间:2023-10-28 23:32:31 32 4
gpt4 key购买 nike

我正在尝试获得一个带有圆角的圆形进度条,如下所示。 enter image description here

但到目前为止,我无法获得圆角,我能够获得圆形进度条。 enter image description here

我正在尝试使用 xml drawable 来绘制它。

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

我尝试使用 scale 参数,但进度角没有改变。我不确定如何实现圆角。请帮忙,我将不胜感激。

最佳答案

一个简单高效的类扩展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()
}
}

关于带圆角的 Android 圆形进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36639660/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com