Jetpack ComposeのLazyColumnでリストを表示する
LazyColumnに名前の一覧を渡し、縦にスクロールできるリストを表示します。
実装のポイント
items(pokemons)で名前ごとの行を作り、各行の下にHorizontalDividerを置いています。キーには重複しない名前を使用します。
保存されていたContentView.ktは空だったため、録画と値を渡す画面遷移の素材をもとに、タップ操作のないリストとしてコードを補っています。
準備
Android StudioのCompose対応プロジェクトで、Material 3を使用します。以下のコードではパッケージ名をcom.swiswiswift.swiswikotlinにしています。自分のプロジェクトに合わせて変更してください。テーマはMaterialThemeに揃えています。
各記事は独立したサンプルです。同じプロジェクトで試す場合は、前のサンプルのMainActivityやContentViewを置き換えてください。
コード
MainActivity.kt
package com.swiswiswift.swiswikotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.ui.Modifier
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
MaterialTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
ContentView(modifier = Modifier.padding(innerPadding))
}
}
}
}
}
ContentView.kt
package com.swiswiswift.swiswikotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun ContentView(modifier: Modifier = Modifier) {
val pokemons = listOf(
"Bulbasaur",
"Ivysaur",
"Venusaur",
"Charmander",
"Charmeleon",
"Charizard",
"Squirtle",
"Wartortle",
"Blastoise",
"Caterpie",
"Metapod",
"Butterfree",
"Weedle",
"Kakuna",
"Beedrill"
)
LazyColumn(modifier = modifier.fillMaxSize()) {
items(pokemons, key = { it }) { pokemon ->
Text(
text = pokemon,
fontSize = 24.sp,
modifier = Modifier.padding(16.dp)
)
HorizontalDivider()
}
}
}