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Ͱ͋Δɻ