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
12k
iOS10時代のCollectionView最新つかいこなし
Tachibana Kaoru
August 20, 2016
Tweet
Share
More Decks by Tachibana Kaoru
See All by Tachibana Kaoru
GeoLocationAnchor and MKTileOverlay
toyship
0
330
Custom Group Activities
toyship
3
1.4k
Synchronized iPhones, Again!
toyship
2
1.5k
ARKit4.pdf
toyship
1
2.2k
Custom Gesture Recognizer on iOS
toyship
3
1.3k
HEVC Video with Alpha Channel
toyship
1
1.2k
RealityKit & Reality Composer
toyship
3
590
ARKit3
toyship
4
7.3k
UIViewPropertyAnimator and Easing
toyship
2
1.1k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Navigating Team Friction
lara
187
15k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
How to train your dragon (web standard)
notwaldorf
96
6.1k
A designer walks into a library…
pauljervisheath
207
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Producing Creativity
orderedlist
PRO
346
40k
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ͬͯϢʔβʔମݧ͋͛Α͏ • ඳըܥॲཧΛݟ͢͜ͱʹΑͬͯɺΑΓύϑΥʔϚϯε Λ͋͛Α͏