Jetpack Compose 勉強記録その3 (Jetpack Compose チュートリアル レッスン:4)

Jetpack Compose 勉強記録その3です。

今回の内容

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

今回はレッスン 4:リストとアニメーションをやっていきます。

リストは必ず使うと言っても過言では無いので、気になります。

メッセージのリストを作成する

MainActivity.kt

@Composable
fun MessageCard(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            CardItem(message)
        }
    }
}

LazyColumn　LazyRow
こちらを使用する事でリストを表示する事が出来るみたいです。
LazyColumnは縦のリストです。

LazyRowは横のリストです。

itemsに渡したデータを元にリストを作成していきます

itemsに渡したitemをラムダで受け取りレイアウトを作成するComposableの関数CardItemに渡して作成しています。

メッセージに展開アニメーションを実装する

MainActivity.kt

var isExpanded by remember { mutableStateOf(false) }

 Column(modifier = Modifier.clickable { isExpanded = !isExpanded })

rememberを使用しローカルの UI 状態を保存します。
mutableStateOfに渡されているデータに変更があると自動的に再描画されるみたいです。

MainActivity.kt

 Text(text = message.body,
    color = MaterialTheme.colors.secondaryVa
    modifier = Modifier.padding(all = 4.dp),
    maxLines = if (isExpanded) Int.MAX_VALUE
    style = MaterialTheme.typography.body2)

maxLines = if (isExpanded) Int.MAX_VALUEを設定しておくとタップされたセルは全文表示になります。

MainActivity.kt

Surface(modifier = Modifier.animateContentSize().padding(1.dp))

先ほど設定した全文表示になる時にコンテナのサイズを滑らかにアニメーション化する事が出来るみたいです。

以上でチュートリアルは終わりになりました。

これだけでは作れるものが限られてしまう為、まだまだJetpack Composeについて調べて実装し、勉強記録を残していこうと思います。