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に減らしていけばよいです。