$30 off During Our Annual Pro Sale. View Details »

LazyColumnのitemがViewPortの中で占める領域の割合を知りたい

 LazyColumnのitemがViewPortの中で占める領域の割合を知りたい

Keishin Yokomaku

November 10, 2023
Tweet

More Decks by Keishin Yokomaku

Other Decks in Technology

Transcript

  1. LazyColumnͷitem͕ViewPortͷ
    தͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    Keishin Yokomaku (@KeithYokoma) / Giftmall, inc.
    Shibuya.apk #45

    View Slide

  2. ஌Γ͍ͨʂ
    Shibuya.apk #45

    View Slide

  3. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    ஌Γ͍ͨ͜ͱ
    100%
    n%
    m% 0%
    Shibuya.apk #45

    View Slide

  4. ஌Γ͍ͨʂ
    Shibuya.apk #45

    View Slide

  5. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    LazyListState ͰܭࢉͰ͖Δ
    ▸ ViewPort ͷେ͖͞
    ▸ LazyListState.layoutInfo.viewportSize Ͱऔಘ͢Δ
    ▸ ViewPort ಺ʹऩ·͍ͬͯΔ item ͷߴ͞
    ▸ LazyListItemInfo ͱ LazyListState.layoutInfo Λ૊Έ߹ΘͤΔ
    ▸ LazyListItemInfo ͷϦετ͸ ViewPort ಺ʹ͋Δ΋ͷ͔͠ೖ͍ͬͯͳ͍
    ▸ item ͕ը໘֎ʹ͋Δͱ͖͸ܭࢉ͠ͳͯ͘΋0%ͱ෼͔Δ
    Shibuya.apk #45

    View Slide

  6. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    ViewPort ಺ʹऩ·͍ͬͯΔ item ͷߴ͞
    ▸ ViewPort ʹऩ·͍ͬͯΔߴ͞ = ViewPort ʹ͋Δ item ͷԼ୺ͷ࠲ඪ - ্୺ͷ࠲ඪ
    Shibuya.apk #45

    View Slide

  7. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    ViewPort ಺ʹऩ·͍ͬͯΔ item ͷߴ͞
    ্୺
    Լ୺
    Shibuya.apk #45

    View Slide

  8. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    ViewPort ಺ʹऩ·͍ͬͯΔ item ͷߴ͞
    ▸ ্୺
    ▸ ViewPort ͦͷ΋ͷͷ offset ͱ item ͷ offset Ͱ্୺Λܭࢉ
    ▸ offset ͸ෛͷ஋ʹͳΓಘΔ͕ɺܭࢉ݁Ռ͸ෛʹͳΒͳ͍Α͏ʹௐ੔
    ▸ Լ୺
    ▸ ViewPort ͦͷ΋ͷͷ offset ͱɺitem શମͷ offset ͱߴ͞ͰԼ୺Λܭࢉ
    ▸ ͪ͜Β΋ offset ͸ෛͷ஋ʹͳΓಘΔ
    ▸ item ͕ ViewPort ΑΓ΋େ͖͍৔߹ɺ࠷େͷߴ͞͸ ViewPort ͷେ͖͞
    Shibuya.apk #45

    View Slide

  9. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    ViewPort ಺ʹऩ·͍ͬͯΔ item ͷߴ͞
    fun LazyListState.visibleHeight(itemInfo: LazyListItemInfo): Int {
    val start = (layoutInfo.viewportStartOffset + itemInfo.offset)
    .coerceAtLeast(0)
    val end = (itemInfo.offset + itemInfo.size - layoutInfo.viewportEndOffset)
    .coerceAtLeast(itemInfo.offset + itemInfo.size)
    .coerceAtMost(layoutInfo.viewportSize.height)
    return end - start
    }
    Shibuya.apk #45

    View Slide

  10. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    ViewPort ಺ʹ઎ΊΔ item ͷߴ͞ͷׂ߹
    fun LazyListState.calculateOccupationInViewport(position: Int): Float =
    calculateOccupationInViewport(listOf(position))
    fun LazyListState.calculateOccupationInViewport(positions: List): Float {
    val viewportSize = layoutInfo.viewportSize
    val totalTargetHeight = layoutInfo.visibleItemsInfo
    .filter { info -> positions.contains(info.index) }
    .sumOf { info -> visibleHeight(info) }
    return totalTargetHeight.toFloat() / viewportSize.height
    }
    Shibuya.apk #45

    View Slide

  11. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    ஫ҙ఺: stickyHeader Λ࢖͏࣌
    ▸ ׂ߹͕1.0fΛ௒͑Δ͜ͱ͕͋Δ
    ▸ ࣍ͷ৚݅Λຬͨ࣌͢
    ▸ ෳ਺ͷ item ͷߴ͞Ͱׂ߹Λܭࢉ͢Δ
    ▸ ViewPort ΑΓେ͖͍ item ͕ܭࢉʹ͸͍Δ
    ▸ item ʹॏͳ͍ͬͯΔ stickyHeader ΋ܭࢉʹೖΔͱ͖
    ▸ stickyHeader ͸ item ʹॏͶͯද͍ࣔͯ͠ΔͷͰɺ
    ॏͳΓͷ෦෼Λݮࢉ͠ͳ͍ͱ1.0fΛ௒͑ͯ͠·͏
    Shibuya.apk #45

    View Slide

  12. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    ஫ҙ఺: stickyHeader Λ࢖͏࣌
    LazyListItemInfo.index: 0
    LazyListItemInfo.index: 1
    LazyListItemInfo.index: 2

    Shibuya.apk #45

    View Slide

  13. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    ஫ҙ఺: stickyHeader Λ࢖͏࣌
    ▸ LazyListItemInfo.index ͷ஋
    ▸ stickyHeader ΋ item ΋͢΂ͯ·ͱΊͯ௨͠൪߸ʹͳΔ
    ▸ stickyHeader ΛܭࢉʹೖΕͨ͘ͳ͍ͱ͖
    ▸ stickyHeader ͱ෼͔Δ key Λઃఆ͢Δ
    ▸ ࣗ෼Ͱ stickyHeader ͕Կ൪໨ʹདྷΔ͔͓֮͑ͯ͘
    Shibuya.apk #45

    View Slide

  14. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    ஫ҙ఺: LazyListState ͷߋ৽ස౓
    ▸ LazyListState ͸͍͢͝੎͍Ͱߋ৽͞ΕΔ
    ▸ ࣍ͷ͍ͣΕ͔Ͱϥοϓͯ͠ద੾ͳස౓Ͱܭࢉ͢Δ
    ▸ derivedStateOf
    ▸ LaunchedEffect + snapshotFlow
    Shibuya.apk #45

    View Slide

  15. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ
    About me
    ▸ Keishin Yokomaku - @KeithYokoma
    ▸ GitHub / Twitter / Stack Over
    fl
    ow
    ▸ Giftmall, Inc. / Android App Engineer
    Shibuya.apk #45

    View Slide

  16. LazyColumnͷitem͕ViewPortͷ
    தͰ઎ΊΔྖҬͷఔ౓Λ஌Γ͍ͨ
    Keishin Yokomaku (@KeithYokoma) / Giftmall, inc.
    Shibuya.apk #45

    View Slide