如何在android studio（java）中自定义进度条并根据进度改变颜色？让它看起来像我的描述

Question

我正在构建一个用于照顾虚拟动物的应用程序，并想通过使用进度条向用户指示它有多饱/有多饿。

我希望进度条是水平的，具有棕色轮廓，圆形边缘，内部在高于40％时为绿色，在低于40％时为红色（包括）。

我尝试对其进行编码，甚至使用 chatGPT 但没有成功...... 这是我（和 chatGPT 编写的）代码：

custom_progress_bar.xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#00000000" />
            <stroke
                android:width="10dp"
                android:color="#614328" />
            <corners android:radius="50dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#238A23" />
                <corners android:radius="30dp" />
            </shape>
        </clip>
    </item>
</layer-list>

以及屏幕xml中的进度条：

            <ProgressBar
                android:id="@+id/PBfullness"
                style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                android:layout_width="130dp"
                android:layout_height="60dp"
                android:max="100"
                android:progress="100"
                android:layout_marginTop="9dp"
                android:layout_marginLeft="110dp"
                android:progressDrawable="@drawable/custom_progress_bar" />

我期待它能起作用，但它看起来就像一个非常厚的绿色斑点。

如果有人可以帮助我使我的代码工作，和/或帮助我理解为什么它不工作，我真的很感激。

Answer 1

您可能想为此创建一个自定义视图。

下面是一个最简单的自定义ProgressView的例子。我建议您还重写 onMeasure 以支持wrap_content。

class CustomProgressView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    val borderWidth = context.dpToPx(2).toFloat()
    val progressHeight = context.dpToPx(8).toFloat()
    val progressHeight2 = progressHeight / 2
    val rect = RectF()
    val paint = Paint()

    var progress: Float = 0.3f
        set(value) {
            field = value.coerceIn(0f, 1f)
            invalidate()
        }


    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        rect.set(0f, 0f, width.toFloat(), progressHeight)
        paint.color = Color.LTGRAY // grey for background
        canvas.drawRoundRect(rect, progressHeight2, progressHeight2, paint)
        rect.set(0f, 0f, width * progress, progressHeight)
        paint.color = Color.BLUE // brown
        canvas.drawRoundRect(rect, progressHeight2, progressHeight2, paint)
        rect.set(borderWidth, borderWidth, (width - borderWidth * 2) * progress, progressHeight - borderWidth)
        paint.color = if (progress <= 0.4f) Color.RED // red
        else Color.GREEN // green
        canvas.drawRoundRect(rect, progressHeight2, progressHeight2, paint)
    }

    private fun Context.dpToPx(dp: Int) =
        TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dp.toFloat(),
            resources.displayMetrics
        ).toInt()
}

40% 示例 60% 示例