iOS10時代のCollectionView最新つかいこなし

Transcript

1. iOS10࣌୅ͷCollectionView࠷৽͔͍ͭ͜ͳ͠ 2016/08/20 iOSDC 2016 @TachibanaKaoru
2. ࣗݾ঺հ • @TachibanaKaoru • ϑϦʔϥϯεiOS Engineer • iOSDC ड෇୲౰ • ϘϧμϦϯά޷͖ • http://www.toyship.org/
3. Today’s Agenda • New Lifecycle of Cells • Cell Prefetch API • For Better Performance
4. New Lifecycle of Cells
5. Cell Lifecycle cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell 10000 cells for 10000-row table?
6. Cell Lifecycle cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell 10000 cells for 10000-row table? x
7. Cell Lifecycle UICollectionViewͷηϧͷϥΠϑαΠΫϧΛ ෮शͯ͠Έ·͠ΐ͏ɻ
8. Cell Lifecycle UICollectionView - cellForItemAtIndexPath
9. Cell Lifecycle 1 UICollectionViewCell - init
10. Cell Lifecycle 1 UICollectionView - cellForItemAtIndexPath
11. Cell Lifecycle 2 1 UICollectionViewCell - init
12. Cell Lifecycle 2 1 UICollectionView - cellForItemAtIndexPath
13. Cell Lifecycle 2 3 1 UICollectionViewCell - init
14. Cell Lifecycle 2 3 4 1 UICollectionView - cellForItemAtIndexPath
15. Cell Lifecycle 2 3 4 5 1 UICollectionView - cellForItemAtIndexPath
16. Cell Lifecycle 2 3 4 5 6 1 UICollectionView - cellForItemAtIndexPath
17. Cell Lifecycle 2 3 4 5 6 1
18. Cell Lifecycle 2 3 4 5 6 1 UICollectionView - cellForItemAtIndexPath
19. Cell Lifecycle 2 3 4 5 6 1 7
20. Cell Lifecycle 2 3 4 5 6 1 7 UICollectionView - cellForItemAtIndexPath
21. Cell Lifecycle 2 3 4 5 6 7 UICollectionViewCell - prepareForReuse ࠷ॳʹੜ੒͞ΕͨηϧΛ queueʹ͍Εͯ࠶ར༻
22. Cell Lifecycle 2 3 4 5 6 7 ηϧ͸͍ͭ΋7ݸʂ
23. Cell Lifecycle 2 3 4 5 6 7 ͜Ε͕ reuse Λ΋ͱʹͨ͠ CellͷLifecycleͰ͢ɻ
24. Cell Lifecycle 2 3 4 5 6 7 iOS10Ͱ͸ͳʹ͕มΘͬͨͷ͔ͱ͍͏ͱ……
25. Cell Lifecycle 2 3 4 5 6 8 7 iOS10Ͱ͸ͳʹ͕มΘͬͨͷ͔ͱ͍͏ͱ……
26. Cell Lifecycle 2 3 4 5 6 8 7 iOS10Ͱ͸ͳʹ͕มΘͬͨͷ͔ͱ͍͏ͱ…… 9 10
27. Cell Lifecycle 2 3 4 5 6 8 7 queueʹετΞ͞ΕΔCellͷ਺͕૿͑·ͨ͠ʂ 9 10
28. Cell Lifecycle 2 3 4 5 6 8 7 9 10 ࠓ·Ͱ͸ɺը໘ʹදࣔ͞ΕΔ௚લʹηϧ͕ੜ੒͞Εͯ ͍ͨͷͰɺͦͷॲཧ͕஗ΕΔͱεΫϩʔϧॲཧʹӨڹ ͕Ͱ͍ͯ·ͨ͠ queueͷCellͷ਺͕૿͑ͨ͜ͱͰੜ੒ॲཧ͕஗ΕΔ͜ͱ Մೳੑ͕௿͘ͳΓεΫϩʔϧͷύϑΥʔϚϯε͕Α͘ ͳΓ·ͨ͠
29. Cell Lifecycle 2 3 4 5 6 8 7 ͜͜ͰcellForItemAtIndexPath ͜͜ͰwillDisplay iOS9Ͱ͸……
30. Cell Lifecycle 2 3 4 5 6 8 7 9 10 ͜͜ͰcellForItemAtIndexPath ͜͜ͰwillDisplay iOS10Ͱ͸……
31. cellForItemAtIndexPathͱwillDisplay • ϥΠϑαΠΫϧ͕มΘͬͨ͜ͱͰɺ cellForItemAtIndexPathͱwillDisplayͷִ͕ؒͷͼͨ • ྫ͑͹ɺηϧͷੜ੒࣌ʹΞχϝʔγϣϯ։࢝τϦΨʔ Λ͍Ε͍ͯΔ৔߹ɺiOS9·Ͱ͸ɺηϧ͕ը໘ʹεΫ ϩʔϧ͢Δͱ΄΅ಉ࣌ʹΞχϝʔγγϣϯ͕։࢝͞Ε ͍ͯͨ • iOS10Ͱ͸ը໘ʹηϧ͕ը໘ʹεΫϩʔϧͨ͠ͱ͖ʹ ͸Ξχϝʔγγϣϯ͕ऴྃͯ͠͠·͏
32. ηϧͷ਺͕૿͑ͨͷͰ • εΫϩʔϧॲཧ͕५׈ʹͳͬͨʢಛʹҰ౓ʹੜ੒͢Δη ϧͷ਺͕ଟ͍UICollectionViewʣ • ηϧଘࡏ਺͕૿͑ͨͷͰɺϝϞϦ࢖༻ྔ͸૿͑ͨɻ
33. Cell Prefetch API
34. prefetch cell API • iOS 10͔ΒɺCellͷ prefetch API΋༻ҙ͞Ε·ͨ͠ɻ • Cell͕දࣔ͞ΕΔલʹɺը૾μ΢ϯϩʔυ΍࣌ؒͷ͔͔ ΔॲཧΛ࣮૷͢Δ͜ͱ͕Ͱ͖·͢ɻ
35. UITableView/UIColletcionView datasource delegate
36. UITableView/UIColletcionView datasource delegate prefetchDatasource
37. prefetch API func collectionView(_ collectionView: UICollectionView, prefetchItemsAt indexPaths: [IndexPath]) func collectionView(_ collectionView: UICollectionView, cancelPrefetchingForItemsAt indexPaths: [IndexPath])
38. how to prefetch ը໘ʹදࣔ͞Ε͍ͯΔηϧʢ1ը໘෼ʣ iOS10ͷϥΠϑαΠΫϧมߋͰ૿͑ͨ෼ʢ0.5ը໘෼ʣ prefetch͞ΕΔηϧʢ1ը໘෼ʣ
39. Cancel prefetch • prefetch͕Ωϟϯηϧ͞ΕΔ͜ͱ΋͋Δɻ • εΫϩʔϧํ޲͕มԽͯ͠ɺදࣔ͠Α͏ͱ͍ͯͨ͠η ϧ͕දࣔ͞Εͳ͘ͳͬͨΓͨ࣌͠ʹݺ͹ΕΔɻʢͱݴ ΘΕ͍ͯΔʣ • ͨͩݱঢ়Ͱ͸Α͹Ε͍ͯͳ͍Α͏ͳؾ΋……ɻ
40. For Better Performance
41. UICollectionView/UITableView Performance • iOS10ͷηϧͷϥΠϑαΠΫϧมߋͰɺUICollectionView/ UITableViewͷεΫϩʔϧ࣌ͷύϑΥʔϚϯε͸֨ஈʹΑ ͘ͳΓ·ͨ͠ɻ • ͨͩɺiOS9ҎԼͷϢʔβʔʹ͸ద༻͞Ε·ͤΜɻ • ΑΓΑ͍ύϑΥʔϚϯεΛಘΔʹ͸Ͳ͏͢Ε͹͍͍Ͱ ͠ΐ͏͔ɻ
42. جຊͰ͕͢…… • جຊతʹUICollectionViewΑΓUITableViewͷ΄͏͕ޮ཰ ͕Α͍ͷͰɺ1 Columnݻఆͷ৔߹ʹ͸UITableViewΛ࢖ ͏ํ͕͓͢͢Ίɻ • ηϧαΠζ͕ݻఆͩͱ౰વߴ଎ɻ
43. ৗࣝͰ͕͢…… • ࣌ؒͷ͔͔Δॲཧ͸όοΫάϥ΢ϯυεϨουͰɻ • ͨͩ͠UIKitΛѻ͏ॲཧ͸ϝΠϯεϨουͰߦ͍·͠ΐ ͏ɻ
44. ηϧͷॲཧϑϩʔΛ૝ఆͨ͠ߴ଎Խ • ॏ͍ॲཧ͸ cellForItemAtIndexPathͰߦ͏ɻ • willDisplayCellɺdidEndDisplayingCellͰߦ͏ͱɺදࣔ࣌ͷ εΫϩʔϧ଎౓Λ્֐͢ΔՄೳੑ͕͋Δɻ
45. ඳըॲཧͷߴ଎Խ • Blend-LayerॲཧΛͳΔ΂͘࢖Θͳ͍ɻ • ಁաpngϑΝΠϧ΍clearColorഎܠΛ࢖Θͳ͍ɻ • Shadow΍cornerRadiusΛ࢖Θͳ͍ɻ Shadow CornerRadius
46. Blend-LayerॲཧΛγϛϡϨʔλʔͰ֬ೝ
47. Blend-LayerॲཧΛγϛϡϨʔλʔͰ֬ೝ • ੺ΤϦΞɿBlend-LayerॲཧΛ࢖ͬͯඳը͍ͯ͠Δ • ྘ΤϦΞɿBlend-LayerॲཧΛ࢖Θͣʹඳը͍ͯ͠Δ
48. Blend-LayerॲཧΛγϛϡϨʔλʔͰ֬ೝ • ͳΔ΂͘੺͍෦෼ΛݮΒ͠ɺඳըॲཧΛܰ͘͠·͠ΐ͏ɻ
49. ಁաpngϑΝΠϧΛ࢖Θͳ͍ • ృΓͷഎܠʹಁաը૾Λ දࣔ͢Δ৔߹
50. ಁաpngϑΝΠϧΛ࢖Θͳ͍ • ௨ৗ͸ಁաpngΛഎܠͷ ্ʹ഑ஔ͠·͕͢……
51. ಁաpngϑΝΠϧΛ࢖Θͳ͍ • ը૾ʹഎܠ৭ΛؚΊΔ͜ ͱͰɺBlend-LayerॲཧΛ ࢖Θͣඳը଎౓Λ͋͛Δ ͜ͱ͕Ͱ͖·͢ɻ
52. clearColorഎܠΛ࢖Θͳ͍ • ృΓͷഎܠͷ্ʹ UILabelͰςΩετΛදࣔ ͢Δ৔߹
53. clearColorഎܠΛ࢖Θͳ͍ • ௨ৗ͸textColorΛ clearColorͱ͠ɺಁա͞ ͤ·͕͢……
54. clearColorഎܠΛ࢖Θͳ͍ • UILabelͷഎܠ৭ΛޙΖ ͷഎܠʹ͋ΘͤΔ͜ͱͰ Blend-LayerॲཧΛ࢖Θ ͣඳը଎౓Λ͋͛Δ͜ͱ ͕Ͱ͖·͢ɻ
55. Viewͷؙ֯΍γϟυ΢ॲཧΛආ͚Δ • Viewͷؙ֯΍γϟυ΢ॲཧΛCALayerͰॻ͘ͷͰ͸ͳ͘ ʮؙ֯ʹͨ͠ը૾ʯ΍ʮγϟυ΢·Ͱؚ·Εͨը૾ʯΛ ༻ҙͯ͠΋Β͏ɻ • ҆қʹʮؙ֯ͱ͔ίʔυͰॻ͚·͢Αʯͱ͍Θͣʹɺσ βΠφʔ͞Μʹશ෦ύʔπΛ༻ҙͯ͠΋Β͏ͷ͕ύϑΥʔ ϚϯεΞοϓͷಓͰ͢ɻ
56. ·ͱΊ • iOS10ͰมΘͬͨCellͷϥΠϑαΠΫϧΛཧղ͠Α͏ • prefetch࢖ͬͯϢʔβʔମݧ͋͛Α͏ • ඳըܥॲཧΛݟ௚͢͜ͱʹΑͬͯɺΑΓύϑΥʔϚϯε Λ͋͛Α͏