Jetpack Compose 勉強記録その１

今回からJetpack Composeを触っていきたいと思います。
Composeを使用するプロジェクトが増えてきそうなので、学習していこうと思います。

インプットするだけだと、やっただけの勉強になりそうなので、自分なりの勉強した内容を記録として、アウトプットするために、こちらに残していきます。

今回の内容

初回なので、こちらのチュートリアルをやってみようと思います。

テキストを表示させる

MainActivity.kt

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(text = "Hello world!")
        }
    }

setContentブロックでコンポーズのレイアウトを定義するみたいです。
テキストはText(text = "Hello world!")これだけでHello world!が画面上に出てきました。

テキストを表示の関数を作ると良いみたいです。

MainActivity.kt

@Composable
fun HelloText(name: String) {
    Text(text = "Hello $name!")
}

使う側はこうなります。

MainActivity.kt

setContent {
  HelloText("world")
}

テキストを表示することがこれでできました。

レイアウトを設定する

垂直方向にテキストを表示する方法

MainActivity.kt

@Composable
fun HelloText(name: String, body: String) {
    Column {
        Text(text = name)
        Text(text = body)
    }
}

Columnという関数を仕様することで、垂直方向に表示する事ができるみたいです。

使う側はこうなります。

MainActivity.kt

setContent {
  HelloText("Android", "Compose")
}

次に垂直、水平両方利用したレイアウトを作成してみます。

MainActivity.kt

@Composable
fun CardItem(name: String, body: String) {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(R.drawable.ic_launcher_background),
            contentDescription = "picture",
            modifier = Modifier
                .size(50.dp)
                .clip(CircleShape)
        )
        Spacer(modifier = Modifier.width(16.dp))

        Column {
            Text(text = name)
            Spacer(modifier = Modifier.height(12.dp))
            Text(text = body)
        }
    }
}

使う側はこうなります。

MainActivity.kt

setContent {
  CardItem("Android", "Compose")
}

Rowを使うと水平方向に表示する事ができるみたいです。

なのでImageの画像の右側にColumnなので、垂直方向に表示する２つのテキストができます。

レイアウトの装飾はModifierを使用するみたいです。

xmlだとマージンで設定したいたものはSpacerを使うことになるのでしょうかね？

今回はここまでにしようと思います。

次回はチュートリアルの続きをやっていきます。