カウントアプリをちょっと改造しよう

ここからは、ちょっとした小ネタを追加したり、見た目を変更していきましょう。

テキストとボタンの見た目を修正する

Text や Button の見た目を修正していきます。

@Composable
fun CountAppScreen(modifier: Modifier = Modifier) {

    var count by remember { mutableIntStateOf(0) }

    Column(
        modifier = modifier
    ) {
        Text(
            text = "カウント: $count",
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Black,
            textAlign = TextAlign.Center
        )

        Spacer(modifier = Modifier.height(24.dp))

        Button(
            modifier = Modifier
                .size(120.dp)
                .scale(1f),
            onClick = {
                count++
            }
        ) {
            Text(
                text = "+",
                fontSize = 48.sp,
                fontWeight = FontWeight.Bold,
                color = Color.White
            )
        }
    }
}

Text(
    text = "カウント: $count",
    fontSize = 40.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Black,
    textAlign = TextAlign.Center
)

text: 表示する文字
fontSize: 文字の大きさ
fontWeight: 文字の太さ
color: 文字の色
textAlign: 文字の並び方

他にも色々な引数があります。公式リファレンスで確認してみましょう。

参考: https://developer.android.com/develop/ui/compose/text/style-text?hl=ja ↗

Button(
    modifier = Modifier
        .size(120.dp)
        .scale(1f),
    onClick = {
        count++
    }
) {
    Text(...)
}

modifier: モディファイラーを挿入する
.size: ボタンの大きさの設定
.scale: 拡大率の設定
onClick: クリック時の処理

他にも色々な引数があります。公式リファレンスで確認してみましょう。

参考: https://developer.android.com/develop/ui/compose/components/button?hl=ja ↗

実行確認

まずは前回までのコードを実行して、「カウント: 0」というテキストと「+」ボタンが表示されていることを確認しましょう。

もしも変化しなかった場合は、すぐに運営に伝えてね。

ボタンとテキストの位置を調整する

現状では、ボタンやテキストの位置が画面の左上に配置されています。これを画面の真ん中に配置するように調整していきましょう。

コードの追加

以下のコードを追加して、レイアウトを調整します。

@Composable
fun CountAppScreen(modifier: Modifier = Modifier) {

    var count by remember { mutableIntStateOf(0) }

    Column(
        modifier = modifier
            .fillMaxSize()
            .background(Color.Cyan),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ) {
        Text(
            text = "カウント: $count",

赤枠の中で、以下の設定がされています：

fillMaxSize() - サイズの最大化
horizontalAlignment - 水平方向の調整
verticalArrangement - 垂直方向の調整
background() - 背景の色調整

レイアウトをどのように並べるかを記述するものです。横並びなのか、左並びなのかなどを指定します。

厳密には、ArrangementとAlignmentは違いますが、似た動作をします。RowとColumnで若干名称が変わるので要注意。

verticalArrangement の例：

設定値	配置
`Arrangement.Top`	上寄せ
`Arrangement.Center`	中央
`Arrangement.Bottom`	下寄せ

実行確認

コードを追加して実行すると、背景色がシアンになり、テキストとボタンが画面中央に配置されます。

数値によって背景色を変えてみよう

次は、カウントの数値に応じて背景色が変わる機能を追加しましょう。10回タップするごとに背景色がランダムに変化します。

@Composable
fun CountAppScreen(modifier: Modifier = Modifier) {

    var count by remember { mutableIntStateOf(0) }
    val backgroundColor = remember { mutableStateOf(Color(0xFF1E1E1E)) }

    LaunchedEffect(count) {
        if (count % 10 == 0 && count != 0) {
            backgroundColor.value = Color(
                Random.nextFloat(),
                Random.nextFloat(),
                Random.nextFloat(),
                1f
            )
        }
    }

    Column(
        modifier = modifier
            .fillMaxSize()
            .background(backgroundColor.value),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ) {
        Text(
            text = "カウント: $count",
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold,
            color = Color.White,
            textAlign = TextAlign.Center
        )

背景が変わる動作の仕組み

背景色の状態を保存

以下のコードで、背景がどの色にしておくのか保存をしておきます。このときにmutableStateOfで変数を保存して、状態を管理できるようにします。

val backgroundColor = remember { mutableStateOf(Color(0xFF1E1E1E)) }

背景の色が変わる仕組み

以下のコードは、countの値が変わったら呼び出されるものです。この時はLaunchedEffectを利用します。

LaunchedEffect(count) {
    if (count % 10 == 0 && count != 0) {
        backgroundColor.value = Color(
            Random.nextFloat(),
            Random.nextFloat(),
            Random.nextFloat(),
            1f
        )
    }
}

if文で10で割ったときにあまりが0だったら、背景の色を乱数で作成されるようになります。

Columnで背景色を使用

最後、背景の色の変数を、Columnで使用してあげれば、10クリックで1回背景色が変わるようになります。

Column(
    modifier = modifier
        .fillMaxSize()
        .background(backgroundColor.value),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
) {
    Text(
        text = "カウント: $count",
        fontSize = 40.sp,
        fontWeight = FontWeight.Bold,
        color = Color.White,
        textAlign = TextAlign.Center
    )

実行確認

10タップに1回背景が変わるようになったと思います。

ボタンにアニメーションをつけてみよう

次は、10回タップするごとにボタンの大きさが変わるアニメーションを追加します。

コードの追加

以下のコードを追加・編集してみましょう。

@Composable
fun CountAppScreen(modifier: Modifier = Modifier) {

    var count by remember { mutableIntStateOf(0) }
    val scale by animateFloatAsState(
        targetValue = if (count % 10 == 0 && count != 0) 1.5f else 1f,
        label = "scale"
    )
    val backgroundColor = remember { mutableStateOf(Color(0xFF1E1E1E)) }

    LaunchedEffect(count) {
        if (count % 10 == 0 && count != 0) {

そして、Buttonのmodifierに.scale(scale)を追加します。

Button(
    modifier = Modifier
        .size(120.dp)
        .scale(scale),
    onClick = {
        count++
    }
) {
    Text(
        "+",
        fontSize = 48.sp,
        fontWeight = FontWeight.Bold,
        color = Color.White
    )
}

大きさが変わる理由

animateFloatAsStateは、targetValueが変わったときに滑らかに値を変えてアニメーションをしてくれます。

val scale by animateFloatAsState(
    targetValue = if (count % 10 == 0 && count != 0) 1.5f else 1f,
    label = "scale"
)

変更されたscaleはButtonのscaleと連動しています。

Button(
    modifier = Modifier
        .size(120.dp)
        .scale(scale),
    onClick = {
        count++
    }

実行確認

10回目、20回目でボタンの大きさが大きくなったり小さくなったり変更されるようになったと思います。

これで、基本となるアプリは完成になります

お疲れ様でした。

今回のレポジトリはこちらからみれます： https://github.com/harutiro/CountAppSysHack ↗

最後まで読み終えました！えらい！