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