Memo

メモ > 技術 > IDE: AndroidStudio > アプリの作成（Jetpack Compose / 一覧）
アプリの作成（Jetpack Compose / 一覧）

基本的に以下の記事を参考にしたが、色々と追加調整が必要だった。

Jetpack Compose入門 アプリを作る知識-1(一覧作成~Modifier/Scaffold/Surface/Columnなど)
https://zenn.dev/ko2ic/articles/32134efcc1f94b

Jetpack Compose | Android Developers
https://developer.android.com/develop/ui/compose/components/scaffold?hl=ja

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")


まとめると、以下でデータの一覧ができた。

@Composable
fun MainScreen(modifier: Modifier = Modifier) {
    Column(modifier = modifier) {
        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
        LazyColumn(
            modifier = Modifier
                .padding(innerPadding),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            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 = 4.dp)
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp, vertical = 8.dp),
            ) {
                Text(title)
                Spacer(modifier = Modifier.height(4.dp))
                Text(body)
            }
        }
    }
}
Memo

Advertisement
