【Android】Jetpack Compose楽々体験 文字列&画像配置編

いろいろと楽にしてくれるjetpack compose

開発でfragmentやらを作った上にxmlでレイアウトを崩さないようにいろいろ調整するのが面倒でした。
おまけにその分時間をとられて作業がなかなか進まないために残業をしなければ終わらないっ・・・！
そんな時に出会ったのがこのjetpack composeです。
少し触ってみた感想は、「kotlinファイルだけで画面を生成できるのは本当に楽！」 でした。

作ったもの

画面がかなり汚くなっていますが、文字列操作のテスト画面を作成しました。導入はEmpty Compose Activityをプロジェクト時に選択するとgradleの設定をしなくてもよくなるので楽です。ただし、生成時に自動でついてくるactivity_main.xmlは使わないので削除します。
色や画像設定、文字列はリソースファイルからとってきています。

githubのブランチ分けをより細かくしました。詳しくはReadMeをご覧ください。

(例)色をリソースから指定する

color = colorResource(id= R.color.white)

画像をリソースから指定する

 painter = painterResource(id = R.drawable.icon_svg)

文字列をリソースから指定する

text = stringResource(id = R.string.hello_world)

楽々ポイントNo.1 リストが簡潔に書ける

一番上の文字列はリストを使って色の出し分けを行っています。今まではfor分などが必要でしたが、jetpack composeではより簡潔に書くことができます。

MainAcitivity.kt

data class LongStory(val part:String,val textColor:Int,val textSize:Int)

@Composable
fun appScreen() {
    val longStory = listOf(
        LongStory("1年目 " ,R.color.cherry_rose,20),
        LongStory("成長口実 ",R.color.weak_violet,20),
        LongStory("重労働 ",R.color.moegi,20),
             LongStory("鯱川畜木",R.color.dark_red,16)
            )
    LazyColumn {
        items(longStory){story ->
            Text(text = story.part, color = colorResource(id = story.textColor), fontSize = story.textSize.sp)
        }
    }
}

data classとコラボレーションすることで表示させる文字、色、大きさを全部ひとまとめにしてitemsがfor文の役をするすごくシンプルな実装ができました。

楽々ポイントNo.2 丸角

背景を丸角にしようとするとき、xmlの場合は画面を作るものとは別に専用のxmlファイルを用意してからそれを画面生成するxmlのbackgroundに指定する必要がありました。直接打ち込めないかなともどかしく思っていたのですが、これでは本当に短いコードで実現できて感動しました。

MainAcitivity.kt

@Composable
fun buttonBackGround(){
    Text(text = stringResource(id = R.string.hello_world), fontSize = 16.sp, modifier = Modifier
        .background(
            color = colorResource(id = R.color.deep_sky_blue),
            RoundedCornerShape(20.dp)
        )
        .border(2.dp, Color.Black, RoundedCornerShape(20.dp))
        .padding(20.dp))
}

これまでは別のxmlファイルを用意していたのがRoundedCornerShapeに数値を入力すれば丸角ができます。ありがてぇ。
このコードで、枠線の付いた丸角ボタンができます。

楽々ポイントNo.3 レイアウトの種類を気にする必要がない

xmlで画面を作るとRelativeLayoutだった画面をConstraintLayoutに書き換えようとか、レイアウトをネストすると重くなるから気を付けようとか多くのことを考慮する必要がありました。
それがJetpack composeを使うとRowやColumnで簡単にコンポーネントを配置できるのがとにかく楽でした。

このコードは2つの画像を横に並べて、その下にテキストを表示させています。

MainAcitivity.kt

@Composable
fun showImage(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row{
            Image(
                painter = painterResource(id = R.drawable.icon_svg), contentDescription = "",
                modifier = Modifier
                    .size(108.dp)
                    .border(1.dp, color = colorResource(id = R.color.moegi)),
                contentScale = ContentScale.Crop,
            )
            Image(
                painter = painterResource(id = R.drawable.triangle),
                contentDescription ="",
                contentScale = ContentScale.Crop,
                modifier = Modifier.size(108.dp))
        }
        Text(text = stringResource(id = R.string.let_me_show),
            color = colorResource(id = R.color.white),
            fontSize = 16.sp,
            modifier = Modifier.background(color = colorResource(id = R.color.deep_sky_blue)))
    }
}

たったこれだけで画像設定とレイアウト設定ができてしまうのは、見ていて気持ちいがいいです！

まとめ

今までプログラムファイルとxmlファイルを往復して画面の崩れがないかをチェックするのが開発するうえでかなり負担になっていました。それがkotlinファイルだけで画面生成もできるようになって非常に楽になりましたし、自分の推しがまた増えました。

よし、もっと学習して推し活だ！！！

参考サイト

このサイトを見ながらjetpack composeを触ったのですが、解説がわかりやすくて学習の大きな手助けになりました。
Android 公式ページもこの人が書いてくれないかな

リストの実装方法はこちらから。

リソースの参照の仕方を参考にしました。