【Android】JetpackCompose の基本【kotlin】

はじめに

今回はJetpackComposeの基本的なことを記事にします
自分の中の解釈で書いているので間違っている点もあるかとは思いますが、使いながら慣れていき
間違っていることに気が付いたら直していければな　と思います

基本

@Composable

上のアノテーションが付けられた関数がコンポーズ可能な関数

@Preview

コンポーズ可能な関数に上のアノテーションを付けてプロジェクトをビルドすることで
Android Studio内でプレビューを表示することができます

@Composable
private fun Hoge(name: String) {
        Surface(color = Color.Green) {}

Composeで作られたUIの背景色を変える場合はSurfaceでラップします
Surfaceは色を受け取ることができるので背景色に指定したい色を引数に渡します

SurfaceやTextなどのCompose内の要素は　modifier　という省略可能なパラメータにより親レイアウト内での配置、表示、動作を指示できます。
・clickable　クリック可能にする
・padding　周辺にスペースを作る
・size()　幅と高さを指定
などがあります

@Composable
private fun Hoge(name: String) {
    Surface(
        color = color = Color.Green,
        modifier = Modifier.padding(vertical = 10.dp, horizontal = 10.dp)
    ) {

列と行（配置）

Composeではレイアウトの配置方法が３つあります
１つ目は　Columnです

Columnでラップされた子レイアウトは縦方向に配置されます

２つ目は　Rowです
Columnの縦に対して　Rowは横方向に子レイアウトを配置します

３つ目は　Boxです
Boxは子レイアウトを重ねて配置することができます

    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("A")
        Text("B")
    }

上のように定義することで
AとBというテキストを縦方向に配置することができます

fillMaxSize()は　親レイアウト内いっぱいに子レイアウト広げます
縦のみの場合　fillMaxHeight
横のみの場合　fillMaxWidth　を指定することも可能です

参考