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
640
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
26
UIStackView Animation
hagmas
0
290
Other Decks in Programming
See All in Programming
Code Reviews
bkuhlmann
4
890
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
230
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
360
PostmanでAPIの動作確認が楽になった話
h455h1
0
160
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
480
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
240
Folding Cheat Sheet #3
philipschwarz
PRO
0
120
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
0
180
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
170
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
630
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Optimizing for Happiness
mojombo
370
69k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Become a Pro
speakerdeck
PRO
11
4.5k
Side Projects
sachag
451
41k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Design by the Numbers
sachag
274
18k
Gamification - CAS2011
davidbonilla
76
4.6k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
The Language of Interfaces
destraynor
151
23k
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