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

61a68b2172503ecdf7a7f7757df56071?s=47 Tachibana Kaoru
August 20, 2016
9.3k

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

61a68b2172503ecdf7a7f7757df56071?s=128

Tachibana Kaoru

August 20, 2016
Tweet

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