LazyColumnはLazyListScope DSLコマンドを使ってアイテムの並びを記述します。
コマンドは7つあり、各々について例を示します。
※環境：Android Studio Koala | 2024.1.1
Kotlin 1.9.0
Compose Compiler 1.5.1
androidx.compose.foundation:foundation 1.6.8
目次
スポンサーリンク
LazyListScope DSL一覧
LazyColumnはLazyListScope DSLコマンドを使ってアイテムの並びを記述します。
表にあげるようなDSLコマンドが用意されています。
| コマンド | 概要 | |
|---|---|---|
| item( ) | 標準関数 | 単体のアイテムを追加 |
| items(count: Int) | カウント値のアイテムを追加 | |
| stickyHeader( ) | リストの先頭に固定されるヘッダーを追加 | |
| items(items: Array | 拡張関数 | Arrayで列挙されたアイテムを追加 |
| items(items: List | Listで列挙されたアイテムを追加 | |
| itemsIndexed(items: Array | Arrayで列挙されたIndex付きアイテムを追加 | |
| itemsIndexed(items: List | Listで列挙されたIndex付きアイテムを追加 | |
スポンサーリンク
item( )
LazyColumn(modifier = Modifier.fillMaxSize()) {
item { ItemBox { Text(text = "Item %02d".format(0)) } }
item { ItemBox { Text(text = "Item %02d".format(1)) } }
item { ItemBox { Text(text = "Item %02d".format(2)) } }
item { ItemBox { Text(text = "Item %02d".format(3)) } }
item { ItemBox { Text(text = "Item %02d".format(4)) } }
item { ItemBox { Text(text = "Item %02d".format(5)) } }
item { ItemBox { Text(text = "Item %02d".format(6)) } }
item { ItemBox { Text(text = "Item %02d".format(7)) } }
item { ItemBox { Text(text = "Item %02d".format(8)) } }
item { ItemBox { Text(text = "Item %02d".format(9)) } }
item { ItemBox { Text(text = "Item %02d".format(10)) } }
item { ItemBox { Text(text = "Item %02d".format(11)) } }
}
スポンサーリンク
item(count: Int)
LazyColumn(modifier = Modifier.fillMaxSize()) {
items(12) {
ItemBox { Text(text = "Item %02d".format(it)) }
}
}
itにカウント値が入ります。
スポンサーリンク
stickyHeader( )
LazyColumn(modifier = Modifier.fillMaxSize()) {
@OptIn(ExperimentalFoundationApi::class)
stickyHeader {
ItemBox(containerColor = Color.LightGray) { Text(text = "Header") }
}
items(12) {
ItemBox { Text(text = "Item %02d".format(it)) }
}
}
一覧の最上に追加されたヘッダーは、上部に固定されてスクロールしません。
一覧の中間に追加されたヘッダーは、スクロールした後に上部に固定されます。
スポンサーリンク
items(items: Array)
val ItemArray = Array(12) { it }
...
LazyColumn(modifier = Modifier.fillMaxSize()) {
items(ItemArray) {
ItemBox { Text(text = "Item %02d".format(it)) }
}
}
itにItemArrayの要素が入ります。
スポンサーリンク
items(items: List)
val ItemList = List(12) { it }
...
LazyColumn(modifier = Modifier.fillMaxSize()) {
items(ItemList) {
ItemBox { Text(text = "Item %02d".format(it)) }
}
}
itにItemListの要素が入ります。
スポンサーリンク
itemsIndexed(items: Array)
val ItemArray = Array(12) { (Math.random() * 100).toInt() }
...
LazyColumn(modifier = Modifier.fillMaxSize()) {
itemsIndexed(ItemArray) { index, item ->
val _containerColor = if(index % 2 == 0)
MaterialTheme.colorScheme.tertiaryContainer
else
MaterialTheme.colorScheme.secondaryContainer
ItemBox(containerColor = _containerColor) {
Text(text = "Item %02d".format(item))
}
}
}
スポンサーリンク
itemsIndexed(items: List)
val ItemList = List(12) { (Math.random() * 100).toInt() }
...
val _sortedItems = remember(ItemList) { ItemList.sortedDescending() }
LazyColumn(modifier = Modifier.fillMaxSize()) {
itemsIndexed(_sortedItems) { index, item ->
if(index == 0)
ItemBox(containerColor = Color.LightGray) {
Text(text = "Top 3")
}
if(index == 3)
ItemBox(containerColor = Color.LightGray) {
Text(text = "Other")
}
ItemBox { Text(text = "Score %02d".format(item)) }
}
}
スポンサーリンク
関連記事：
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のLazyColumnについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.foundation:foundation 1.6.8 ...
LazyColumnは「複数のデータやオブジェクト」または「コレクション」を一覧（リスト）表示するUIです。 単純に一覧表示できれば良い用途もありますが、表示に加えてアイテムの制御（変更/追加/移動/削除）を必要とする場面が多くあります。 最近の携帯端末はパソコンと同じ利便性をアプリに求めますから、「データの表示だけでなく編集もできる」という機能は必須の要望です。 ここでは、LazyColumnでアイテムの制御を行う方法を紹介します。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.foundation:foundation 1.6.8 ...
LazyColumnとColumnはどちらも一覧（リスト）表示するUIです。 記述方法は違いますが、スクロールしたり、アイテムを制御したり、ほぼ同じことが出来ます。 ただし、両者の特徴により、向き不向きがあります。よく違いを理解して、適材適所で使い分けが必要です。 ここでは、両者の違いをまとめました。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.foundation:foundation 1.6.8 ...
ある成果物の開発を進めるに時に、「先に問題へ対応する」と「後で問題へ対応する」では、後者の方が難易度は高いです。 開発は進むにつれて周辺との因果関係が複雑化ます。全体に影響を与えない形で問題へ対応することが、難しくなるからです。 不要な再Composeを回避する対応も同じだと思います。 ですので、発生源が明確で不要な再Composeは、コーディングの段階で潰しておくべきです。 ただし、不要な再Composeの発生源を知らなければ出来ません。 ここで紹介するList型入力は、不要な再Composeの発生源の一つです。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.foundation:foundation 1.6.8 kotlinx.collections.immutable 0.3.7 ...
ある成果物の開発を進めるに時に、「先に問題へ対応する」と「後で問題へ対応する」では、後者の方が難易度は高いです。 開発は進むにつれて周辺との因果関係が複雑化ます。全体に影響を与えない形で問題へ対応することが、難しくなるからです。 不要な再Composeを回避する対応も同じだと思います。 ですので、発生源が明確で不要な再Composeは、コーディングの段階で潰しておくべきです。 ただし、不要な再Composeの発生源を知らなければ出来ません。 ここで紹介するListStateは、不要な再Composeの発生源の一つです。 ※環境：Android Studio Koala | 2024.1.1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.foundation:foundation 1.6.8 ...
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のLazyRowについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Patch 1 Kotlin 1.9.0 Compose Compiler 1.5.1 androidx.compose.foundation:foundation 1.6.8 ...
スポンサーリンク