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

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