[アンドロイド]Jetpack Component試食-5編:簡易実施品リスト

こんにちは!次に、Compose組織のリストの使い方を見てみましょう.

単純な繰り返し文によるスクロール

for loop反復生成リストを使用してリストを整理しましょう.スクロール状態格納変数scrollStateVerticScollプロパティを宣言します.

setContent {
    val scrollState = rememberScrollState()
    Column(
        Modifier.verticalScroll(scrollState)
    ) {
        for (i in 1..50) {
            Text(
                text = "${i}번 아이템",
                textAlign = TextAlign.Center,
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 24.dp)
            )
        }
    }
}

実行結果

スクロール可能なリストビューが作成されました.

しかし、上のコードでfor loopを使って5000個のデータを作成したらどうなるのでしょうか.5000個のデータを同時に検索するため、パフォーマンスが低下します.

LazyColumnを使用してスクロール

LazyColumnを使用して、上記のダウングレードの問題を解決します.
これは、画面上の可視部分を再利用して、次のデータまたは前のデータの値をリフレッシュする方法です.はい、そうです.あのLISA合唱LazyColumnは、スクロール状態、アイテム数、インデックスを管理するため、ステータスを使用して変数を格納する必要はありません.
次のコードは、5000個のアイテムのリストを生成します.

setContent {
    LazyColumn {
        items(5000) {
            Text(
                text = "${it}번 아이템",
                textAlign = TextAlign.Center,
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 24.dp)
            )
        }
    }
}

コードの可読性を向上させるために、itを以下のようにカスタマイズすることもできる.

items(5000) {index ->
    Text(
        text = "${index}번 아이템",
        textAlign = TextAlign.Center,
        fontSize = 24.sp,
        fontWeight = FontWeight.Bold,
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 24.dp)
    )
}

実行結果

配列の値をリストにマッピング

タイル値をリスト形式で表示する場合は、itemsIndexedを使用して次のコードを実行します.

setContent {
    LazyColumn {
        itemsIndexed(
            arrayOf("This", "is", "Jetpack", "Compose", "I", "Learned")
        ) { index, item ->
            Text(
                text = "$item",
                textAlign = TextAlign.Center,
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 24.dp)
            )
        }
    }
}

実行結果

第3編で学習したCardを用いて,RecyclerView+CardViewを生成することができる.

setContent {
    LazyColumn {
        itemsIndexed(
            arrayOf("This", "is", "Jetpack", "Compose", "I", "Learned")
        ) { index, item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp),
                elevation = 5.dp,
                shape = RoundedCornerShape(15.dp)
            ) {
                Text(
                    text = "$item",
                    textAlign = TextAlign.Center,
                    fontSize = 24.sp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 24.dp)
                )
            }

        }
    }
}

xmlを使用してRecyclerViewを実装する必要がある場合は、カードビューレイアウトとアダプタを作成する必要があります.これは非常に面倒です.
しかし、Componentはそのような圧力なしで簡単にコードで実現できる点が本当にいいです.

Reference

Lists - Android Jetpack Compose by Philipp Lackner
https://youtu.be/1Thp0bB5Ev0