■アプリの作成(Jetpack Compose / 一覧)
基本的に以下の記事を参考にしたが、色々と追加調整が必要だった
Jetpack Compose入門 アプリを作る知識-1(一覧作成~Modifier/Scaffold/Surface/Columnなど)
https://zenn.dev/ko2ic/articles/32134efcc1f94b
material3は試験運用版らしいので、そのための宣言が必要らしい
Compose でマテリアル 2 からマテリアル 3 に移行する | Jetpack Compose | Android Developers
https://developer.android.com/jetpack/compose/designsystems/material2-material3?hl=ja
@OptIn(ExperimentalMaterial3Api::class)
Scaffoldを使う際は、ConstraintLayoutの指定が必要みたい
Jetpack Compose 1.2.0 では Scaffold の content に PaddingValues を必ず設定する - Infinito Nirone 7
https://blog.keithyokoma.dev/entry/2022/08/30/193024
Compose の ConstraintLayout | Jetpack Compose | Android Developers
https://developer.android.com/jetpack/compose/layouts/constraintlayout?hl=ja
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"
まとめると、以下でデータの一覧ができた
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HelloWorldTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
MainScreen()
}
}
}
}
}
@Composable
fun MainScreen() {
val mocks = (1..100).map {
Pair("リストのタイトル$it", "これはリストのメッセージ${it}です。")
}
ListScreen(mocks)
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun ListScreen(contents: List<Pair<String, String>>) {
Scaffold(
topBar = {
TopAppBar(
title = { Text("リストのサンプル") }
)
}
) { innerPadding ->
val context = LocalContext.current
ConstraintLayout(
modifier = Modifier.padding(innerPadding)
) {
LazyColumn {
items(contents.size) { index ->
val content = contents[index]
ListTitle(title = content.first, body = content.second)
{
Toast.makeText(context, content.second, Toast.LENGTH_SHORT).show()
}
}
}
}
}
}
@Composable
private fun ListTitle(
title: String,
body: String,
onClick: () -> Unit
) {
Surface(
modifier = Modifier.clickable { onClick() },
shape = MaterialTheme.shapes.medium
) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(all = 8.dp)
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp, vertical = 16.dp),
) {
Text(title)
Spacer(modifier = Modifier.height(4.dp))
Text(body)
}
}
}
}