Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

aosa4054
November 17, 2021

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

aosa4054

November 17, 2021
Tweet

More Decks by aosa4054

Other Decks in Programming

Transcript

  1. LazyVerticalGridʹֶͿ

    ඇεΫϩʔϥϒϧͳάϦου
    ͷ࡞Γํ
    potatotips #76
    Shota Ara

    View full-size slide

  2. LazyVerticalGrid
    • Jetpack Composeʹͯར༻Ͱ͖Δ
    άϦουදࣔͷComposable


    • σϑΥϧτͰεΫϩʔϧʹରԠ

    View full-size slide

  3. LazyVerticalGridͷ࢖͍ʹ͘͞
    • ൃද࣌఺ʢ2021/11/17ʣͰExperimental


    • LazyVerticalGridࣗମ͕εΫϩʔϥϒϧͳComposableͰ͋Δ

    View full-size slide

  4. LazyVerticalGridͷ

    ࢖͍ʹ͘͞
    LazyVerticalGridࣗମ͕εΫϩʔϧ

    ՄೳͳͷͰɺ

    ϦετͷҰ෦͕άϦου

    ͳUIͷදݱ͕Ͱ͖ͳ͍ɻ

    View full-size slide

  5. LazyVerticalGridΛࢀߟʹComposableΛ࡞Δ
    • Experimentalͱ͸͍͑ެࣜͷࢀߟ࣮૷͕͋Δɻ


    • ComposableͳͲஔ͖׵͑Մೳͳؔ਺ʹ͓͚ͯ͠͹

    ΋͠StableͳAPI͕௥Ճ͞Εͨͱ͖͸ͦΕΛஔ͖׵͑Δ͚ͩͰྑ͍ɻ

    View full-size slide

  6. LazyVerticalGridͷ಺෦ॲཧ

    View full-size slide

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


    LazyColumn(


    /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */


    ) {


    items(rows) { rowIndex ->


    Row {


    for (columnIndex in 0 until nColumns) {


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


    }


    }


    }


    }

    View full-size slide

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


    LazyColumn(


    /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */


    ) {


    items(rows) { rowIndex ->


    Row {


    for (columnIndex in 0 until nColumns) {


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


    }


    }


    }


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

    ߦ਺Λܭࢉ͢Δ

    View full-size slide

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


    LazyColumn(


    /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */


    ) {


    items(rows) { rowIndex ->


    Row {


    for (columnIndex in 0 until nColumns) {


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


    }


    }


    }


    }
    ಺෦ͰLazyColumnΛ͍࣋ͬͯΔ

    ʹ εΫϩʔϧͰ͖Δਖ਼ମ

    View full-size slide

  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Ͱ

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

    View full-size slide

  11. ͜ΕΛࢀߟʹ…

    View full-size slide

  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Λݺͼग़͠ */


    }


    }


    }


    }

    View full-size slide

  13. αϯϓϧ࣮૷
    LazyColumn {


    item {


    NonScrollableGrid(


    column = 3,


    items = myItems


    ) {


    /* ֤ΞΠςϜͷComposable */


    }


    }


    }

    View full-size slide

  14. ໰୊఺
    LazyColumn {


    item {


    NonScrollableGrid(


    column = 3,


    items = (0..1000).toList()


    ) {


    /* ֤ΞΠςϜͷComposable */


    Log.d(“@@@”, “$it”)


    }


    }


    }

    View full-size slide

  15. ໰୊఺
    LazyColumn {


    item {


    NonScrollableGrid(


    column = 3,


    items = (0..1000).toList()


    ) {


    /* ֤ΞΠςϜͷComposable */


    Log.d(“@@@”, “$it”)


    }


    }


    }
    0…1000😇

    View full-size slide

  16. ໰୊఺
    LazyColumn {


    item {


    NonScrollableGrid(


    column = 3,


    items = (0..1000).toList()


    ) {


    /* ֤ΞΠςϜͷComposable */


    Log.d(“@@@”, “$it”)


    }


    }


    }
    item͕composableؔ਺

    ݺͼग़͠ͷ୯Ґ

    View full-size slide

  17. 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))


    }


    }


    }


    }


    }

    View full-size slide

  18. ໰୊఺
    LazyColumn {


    gridItems(


    column = 3,


    items = (0..1000).toList()


    ) {


    /* ֤ΞΠςϜͷComposable */


    Log.d(“@@@”, “$it”)


    }


    }

    View full-size slide

  19. ໰୊఺
    LazyColumn {


    gridItems(


    column = 3,


    items = (0..1000).toList()


    ) {


    /* ֤ΞΠςϜͷComposable */


    Log.d(“@@@”, “$it”)


    }


    }
    0…24

    View full-size slide

  20. ·ͱΊ
    • Jetpack Composeʹ͸άϦου഑ஔͷComposable͕༻ҙͯ͋͠Δɻ


    • ͨͩ͠࢖͍ʹ͍͘໘΋ɻ


    • ಺෦ίʔυ͸ൺֱతγϯϓϧͳͷͰ͜ΕΛࢀߟʹܨ͗ͷ࣮૷͕Մೳɻ


    • LazyColumnͷඳըͷ୯Ґ͸֤itemͰ͋Δɻ

    View full-size slide