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

by Tachibana Kaoru

Slide 1

Slide 1 text

iOS10࣌୅ͷCollectionView࠷৽͔͍ͭ͜ͳ͠ 2016/08/20 iOSDC 2016 @TachibanaKaoru

Slide 2

Slide 2 text

ࣗݾ঺հ • @TachibanaKaoru • ϑϦʔϥϯεiOS Engineer • iOSDC ड෇୲౰ • ϘϧμϦϯά޷͖ • http://www.toyship.org/

Slide 3

Slide 3 text

Today’s Agenda • New Lifecycle of Cells • Cell Prefetch API • For Better Performance

Slide 4

Slide 4 text

New Lifecycle of Cells

Slide 5

Slide 5 text

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?

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Cell Lifecycle UICollectionViewͷηϧͷϥΠϑαΠΫϧΛ ෮शͯ͠Έ·͠ΐ͏ɻ

Slide 8

Slide 8 text

Cell Lifecycle UICollectionView - cellForItemAtIndexPath

Slide 9

Slide 9 text

Cell Lifecycle 1 UICollectionViewCell - init

Slide 10

Slide 10 text

Cell Lifecycle 1 UICollectionView - cellForItemAtIndexPath

Slide 11

Slide 11 text

Cell Lifecycle 2 1 UICollectionViewCell - init

Slide 12

Slide 12 text

Cell Lifecycle 2 1 UICollectionView - cellForItemAtIndexPath

Slide 13

Slide 13 text

Cell Lifecycle 2 3 1 UICollectionViewCell - init

Slide 14

Slide 14 text

Cell Lifecycle 2 3 4 1 UICollectionView - cellForItemAtIndexPath

Slide 15

Slide 15 text

Cell Lifecycle 2 3 4 5 1 UICollectionView - cellForItemAtIndexPath

Slide 16

Slide 16 text

Cell Lifecycle 2 3 4 5 6 1 UICollectionView - cellForItemAtIndexPath

Slide 17

Slide 17 text

Cell Lifecycle 2 3 4 5 6 1

Slide 18

Slide 18 text

Cell Lifecycle 2 3 4 5 6 1 UICollectionView - cellForItemAtIndexPath

Slide 19

Slide 19 text

Cell Lifecycle 2 3 4 5 6 1 7

Slide 20

Slide 20 text

Cell Lifecycle 2 3 4 5 6 1 7 UICollectionView - cellForItemAtIndexPath

Slide 21

Slide 21 text

Cell Lifecycle 2 3 4 5 6 7 UICollectionViewCell - prepareForReuse ࠷ॳʹੜ੒͞ΕͨηϧΛ queueʹ͍Εͯ࠶ར༻

Slide 22

Slide 22 text

Cell Lifecycle 2 3 4 5 6 7 ηϧ͸͍ͭ΋7ݸʂ

Slide 23

Slide 23 text

Cell Lifecycle 2 3 4 5 6 7 ͜Ε͕ reuse Λ΋ͱʹͨ͠ CellͷLifecycleͰ͢ɻ

Slide 24

Slide 24 text

Cell Lifecycle 2 3 4 5 6 7 iOS10Ͱ͸ͳʹ͕มΘͬͨͷ͔ͱ͍͏ͱ……

Slide 25

Slide 25 text

Cell Lifecycle 2 3 4 5 6 8 7 iOS10Ͱ͸ͳʹ͕มΘͬͨͷ͔ͱ͍͏ͱ……

Slide 26

Slide 26 text

Cell Lifecycle 2 3 4 5 6 8 7 iOS10Ͱ͸ͳʹ͕มΘͬͨͷ͔ͱ͍͏ͱ…… 9 10

Slide 27

Slide 27 text

Cell Lifecycle 2 3 4 5 6 8 7 queueʹετΞ͞ΕΔCellͷ਺͕૿͑·ͨ͠ʂ 9 10

Slide 28

Slide 28 text

Cell Lifecycle 2 3 4 5 6 8 7 9 10 ࠓ·Ͱ͸ɺը໘ʹදࣔ͞ΕΔ௚લʹηϧ͕ੜ੒͞Εͯ ͍ͨͷͰɺͦͷॲཧ͕஗ΕΔͱεΫϩʔϧॲཧʹӨڹ ͕Ͱ͍ͯ·ͨ͠ queueͷCellͷ਺͕૿͑ͨ͜ͱͰੜ੒ॲཧ͕஗ΕΔ͜ͱ Մೳੑ͕௿͘ͳΓεΫϩʔϧͷύϑΥʔϚϯε͕Α͘ ͳΓ·ͨ͠

Slide 29

Slide 29 text

Cell Lifecycle 2 3 4 5 6 8 7 ͜͜ͰcellForItemAtIndexPath ͜͜ͰwillDisplay iOS9Ͱ͸……

Slide 30

Slide 30 text

Cell Lifecycle 2 3 4 5 6 8 7 9 10 ͜͜ͰcellForItemAtIndexPath ͜͜ͰwillDisplay iOS10Ͱ͸……

Slide 31

Slide 31 text

cellForItemAtIndexPathͱwillDisplay • ϥΠϑαΠΫϧ͕มΘͬͨ͜ͱͰɺ cellForItemAtIndexPathͱwillDisplayͷִ͕ؒͷͼͨ • ྫ͑͹ɺηϧͷੜ੒࣌ʹΞχϝʔγϣϯ։࢝τϦΨʔ Λ͍Ε͍ͯΔ৔߹ɺiOS9·Ͱ͸ɺηϧ͕ը໘ʹεΫ ϩʔϧ͢Δͱ΄΅ಉ࣌ʹΞχϝʔγγϣϯ͕։࢝͞Ε ͍ͯͨ • iOS10Ͱ͸ը໘ʹηϧ͕ը໘ʹεΫϩʔϧͨ͠ͱ͖ʹ ͸Ξχϝʔγγϣϯ͕ऴྃͯ͠͠·͏

Slide 32

Slide 32 text

ηϧͷ਺͕૿͑ͨͷͰ • εΫϩʔϧॲཧ͕५׈ʹͳͬͨʢಛʹҰ౓ʹੜ੒͢Δη ϧͷ਺͕ଟ͍UICollectionViewʣ • ηϧଘࡏ਺͕૿͑ͨͷͰɺϝϞϦ࢖༻ྔ͸૿͑ͨɻ

Slide 33

Slide 33 text

Cell Prefetch API

Slide 34

Slide 34 text

prefetch cell API • iOS 10͔ΒɺCellͷ prefetch API΋༻ҙ͞Ε·ͨ͠ɻ • Cell͕දࣔ͞ΕΔલʹɺը૾μ΢ϯϩʔυ΍࣌ؒͷ͔͔ ΔॲཧΛ࣮૷͢Δ͜ͱ͕Ͱ͖·͢ɻ

Slide 35

Slide 35 text

UITableView/UIColletcionView datasource delegate

Slide 36

Slide 36 text

UITableView/UIColletcionView datasource delegate prefetchDatasource

Slide 37

Slide 37 text

prefetch API func collectionView(_ collectionView: UICollectionView, prefetchItemsAt indexPaths: [IndexPath]) func collectionView(_ collectionView: UICollectionView, cancelPrefetchingForItemsAt indexPaths: [IndexPath])

Slide 38

Slide 38 text

how to prefetch ը໘ʹදࣔ͞Ε͍ͯΔηϧʢ1ը໘෼ʣ iOS10ͷϥΠϑαΠΫϧมߋͰ૿͑ͨ෼ʢ0.5ը໘෼ʣ prefetch͞ΕΔηϧʢ1ը໘෼ʣ

Slide 39

Slide 39 text

Cancel prefetch • prefetch͕Ωϟϯηϧ͞ΕΔ͜ͱ΋͋Δɻ • εΫϩʔϧํ޲͕มԽͯ͠ɺදࣔ͠Α͏ͱ͍ͯͨ͠η ϧ͕දࣔ͞Εͳ͘ͳͬͨΓͨ࣌͠ʹݺ͹ΕΔɻʢͱݴ ΘΕ͍ͯΔʣ • ͨͩݱঢ়Ͱ͸Α͹Ε͍ͯͳ͍Α͏ͳؾ΋……ɻ

Slide 40

Slide 40 text

For Better Performance

Slide 41

Slide 41 text

UICollectionView/UITableView Performance • iOS10ͷηϧͷϥΠϑαΠΫϧมߋͰɺUICollectionView/ UITableViewͷεΫϩʔϧ࣌ͷύϑΥʔϚϯε͸֨ஈʹΑ ͘ͳΓ·ͨ͠ɻ • ͨͩɺiOS9ҎԼͷϢʔβʔʹ͸ద༻͞Ε·ͤΜɻ • ΑΓΑ͍ύϑΥʔϚϯεΛಘΔʹ͸Ͳ͏͢Ε͹͍͍Ͱ ͠ΐ͏͔ɻ

Slide 42

Slide 42 text

جຊͰ͕͢…… • جຊతʹUICollectionViewΑΓUITableViewͷ΄͏͕ޮ཰ ͕Α͍ͷͰɺ1 Columnݻఆͷ৔߹ʹ͸UITableViewΛ࢖ ͏ํ͕͓͢͢Ίɻ • ηϧαΠζ͕ݻఆͩͱ౰વߴ଎ɻ

Slide 43

Slide 43 text

ৗࣝͰ͕͢…… • ࣌ؒͷ͔͔Δॲཧ͸όοΫάϥ΢ϯυεϨουͰɻ • ͨͩ͠UIKitΛѻ͏ॲཧ͸ϝΠϯεϨουͰߦ͍·͠ΐ ͏ɻ

Slide 44

Slide 44 text

ηϧͷॲཧϑϩʔΛ૝ఆͨ͠ߴ଎Խ • ॏ͍ॲཧ͸ cellForItemAtIndexPathͰߦ͏ɻ • willDisplayCellɺdidEndDisplayingCellͰߦ͏ͱɺදࣔ࣌ͷ εΫϩʔϧ଎౓Λ્֐͢ΔՄೳੑ͕͋Δɻ

Slide 45

Slide 45 text

ඳըॲཧͷߴ଎Խ • Blend-LayerॲཧΛͳΔ΂͘࢖Θͳ͍ɻ • ಁաpngϑΝΠϧ΍clearColorഎܠΛ࢖Θͳ͍ɻ • Shadow΍cornerRadiusΛ࢖Θͳ͍ɻ Shadow CornerRadius

Slide 46

Slide 46 text

Blend-LayerॲཧΛγϛϡϨʔλʔͰ֬ೝ

Slide 47

Slide 47 text

Blend-LayerॲཧΛγϛϡϨʔλʔͰ֬ೝ • ੺ΤϦΞɿBlend-LayerॲཧΛ࢖ͬͯඳը͍ͯ͠Δ • ྘ΤϦΞɿBlend-LayerॲཧΛ࢖Θͣʹඳը͍ͯ͠Δ

Slide 48

Slide 48 text

Blend-LayerॲཧΛγϛϡϨʔλʔͰ֬ೝ • ͳΔ΂͘੺͍෦෼ΛݮΒ͠ɺඳըॲཧΛܰ͘͠·͠ΐ͏ɻ

Slide 49

Slide 49 text

ಁաpngϑΝΠϧΛ࢖Θͳ͍ • ృΓͷഎܠʹಁաը૾Λ දࣔ͢Δ৔߹

Slide 50

Slide 50 text

ಁաpngϑΝΠϧΛ࢖Θͳ͍ • ௨ৗ͸ಁաpngΛഎܠͷ ্ʹ഑ஔ͠·͕͢……

Slide 51

Slide 51 text

ಁաpngϑΝΠϧΛ࢖Θͳ͍ • ը૾ʹഎܠ৭ΛؚΊΔ͜ ͱͰɺBlend-LayerॲཧΛ ࢖Θͣඳը଎౓Λ͋͛Δ ͜ͱ͕Ͱ͖·͢ɻ

Slide 52

Slide 52 text

clearColorഎܠΛ࢖Θͳ͍ • ృΓͷഎܠͷ্ʹ UILabelͰςΩετΛදࣔ ͢Δ৔߹

Slide 53

Slide 53 text

clearColorഎܠΛ࢖Θͳ͍ • ௨ৗ͸textColorΛ clearColorͱ͠ɺಁա͞ ͤ·͕͢……

Slide 54

Slide 54 text

clearColorഎܠΛ࢖Θͳ͍ • UILabelͷഎܠ৭ΛޙΖ ͷഎܠʹ͋ΘͤΔ͜ͱͰ Blend-LayerॲཧΛ࢖Θ ͣඳը଎౓Λ͋͛Δ͜ͱ ͕Ͱ͖·͢ɻ

Slide 55

Slide 55 text

Viewͷؙ֯΍γϟυ΢ॲཧΛආ͚Δ • Viewͷؙ֯΍γϟυ΢ॲཧΛCALayerͰॻ͘ͷͰ͸ͳ͘ ʮؙ֯ʹͨ͠ը૾ʯ΍ʮγϟυ΢·Ͱؚ·Εͨը૾ʯΛ ༻ҙͯ͠΋Β͏ɻ • ҆қʹʮؙ֯ͱ͔ίʔυͰॻ͚·͢Αʯͱ͍Θͣʹɺσ βΠφʔ͞Μʹશ෦ύʔπΛ༻ҙͯ͠΋Β͏ͷ͕ύϑΥʔ ϚϯεΞοϓͷಓͰ͢ɻ

Slide 56

Slide 56 text

·ͱΊ • iOS10ͰมΘͬͨCellͷϥΠϑαΠΫϧΛཧղ͠Α͏ • prefetch࢖ͬͯϢʔβʔମݧ͋͛Α͏ • ඳըܥॲཧΛݟ௚͢͜ͱʹΑͬͯɺΑΓύϑΥʔϚϯε Λ͋͛Α͏