Jetpack Composeやってみる

本記事はLife is Tech! Advent Calendar2023の18日目の記事です！
やっほおおおおおお！！関東Minecraft&Unityコースのメンター、ことりだよ🐣

最近、マイクラやUnity以外に、実はAndroidの開発もしてるんだよね👀
Kotlinでコード書いてたらこの前、Minecraftコースのはるっぺに「ことりん、Jetpack Composeって知ってる？やってみるとおもろいよ！」って言われたの！！

何それ、、、👀！！！

気になったので調べてみた👀

Jetpack Composeって何？

Developer.Android.com によるとJetpack Composeというのは、
「ネイティブ UI をビルドする際に推奨される Android の最新ツールキット。Android での UI 開発を簡素化し、加速します。少ないコード、パワフルなツール、直感的な Kotlin API を使用してアプリをすぐに動かすことができます。」とのこと。

Life is Tech!での教科書はUIをxmlで、機能面のプログラムをKotlinで書いていく手法をとっていますが、どうやらこのJetpack Composeは、UIもKotlinでかけてしまうという...！！

早速やってみよう！
今回は、Jetpack Compose を使用する最初の一歩 Composeの基本「スターターのためのチュートリアル」というものを使って開発していくよ！

Empty Activityを選択して、開発スタート！！

まずはテキスト要素を追加していきます！

MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(Message("Android", "Kotori"))

            OriginalAppsTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

data class Message(val author: String, val body: String)

@Composable
fun MessageCard(msg: Message) {
    Column {
        Text(text = msg.author)
        Text(text = msg.body)
    }
}

@Preview
@Composable
fun PreviewMessageCard(){
    MessageCard(
    msg = Message("やっほー！", "ことりがKotlinを開発しているよ！")
    )
}



@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "開発 $name!",
        modifier = Modifier
            .background(Color.Red)
            .padding(5.dp)
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    OriginalAppsTheme {
        Greeting("楽しい")
    }
}

チュートリアルに従って、こんな感じで書いてみました！
xmlとはちょっと違った書き方で、Modifierのところのbackgroundの色設定やpaddingがHTML/CSSのような感じがして面白い！と感じました！！
実際にpreviewしたものがこちら！！

すごいね👀

まとめ

HTML/CSSの要素が入っていて、xmlも楽しいけどこっちも楽しいって思えたよ！！
色々まだわからないことが多いから、この後もやってみるよー！！

見てくれてありがとう！！
また次のキャンプでね〜〜！！🐣