Save 37% off PRO during our Black Friday Sale! »

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

62384887995a0ce07ec4f86b89f5ec9e?s=47 aosa4054
November 17, 2021

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

62384887995a0ce07ec4f86b89f5ec9e?s=128

aosa4054

November 17, 2021
Tweet

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