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
310
Custom Group Activities
toyship
3
1.3k
Synchronized iPhones, Again!
toyship
2
1.4k
ARKit4.pdf
toyship
1
2.1k
Custom Gesture Recognizer on iOS
toyship
3
1.3k
HEVC Video with Alpha Channel
toyship
1
1.1k
RealityKit & Reality Composer
toyship
3
540
ARKit3
toyship
4
7.1k
UIViewPropertyAnimator and Easing
toyship
2
1k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
Statistics for Hackers
jakevdp
797
220k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Embracing the Ebb and Flow
colly
84
4.6k
The Invisible Side of Design
smashingmag
299
50k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Speed Design
sergeychernyshev
27
810
Bash Introduction
62gerente
611
210k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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ͬͯϢʔβʔମݧ͋͛Α͏ • ඳըܥॲཧΛݟ͢͜ͱʹΑͬͯɺΑΓύϑΥʔϚϯε Λ͋͛Α͏