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コーディングAgentとの向き合い方
eycjur
0
270
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
300
Reading Rails 1.0 Source Code
okuramasafumi
0
110
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
Rancher と Terraform
fufuhu
2
400
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
510
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
480
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
為你自己學 Python - 冷知識篇
eddie
1
350
Deep Dive into Kotlin Flow
jmatsu
1
330
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Code Review Best Practice
trishagee
70
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
How GitHub (no longer) Works
holman
315
140k
Rails Girls Zürich Keynote
gr2m
95
14k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing for humans not robots
tammielis
253
25k
Side Projects
sachag
455
43k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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