aosa4054
November 17, 2021
580

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

## aosa4054

November 17, 2021

## 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(

) {

items(rows) { rowIndex ->

Row {

for (columnIndex in 0 until nColumns) {

/* ֤ΞΠςϜͷComposableΛݺͼग़͠ */

}

}

}

}

8. LazyVerticalGridͷ಺෦ॲཧ
val rows = (scope.totalSize + nColumns - 1) / nColumns

LazyColumn(

) {

items(rows) { rowIndex ->

Row {

for (columnIndex in 0 until nColumns) {

/* ֤ΞΠςϜͷComposableΛݺͼग़͠ */

}

}

}

}
౉͞ΕͨΞΠςϜͷαΠζͱΧϥϜ਺͔Β

ߦ਺Λܭࢉ͢Δ

9. LazyVerticalGridͷ಺෦ॲཧ
val rows = (scope.totalSize + nColumns - 1) / nColumns

LazyColumn(

) {

items(rows) { rowIndex ->

Row {

for (columnIndex in 0 until nColumns) {

/* ֤ΞΠςϜͷComposableΛݺͼग़͠ */

}

}

}

}
಺෦ͰLazyColumnΛ͍࣋ͬͯΔ

ʹ εΫϩʔϧͰ͖Δਖ਼ମ

10. LazyVerticalGridͷ಺෦ॲཧ
val rows = (scope.totalSize + nColumns - 1) / nColumns

LazyColumn(

) {

items(rows) { rowIndex ->

Row {

for (columnIndex in 0 until nColumns) {

/* ֤ΞΠςϜͷComposableΛݺͼग़͠ */

}

}

}

}
ҰߦҰߦΛRowʹͯ͠itemsͰ

ͦΕΛॎʹੵΜͰߦ͘ॲཧ

11. ͜ΕΛࢀߟʹ…

12. LazyVerticalGridΛࢀߟʹͨ͠ඇεΫϩʔϧ൛
val rows = (items.size + columns - 1) / columns

Column(

) {

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 LazyListScope.gridItems(

columns: Int,

items: List,

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