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࢖ͬͯϢʔβʔମݧ͋͛Α͏ • ඳըܥॲཧΛݟ௚͢͜ͱʹΑͬͯɺΑΓύϑΥʔϚϯε Λ͋͛Α͏