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
What's new in UICollectionView
Search
Masaki Haga
June 13, 2019
Programming
0
750
What's new in UICollectionView
Masaki Haga
June 13, 2019
Tweet
Share
More Decks by Masaki Haga
See All by Masaki Haga
Create “Dynamic” Feeling Transition
hagmas
0
39
UIStackView Animation
hagmas
0
350
Other Decks in Programming
See All in Programming
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
300
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
640
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
RDoc meets YARD
okuramasafumi
4
170
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
3.4k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Namespace and Its Future
tagomoris
6
710
Featured
See All Featured
Building an army of robots
kneath
306
46k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
How STYLIGHT went responsive
nonsquared
100
5.8k
We Have a Design System, Now What?
morganepeng
53
7.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Faster Mobile Websites
deanohume
309
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Statistics for Hackers
jakevdp
799
220k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
What’s new in UICollectionView Masaki Haga
~ iOS 12のUICollectionView - performBatchUpdate(_:completion:)を呼んでData不整合によりCrash - 親ViewControllerのViewのSizeに合わせたCellのSize指定が案外めんどくさい - 縦CollectionViewの中に横スクロールのCollectionViewを何個か入れたいが Scroll位置の保存などわりとめんどくさい
新しいUICollectionView - Data Source - Layout
Apple公式のコード Using Collection View Compositional Layouts and Diffable Data Sources
Data Source - [Old] UICollectionViewDataSource - reloadData() or performBatchUpdate(:_completion:) -
UICollectionViewDiffableDataSource & NSDiffableDataSourceSnapshot - apply() - collectionViewへの差分反映はFramework側でhandleしてもらえるようになった。
古いData Sourceの宣言 - Data Source ObjectをUICollectionViewDataSourceに準拠 - collectionViewのdatasourceにData Source Objectをset
- collectionView.reloadData()
新しいData Sourceの宣言 - UICollectionViewDiffableDataSourceをUICollectionViewとCellProviderを引数 に初期化する。(Delegate型ではなくClosure型のCallback) - State(NSDiffableDataSourceSnapshot)をapplyしてCollectionViewに反映 public typealias CellProvider
= (UICollectionView, IndexPath, ItemIdentifierType) -> UICollectionViewCell?
注意 - Snapshotに渡すSectionの値と、Itemの値はHashable - SnapshotはHashValueによって値の同一性を認識する。 - つまり、HashableのDefaultの実装だと、propertyの変更だけで違うItemであると 認識されてしまう。
こんなかんじ struct VideoCollection: Hashable { var title: String let videos:
[Video] let identifier = UUID() func hash(into hasher: inout Hasher) { hasher.combine(identifier) } }
SwiftUI - DifferenceUpdateがデフォルト - StateはHashableではなくIdentifiableに準拠する
Diffアルゴリズムはどこからくるのか UICollectionViewDiffableDataSourceの実装はわからないけれども、 Swift5.1からDiff関係のAPIが増えているのでおそらくそれらを使っているのでは。 Swift Evolution: Ordered Collection Diffing
New API - BidrectionalColleciton: difference(from:) - Swift Standard Library: CollectionDifference
- Foundation: NSOrderedCollectionDifference - _CollectionChanges
Layout - [Old] UICollectionViewFlowLayout + UICollectionViewDelegateFlowLayout - New APIs -
UICollectionViewCompositionalLayout - NSCollectionLayoutSection - NSCollectionLayoutGroup - NSCollectionLayoutItem - NSCollectionLayoutSize - Section > Group > Item
古いLayoutの宣言 - UICollectionViewFlowLayout もしくはCustom UICollectionViewLayout - Delegateからサイズ情報などを返す
新しいLayoutの宣言 - UICollectionViewCompositionalLayout - initの引数として、NSCollectionLayoutSectionか、SectionProviderというClosureを渡す。 public typealias UICollectionViewCompositionalLayoutSectionProvider = (Int,
NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? NSCollectionLayoutEnvironmentというので親CollectionViewの情報(ContentSize等)をとってくることができ る。SwiftUIでもGemetryReaderというのがあって、同じアプローチをとっているところが面白い。
Nested Collection View
Nested Collection View 縦スクロールの中の横スクロールが簡単に書けるようになった。 let section = NSCollectionLayoutSection(group: group) section.orthogonalScrollingBehavior
= .continuous UIKit側で_UICollectionViewOrthogonalScrollerEmbeddedScrollView的な ScrollViewを勝手にいれてくれる。 画面外から戻ってきてももとのContentOffsetが保存されている。
Reference - Advances in Collection View Layout - Advances in
UI Data Sources