LazyVerticalGridに学ぶ 非スクローラブルなグリッドの作り方

Transcript

1. LazyVerticalGridʹֶͿ 
 ඇεΫϩʔϥϒϧͳάϦου ͷ࡞Γํ potatotips #76 Shota Ara
2. LazyVerticalGrid • Jetpack Composeʹͯར༻Ͱ͖Δ άϦουදࣔͷComposable • σϑΥϧτͰεΫϩʔϧʹରԠ
3. LazyVerticalGridͷ࢖͍ʹ͘͞ • ൃද࣌఺ʢ2021/11/17ʣͰExperimental • LazyVerticalGridࣗମ͕εΫϩʔϥϒϧͳComposableͰ͋Δ
4. LazyVerticalGridͷ 
 ࢖͍ʹ͘͞ LazyVerticalGridࣗମ͕εΫϩʔϧ 
 ՄೳͳͷͰɺ 
 ϦετͷҰ෦͕άϦου 
 ͳUIͷදݱ͕Ͱ͖ͳ͍ɻ
5. LazyVerticalGridΛࢀߟʹComposableΛ࡞Δ • Experimentalͱ͸͍͑ެࣜͷࢀߟ࣮૷͕͋Δɻ • ComposableͳͲஔ͖׵͑Մೳͳؔ਺ʹ͓͚ͯ͠͹ 
 ΋͠StableͳAPI͕௥Ճ͞Εͨͱ͖͸ͦΕΛஔ͖׵͑Δ͚ͩͰྑ͍ɻ
6. LazyVerticalGridͷ಺෦ॲཧ
7. LazyVerticalGridͷ಺෦ॲཧ val rows = (scope.totalSize + nColumns - 1) / nColumns LazyColumn( /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } }
8. LazyVerticalGridͷ಺෦ॲཧ val rows = (scope.totalSize + nColumns - 1) / nColumns LazyColumn( /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } } ౉͞ΕͨΞΠςϜͷαΠζͱΧϥϜ਺͔Β 
 ߦ਺Λܭࢉ͢Δ
9. LazyVerticalGridͷ಺෦ॲཧ val rows = (scope.totalSize + nColumns - 1) / nColumns LazyColumn( /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } } ಺෦ͰLazyColumnΛ͍࣋ͬͯΔ 
 ʹ εΫϩʔϧͰ͖Δਖ਼ମ
10. LazyVerticalGridͷ಺෦ॲཧ val rows = (scope.totalSize + nColumns - 1) / nColumns LazyColumn( /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } } ҰߦҰߦΛRowʹͯ͠itemsͰ 
 ͦΕΛॎʹੵΜͰߦ͘ॲཧ
11. ͜ΕΛࢀߟʹ…
12. LazyVerticalGridΛࢀߟʹͨ͠ඇεΫϩʔϧ൛ val rows = (items.size + columns - 1) / columns Column( /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */ ) { for (rowIndex in 0..rows) { Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } }
13. ໰୊఺
14. αϯϓϧ࣮૷ LazyColumn { item { NonScrollableGrid( column = 3, items = myItems ) { /* ֤ΞΠςϜͷComposable */ } } }
15. ໰୊఺ LazyColumn { item { NonScrollableGrid( column = 3, items = (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } }
16. ໰୊఺ LazyColumn { item { NonScrollableGrid( column = 3, items = (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } } 0…1000😇
17. ໰୊఺ LazyColumn { item { NonScrollableGrid( column = 3, items = (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } } item͕composableؔ਺ 
 ݺͼग़͠ͷ୯Ґ
18. վળ
19. fun <T> LazyListScope.gridItems( columns: Int, items: List<T>, gridItem: @Composable (T) -> Unit ) { val rows = (items.size + columns - 1) / columns items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { val itemIndex = rowIndex * columns + columnIndex if (itemIndex < items.size) { Box( modifier = Modifier.weight(1f, fill = true), propagateMinConstraints = true ) { gridItem.invoke(items[itemIndex]) } } else { Spacer(Modifier.weight(1f, fill = true)) } } } } }
20. ໰୊఺ LazyColumn { gridItems( column = 3, items = (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } }
21. ໰୊఺ LazyColumn { gridItems( column = 3, items = (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } 0…24
22. ·ͱΊ
23. ·ͱΊ • Jetpack Composeʹ͸άϦου഑ஔͷComposable͕༻ҙͯ͋͠Δɻ • ͨͩ͠࢖͍ʹ͍͘໘΋ɻ • ಺෦ίʔυ͸ൺֱతγϯϓϧͳͷͰ͜ΕΛࢀߟʹܨ͗ͷ࣮૷͕Մೳɻ • LazyColumnͷඳըͷ୯Ґ͸֤itemͰ͋Δɻ