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 Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Site-Speed That Sticks
csswizardry
4
400
The Language of Interfaces
destraynor
156
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Unsuck your backbone
ammeep
669
57k
Gamification - CAS2011
davidbonilla
80
5.2k
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ͬͯϢʔβʔମݧ͋͛Α͏ • ඳըܥॲཧΛݟ͢͜ͱʹΑͬͯɺΑΓύϑΥʔϚϯε Λ͋͛Α͏