Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
iOS10時代のCollectionView最新つかいこなし
Search
Tachibana Kaoru
August 20, 2016
5
11k
iOS10時代のCollectionView最新つかいこなし
Tachibana Kaoru
August 20, 2016
Tweet
Share
More Decks by Tachibana Kaoru
See All by Tachibana Kaoru
GeoLocationAnchor and MKTileOverlay
toyship
0
250
Custom Group Activities
toyship
3
1.2k
Synchronized iPhones, Again!
toyship
2
1.3k
ARKit4.pdf
toyship
1
2k
Custom Gesture Recognizer on iOS
toyship
3
1.1k
HEVC Video with Alpha Channel
toyship
1
990
RealityKit & Reality Composer
toyship
3
410
ARKit3
toyship
5
6.8k
UIViewPropertyAnimator and Easing
toyship
2
820
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Designing with Data
zakiwarfel
95
4.8k
Rails Girls Zürich Keynote
gr2m
91
13k
Building an army of robots
kneath
300
41k
A Philosophy of Restraint
colly
196
16k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Designing for Performance
lara
601
67k
KATA
mclloyd
14
12k
Faster Mobile Websites
deanohume
298
30k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Transcript
iOS10࣌ͷCollectionView࠷৽͔͍ͭ͜ͳ͠ 2016/08/20 iOSDC 2016 @TachibanaKaoru
ࣗݾհ • @TachibanaKaoru • ϑϦʔϥϯεiOS Engineer • iOSDC ड୲ •
ϘϧμϦϯά͖ • http://www.toyship.org/
Today’s Agenda • New Lifecycle of Cells • Cell Prefetch
API • For Better Performance
New Lifecycle of Cells
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?
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
Cell Lifecycle UICollectionViewͷηϧͷϥΠϑαΠΫϧΛ ෮शͯ͠Έ·͠ΐ͏ɻ
Cell Lifecycle UICollectionView - cellForItemAtIndexPath
Cell Lifecycle 1 UICollectionViewCell - init
Cell Lifecycle 1 UICollectionView - cellForItemAtIndexPath
Cell Lifecycle 2 1 UICollectionViewCell - init
Cell Lifecycle 2 1 UICollectionView - cellForItemAtIndexPath
Cell Lifecycle 2 3 1 UICollectionViewCell - init
Cell Lifecycle 2 3 4 1 UICollectionView - cellForItemAtIndexPath
Cell Lifecycle 2 3 4 5 1 UICollectionView - cellForItemAtIndexPath
Cell Lifecycle 2 3 4 5 6 1 UICollectionView -
cellForItemAtIndexPath
Cell Lifecycle 2 3 4 5 6 1
Cell Lifecycle 2 3 4 5 6 1 UICollectionView -
cellForItemAtIndexPath
Cell Lifecycle 2 3 4 5 6 1 7
Cell Lifecycle 2 3 4 5 6 1 7 UICollectionView
- cellForItemAtIndexPath
Cell Lifecycle 2 3 4 5 6 7 UICollectionViewCell -
prepareForReuse ࠷ॳʹੜ͞ΕͨηϧΛ queueʹ͍Εͯ࠶ར༻
Cell Lifecycle 2 3 4 5 6 7 ηϧ͍ͭ7ݸʂ
Cell Lifecycle 2 3 4 5 6 7 ͜Ε͕ reuse
Λͱʹͨ͠ CellͷLifecycleͰ͢ɻ
Cell Lifecycle 2 3 4 5 6 7 iOS10Ͱͳʹ͕มΘͬͨͷ͔ͱ͍͏ͱ……
Cell Lifecycle 2 3 4 5 6 8 7 iOS10Ͱͳʹ͕มΘͬͨͷ͔ͱ͍͏ͱ……
Cell Lifecycle 2 3 4 5 6 8 7 iOS10Ͱͳʹ͕มΘͬͨͷ͔ͱ͍͏ͱ……
9 10
Cell Lifecycle 2 3 4 5 6 8 7 queueʹετΞ͞ΕΔCellͷ͕૿͑·ͨ͠ʂ
9 10
Cell Lifecycle 2 3 4 5 6 8 7 9
10 ࠓ·Ͱɺը໘ʹදࣔ͞ΕΔલʹηϧ͕ੜ͞Εͯ ͍ͨͷͰɺͦͷॲཧ͕ΕΔͱεΫϩʔϧॲཧʹӨڹ ͕Ͱ͍ͯ·ͨ͠ queueͷCellͷ͕૿͑ͨ͜ͱͰੜॲཧ͕ΕΔ͜ͱ Մೳੑ͕͘ͳΓεΫϩʔϧͷύϑΥʔϚϯε͕Α͘ ͳΓ·ͨ͠
Cell Lifecycle 2 3 4 5 6 8 7 ͜͜ͰcellForItemAtIndexPath
͜͜ͰwillDisplay iOS9Ͱ……
Cell Lifecycle 2 3 4 5 6 8 7 9
10 ͜͜ͰcellForItemAtIndexPath ͜͜ͰwillDisplay iOS10Ͱ……
cellForItemAtIndexPathͱwillDisplay • ϥΠϑαΠΫϧ͕มΘͬͨ͜ͱͰɺ cellForItemAtIndexPathͱwillDisplayͷִ͕ؒͷͼͨ • ྫ͑ɺηϧͷੜ࣌ʹΞχϝʔγϣϯ։࢝τϦΨʔ Λ͍Ε͍ͯΔ߹ɺiOS9·Ͱɺηϧ͕ը໘ʹεΫ ϩʔϧ͢Δͱ΄΅ಉ࣌ʹΞχϝʔγγϣϯ͕։࢝͞Ε ͍ͯͨ •
iOS10Ͱը໘ʹηϧ͕ը໘ʹεΫϩʔϧͨ͠ͱ͖ʹ Ξχϝʔγγϣϯ͕ऴྃͯ͠͠·͏
ηϧͷ͕૿͑ͨͷͰ • εΫϩʔϧॲཧ͕५ʹͳͬͨʢಛʹҰʹੜ͢Δη ϧͷ͕ଟ͍UICollectionViewʣ • ηϧଘࡏ͕૿͑ͨͷͰɺϝϞϦ༻ྔ૿͑ͨɻ
Cell Prefetch API
prefetch cell API • iOS 10͔ΒɺCellͷ prefetch API༻ҙ͞Ε·ͨ͠ɻ • Cell͕දࣔ͞ΕΔલʹɺը૾μϯϩʔυ࣌ؒͷ͔͔
ΔॲཧΛ࣮͢Δ͜ͱ͕Ͱ͖·͢ɻ
UITableView/UIColletcionView datasource delegate
UITableView/UIColletcionView datasource delegate prefetchDatasource
prefetch API func collectionView(_ collectionView: UICollectionView, prefetchItemsAt indexPaths: [IndexPath]) func
collectionView(_ collectionView: UICollectionView, cancelPrefetchingForItemsAt indexPaths: [IndexPath])
how to prefetch ը໘ʹදࣔ͞Ε͍ͯΔηϧʢ1ը໘ʣ iOS10ͷϥΠϑαΠΫϧมߋͰ૿͑ͨʢ0.5ը໘ʣ prefetch͞ΕΔηϧʢ1ը໘ʣ
Cancel prefetch • prefetch͕Ωϟϯηϧ͞ΕΔ͜ͱ͋Δɻ • εΫϩʔϧํ͕มԽͯ͠ɺදࣔ͠Α͏ͱ͍ͯͨ͠η ϧ͕දࣔ͞Εͳ͘ͳͬͨΓͨ࣌͠ʹݺΕΔɻʢͱݴ ΘΕ͍ͯΔʣ • ͨͩݱঢ়ͰΑΕ͍ͯͳ͍Α͏ͳؾ……ɻ
For Better Performance
UICollectionView/UITableView Performance • iOS10ͷηϧͷϥΠϑαΠΫϧมߋͰɺUICollectionView/ UITableViewͷεΫϩʔϧ࣌ͷύϑΥʔϚϯε֨ஈʹΑ ͘ͳΓ·ͨ͠ɻ • ͨͩɺiOS9ҎԼͷϢʔβʔʹద༻͞Ε·ͤΜɻ • ΑΓΑ͍ύϑΥʔϚϯεΛಘΔʹͲ͏͢Ε͍͍Ͱ
͠ΐ͏͔ɻ
جຊͰ͕͢…… • جຊతʹUICollectionViewΑΓUITableViewͷ΄͏͕ޮ ͕Α͍ͷͰɺ1 Columnݻఆͷ߹ʹUITableViewΛ ͏ํ͕͓͢͢Ίɻ • ηϧαΠζ͕ݻఆͩͱવߴɻ
ৗࣝͰ͕͢…… • ࣌ؒͷ͔͔ΔॲཧόοΫάϥϯυεϨουͰɻ • ͨͩ͠UIKitΛѻ͏ॲཧϝΠϯεϨουͰߦ͍·͠ΐ ͏ɻ
ηϧͷॲཧϑϩʔΛఆͨ͠ߴԽ • ॏ͍ॲཧ cellForItemAtIndexPathͰߦ͏ɻ • willDisplayCellɺdidEndDisplayingCellͰߦ͏ͱɺදࣔ࣌ͷ εΫϩʔϧΛ્͢ΔՄೳੑ͕͋Δɻ
ඳըॲཧͷߴԽ • Blend-LayerॲཧΛͳΔ͘Θͳ͍ɻ • ಁաpngϑΝΠϧclearColorഎܠΛΘͳ͍ɻ • ShadowcornerRadiusΛΘͳ͍ɻ Shadow CornerRadius
Blend-LayerॲཧΛγϛϡϨʔλʔͰ֬ೝ
Blend-LayerॲཧΛγϛϡϨʔλʔͰ֬ೝ • ΤϦΞɿBlend-LayerॲཧΛͬͯඳը͍ͯ͠Δ • ΤϦΞɿBlend-LayerॲཧΛΘͣʹඳը͍ͯ͠Δ
Blend-LayerॲཧΛγϛϡϨʔλʔͰ֬ೝ • ͳΔ͍͘෦ΛݮΒ͠ɺඳըॲཧΛܰ͘͠·͠ΐ͏ɻ
ಁաpngϑΝΠϧΛΘͳ͍ • ృΓͷഎܠʹಁաը૾Λ දࣔ͢Δ߹
ಁաpngϑΝΠϧΛΘͳ͍ • ௨ৗಁաpngΛഎܠͷ ্ʹஔ͠·͕͢……
ಁաpngϑΝΠϧΛΘͳ͍ • ը૾ʹഎܠ৭ΛؚΊΔ͜ ͱͰɺBlend-LayerॲཧΛ ΘͣඳըΛ͋͛Δ ͜ͱ͕Ͱ͖·͢ɻ
clearColorഎܠΛΘͳ͍ • ృΓͷഎܠͷ্ʹ UILabelͰςΩετΛදࣔ ͢Δ߹
clearColorഎܠΛΘͳ͍ • ௨ৗtextColorΛ clearColorͱ͠ɺಁա͞ ͤ·͕͢……
clearColorഎܠΛΘͳ͍ • UILabelͷഎܠ৭ΛޙΖ ͷഎܠʹ͋ΘͤΔ͜ͱͰ Blend-LayerॲཧΛΘ ͣඳըΛ͋͛Δ͜ͱ ͕Ͱ͖·͢ɻ
Viewͷؙ֯γϟυॲཧΛආ͚Δ • Viewͷؙ֯γϟυॲཧΛCALayerͰॻ͘ͷͰͳ͘ ʮؙ֯ʹͨ͠ը૾ʯʮγϟυ·Ͱؚ·Εͨը૾ʯΛ ༻ҙͯ͠Β͏ɻ • ҆қʹʮؙ֯ͱ͔ίʔυͰॻ͚·͢Αʯͱ͍Θͣʹɺσ βΠφʔ͞Μʹશ෦ύʔπΛ༻ҙͯ͠Β͏ͷ͕ύϑΥʔ ϚϯεΞοϓͷಓͰ͢ɻ
·ͱΊ • iOS10ͰมΘͬͨCellͷϥΠϑαΠΫϧΛཧղ͠Α͏ • prefetchͬͯϢʔβʔମݧ͋͛Α͏ • ඳըܥॲཧΛݟ͢͜ͱʹΑͬͯɺΑΓύϑΥʔϚϯε Λ͋͛Α͏