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
760
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
43
UIStackView Animation
hagmas
0
360
Other Decks in Programming
See All in Programming
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1k
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
290
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
650
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
nash_efp
1
980
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
7.4k
組織で育むオブザーバビリティ
ryota_hnk
0
180
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
21
7.3k
CSC307 Lecture 09
javiergs
PRO
1
840
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
azukiazusa1
1
740
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.6k
CSC307 Lecture 07
javiergs
PRO
1
550
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
140
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
120
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
640
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
170
A Modern Web Designer's Workflow
chriscoyier
698
190k
30 Presentation Tips
portentint
PRO
1
220
Visualization
eitanlees
150
17k
Odyssey Design
rkendrick25
PRO
1
500
Everyday Curiosity
cassininazir
0
130
Speed Design
sergeychernyshev
33
1.5k
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