Memo

メモ > 技術 > IDE: AndroidStudio > アプリの作成（Jetpack Compose / 一覧）
アプリの作成（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)
            }
        }
    }
}
Memo

Advertisement
