Androidでタイマーアプリを作る Jetpack Compose

こんにちは。

タイマーアプリとかカウントダウンアプリとか、まぁ呼び方は何でもよいですがフロントの勉強するってなるとおすすめですよね。

ってことで今回はAndroidの新しいUIシステムであるJetpack Composeでタイマーアプリを作るために、CircularProgressIndicatorという便利なコンポーズを見ていきましょう。続きがあるかは謎です。

はい、これだけです。これで50%プログレスが100×100で色は黒、太さは10dpのドーナッツ型のプログレスの出来上がりです。

CircularProgressIndicator(
    progress = 0.5f,
    modifier = Modifier
        .height(100.dp)
        .width(100.dp),
    color = Color.Black,
    strokeWidth = 10.dp
)

※中央寄せを行っています。

引数のprogressを下記のようにanimateFloatAsStateで状態として持ってあげればよいですね。

var progress by remember { mutableStateOf(0f) }

val animatedProgress by animateFloatAsState(
    targetValue = progress,
    animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
)

逆回りにしたいときはanimateProgressを1->0に減らしていけばよいです。