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

Transcript

1. LazyColumnͷitem͕ViewPortͷ தͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ Keishin Yokomaku (@KeithYokoma) / Giftmall, inc. Shibuya.apk #45
2. ஌Γ͍ͨʂ Shibuya.apk #45
3. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ ஌Γ͍ͨ͜ͱ 100% n% m% 0% Shibuya.apk #45
4. ஌Γ͍ͨʂ Shibuya.apk #45
5. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ LazyListState ͰܭࢉͰ͖Δ ▸ ViewPort ͷେ͖͞ ▸ LazyListState.layoutInfo.viewportSize Ͱऔಘ͢Δ ▸ ViewPort ಺ʹऩ·͍ͬͯΔ item ͷߴ͞ ▸ LazyListItemInfo ͱ LazyListState.layoutInfo Λ૊Έ߹ΘͤΔ ▸ LazyListItemInfo ͷϦετ͸ ViewPort ಺ʹ͋Δ΋ͷ͔͠ೖ͍ͬͯͳ͍ ▸ item ͕ը໘֎ʹ͋Δͱ͖͸ܭࢉ͠ͳͯ͘΋0%ͱ෼͔Δ Shibuya.apk #45
6. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ ViewPort ಺ʹऩ·͍ͬͯΔ item ͷߴ͞ ▸ ViewPort ʹऩ·͍ͬͯΔߴ͞ = ViewPort ʹ͋Δ item ͷԼ୺ͷ࠲ඪ - ্୺ͷ࠲ඪ Shibuya.apk #45
7. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ ViewPort ಺ʹऩ·͍ͬͯΔ item ͷߴ͞ ্୺ Լ୺ Shibuya.apk #45
8. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ ViewPort ಺ʹऩ·͍ͬͯΔ item ͷߴ͞ ▸ ্୺ ▸ ViewPort ͦͷ΋ͷͷ offset ͱ item ͷ offset Ͱ্୺Λܭࢉ ▸ offset ͸ෛͷ஋ʹͳΓಘΔ͕ɺܭࢉ݁Ռ͸ෛʹͳΒͳ͍Α͏ʹௐ੔ ▸ Լ୺ ▸ ViewPort ͦͷ΋ͷͷ offset ͱɺitem શମͷ offset ͱߴ͞ͰԼ୺Λܭࢉ ▸ ͪ͜Β΋ offset ͸ෛͷ஋ʹͳΓಘΔ ▸ item ͕ ViewPort ΑΓ΋େ͖͍৔߹ɺ࠷େͷߴ͞͸ ViewPort ͷେ͖͞ Shibuya.apk #45
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
10. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ ViewPort ಺ʹ઎ΊΔ item ͷߴ͞ͷׂ߹ fun LazyListState.calculateOccupationInViewport(position: Int): Float = calculateOccupationInViewport(listOf(position)) fun LazyListState.calculateOccupationInViewport(positions: List<Int>): 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
11. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ ஫ҙ఺: stickyHeader Λ࢖͏࣌ ▸ ׂ߹͕1.0fΛ௒͑Δ͜ͱ͕͋Δ ▸ ࣍ͷ৚݅Λຬͨ࣌͢ ▸ ෳ਺ͷ item ͷߴ͞Ͱׂ߹Λܭࢉ͢Δ ▸ ViewPort ΑΓେ͖͍ item ͕ܭࢉʹ͸͍Δ ▸ item ʹॏͳ͍ͬͯΔ stickyHeader ΋ܭࢉʹೖΔͱ͖ ▸ stickyHeader ͸ item ʹॏͶͯද͍ࣔͯ͠ΔͷͰɺ ॏͳΓͷ෦෼Λݮࢉ͠ͳ͍ͱ1.0fΛ௒͑ͯ͠·͏ Shibuya.apk #45
12. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ ஫ҙ఺: stickyHeader Λ࢖͏࣌ LazyListItemInfo.index: 0 LazyListItemInfo.index: 1 LazyListItemInfo.index: 2 … Shibuya.apk #45
13. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ ஫ҙ఺: stickyHeader Λ࢖͏࣌ ▸ LazyListItemInfo.index ͷ஋ ▸ stickyHeader ΋ item ΋͢΂ͯ·ͱΊͯ௨͠൪߸ʹͳΔ ▸ stickyHeader ΛܭࢉʹೖΕͨ͘ͳ͍ͱ͖ ▸ stickyHeader ͱ෼͔Δ key Λઃఆ͢Δ ▸ ࣗ෼Ͱ stickyHeader ͕Կ൪໨ʹདྷΔ͔͓֮͑ͯ͘ Shibuya.apk #45
14. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ ஫ҙ఺: LazyListState ͷߋ৽ස౓ ▸ LazyListState ͸͍͢͝੎͍Ͱߋ৽͞ΕΔ ▸ ࣍ͷ͍ͣΕ͔Ͱϥοϓͯ͠ద੾ͳස౓Ͱܭࢉ͢Δ ▸ derivedStateOf ▸ LaunchedEffect + snapshotFlow Shibuya.apk #45
15. LazyColumnͷitem͕ViewPortͷதͰ઎ΊΔྖҬͷׂ߹Λ஌Γ͍ͨ About me ▸ Keishin Yokomaku - @KeithYokoma ▸ GitHub / Twitter / Stack Over fl ow ▸ Giftmall, Inc. / Android App Engineer Shibuya.apk #45
16. LazyColumnͷitem͕ViewPortͷ தͰ઎ΊΔྖҬͷఔ౓Λ஌Γ͍ͨ Keishin Yokomaku (@KeithYokoma) / Giftmall, inc. Shibuya.apk #45