【Android】Jetpack Composeでカウントアップアプリを作る

概要

画面内に設置された画像をクリックするとカウントアップされ回数が表示されるアプリを実装します。

画像を用意

今回使う画像はこの二つです。

Star

Triangle

クリック回数記憶変数定義

クリック回数を記憶する変数をそれぞれ初期値０で定義します。
Starクリック回数

 var countTapStar by remember{
            mutableStateOf(0)
        }

Triangleクリック回数

  var countTapTriangle by remember{
            mutableStateOf(0)
        }

テキストにクリック回数変数の値を適応させます。以下のコードではStar:クリック回数 Triangle:クリック回数と表示されます。

Text(
        text = "Star:$countTapStar ,",
        fontSize = 16.sp,
        color = colorResource(id = R.color.cherry_rose)
        )
Text(
        text = "Triangle:$countTapTriangle",
        fontSize = 16.sp,
        color = colorResource(id = R.color.moegi)
        )
        

画像のクリックを受け付けるようにする

Imageの中にclickableを追加すればクリックしたときの処理を画像に与えることができます。このコードでは、Starをクリックしたときの処理を記述しています。
Modifierの中にclickableを記述し、さらにその中に変数の値を+1する処理を書きます。こうすることでクリック時の処理を画像に簡単に持たせることができます。

Image(
                painter = painterResource(id = R.drawable.icon_svg), contentDescription = "",
                modifier = Modifier
                    .size(108.dp)
                    .border(1.dp, color = colorResource(id = R.color.moegi))
                    //ここにクリック時処理追加
                    .clickable { countTapStar++ },
                contentScale = ContentScale.Crop,
            )

画像を配置

@Composable
fun showImage() {
    //このColumnでテキストと画像を縦方向に並べる
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        var countTapStar by remember {
            mutableStateOf(0)
        }
        var countTapTriangle by remember {
            mutableStateOf(0)
        }
        //Rowでクリック回数表示のテキストを隣に並ばせる
        Row {
            Text(
                text = "Star:$countTapStar ,",
                fontSize = 16.sp,
                color = colorResource(id = R.color.cherry_rose)
            )
            Text(
                text = "Triangle:$countTapTriangle",
                fontSize = 16.sp,
                color = colorResource(id = R.color.moegi)
            )
        }
        //RowでStarとTriangleを隣に並ばせる
        Row {
        //Star
            Image(
                painter = painterResource(id = R.drawable.icon_svg), contentDescription = "",
                modifier = Modifier
                    .size(108.dp)
                    .border(1.dp, color = colorResource(id = R.color.moegi))
                    .clickable { countTapStar++ },
                contentScale = ContentScale.Crop,
            )
            //Triangle
            Image(
                painter = painterResource(id = R.drawable.triangle),
                contentDescription = "",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(108.dp)
                    .clickable { countTapTriangle++ })
        }
    }

動かしてみた

↑youtube shortにされてしまったので埋め込みできませんでした。

作った感想

一つのソースファイルで画像の配置からクリック動作までを決定できるのは、とても便利かつメンテナンスコストを下げられそうだなと感じました。

ただ、ロジックと画面生成のメソッドがぐちゃぐちゃにならないように注意を払う必要もありそうだとも感じます。
まだまだ勉強中ですが、正しく使えばjetpack composeは開発スピードを上げる一因になってくれる頼もしいツールだと考えています。

次の目標

ViewModelに挑戦してみるつもりです。

Repository