Speaker Deck
Sign in
Sign up
for free
iOS10時代のCollectionView最新つかいこなし
Tachibana Kaoru
August 20, 2016
5
9.2k
iOS10時代のCollectionView最新つかいこなし
Tachibana Kaoru
August 20, 2016
Tweet
Share
Want more?
toyship
3
410
toyship
1
340
toyship
3
220
reverentgeek
10
540
rmw
2
270
skipperchong
0
180
carmenhchung
6
350
keathley
6
220
productmarketing
3
310
clairelew
4
570
thoeni
1
170
jcasabona
4
250
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എܠΛΘͳ͍ɻ • ShadowcornerRadiusΛΘͳ͍ɻ 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ͬͯϢʔβʔମݧ͋͛Α͏ • ඳըܥॲཧΛݟ͢͜ͱʹΑͬͯɺΑΓύϑΥʔϚϯε Λ͋͛Α͏
Tachibana Kaoru
toyship
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
![prefetch API func collectionView(_ collectionView: UICollectionView, prefetchItemsAt indexPaths: [IndexPath]) func](https://files.speakerdeck.com/presentations/81c5e1843b08428a8bb3249510aeeb19/slide_36.jpg){kind=link}
