3. Jetpack Compose

Jetpack Composeとは

従来は「レイアウトはlayoutフォルダ」、「ロジックはMainActivity.kt」と別々に書きましたが、JetpackComposeではレイアウトもロジックもすべてMainAcitivity.ktに書くので、コードが確認しやすい且つ少なくなりました。

2022年から推奨されるようになりました。

AndroidStudioのNewProjectで「EmptyActivity」を選択するとJetpackCompose用のプロジェクトが作成されます。(EmptyViewAcitivityを選択すれば従来のXML手法でOK)

変更点(従来のXML手法→Jetpack Compose)

・今までリソースファイルにレイアウト用のXMLファイルが存在しましたが、これがなくなるため、XML中心の開発ができなくなりました。

・MainActivity.kt内のseetContent内でUI(レイアウト)を構築していきます。

UI部品(MainActivity.kt内)

Text(従来のXMLではTextView)

Text(text = "テキスト")
Text(text = stringResource(id = /* stringリソース */))

Image (従来のXMLではImageView)

Image(
    painter = painterResource(id = /* drawableリソース */)
    contentDescription = "/* 画像の内容 */"
)

Row(従来のXMLではLinearLayoutでのhorizontal指定)

Row {
    Text(text = "横並びテキスト1")
    Text(text = "横並びテキスト2")
}
Column {
    Text(text = "縦並びテキスト1")
    Text(text = "縦並びテキスト2")
}

Modifier(従来のlayout_widthやmarginTop、background)

Row(
    modifier = Modifier
        .background(Color.Green)
        .height(300.dp)
        .fillMaxWidth()
        .padding(16.dp)
        .backgournd(Color.Black)
        .padding(16.dp)
        .background(Color.Blue),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center
) {
    Text(
        modifier = Modifier
            .padding(horizontal = 16.dp)
            .fillMaxWidth()
            .background(Color.White)
        text = "テスト",
        color = Color.Black,
        textAlign = TextAlign.Center
    )
}