如何在android中创建自定义进度条？

Question

如何在android中设计this进度条？我必须在 XML 或 canvas 中完成，而不是在 jetpack compose 中完成。

我尝试自定义内置水平进度条，但无法想出任何接近的东西。我必须在圆圈中显示百分比文本。知道如何做到这一点吗？

Answer 1

您可以使用自定义 Slider

 来扩展 

thumb 可组合项：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomProgressBar() {

    var targetValue by remember { mutableFloatStateOf(0f) }
    val sliderValue by animateFloatAsState(
        targetValue = targetValue,
        animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing),
        label = "ProgressBar"
    )

    Column {

        Button(
            onClick = {
                targetValue += 15f
            }
        ) {
            Text("INCREMENT")
        }

        Slider(
            value = sliderValue,
            onValueChange = {
            },
            valueRange = 0f..100f,
            steps = 100,
            thumb = {
                Box(
                    modifier = Modifier
                        .size(40.dp)
                        .background(Color.Blue, CircleShape),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = "${sliderValue.toInt()}%",
                        fontSize = 18.sp,
                        color = Color.White
                    )
                }
            }
        )
    }
}