［Jetpack Compose］進捗状況に応じてダイナミックに色が変化するプログレスバーを作る

作るもの

• 進捗状況に応じて色が変化するProgressBarを作る
• 変化する色は赤・青・黄の三段階にしてみる

作り方

LinearProgressIndicatorを配置して、progressの値に応じてcolorを変化させるProgressBarを作成する。

private const val ZERO = 0f
private const val WARNING = 1f / 3f
private const val CAUTION = 1f / 3f * 2f

private val BLUE = Color(0xFF9A92F2)
private val YELLOW = Color(0xFFEBD97C)
private val RED = Color(0xFFFF8C8C)

@Composable
fun ProgressBar(
    @FloatRange(from = 0.0, to = 1.0)
    progress: Float,
    modifier: Modifier = Modifier
) {
    val color = when {
        (progress in ZERO..WARNING) -> RED
        (progress in WARNING..CAUTION) -> YELLOW
        else -> BLUE
    }
    LinearProgressIndicator(
        progress = progress,
        color = color,
        modifier = modifier
    )
}

動作確認

作成したProgressbarをrememberInfiniteTransitionでアニメーション表示し動作を確認する。以下のように通常は青、2/3地点では黄、1/3地点では赤に色が変化するような感じで表示されているので想定どおり動作しています。

@Preview
@Composable
private fun ProgressBar_Preview() {
    val animation = rememberInfiniteTransition(label = "anime")
    val value by animation.animateFloat(
        label = "anime",
        initialValue = 1f,
        targetValue = 0f,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 1000,
                easing = LinearEasing
            ),
            repeatMode = RepeatMode.Restart
        ),
    )

    ProgressBar(
        progress = value,
        modifier = Modifier
            .fillMaxWidth()
            .padding(32.dp)
    )
}