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
UICollectionView Introduction
Search
Maciej Oczko
July 26, 2014
Programming
0
62
UICollectionView Introduction
Presentation prepared for UICollectionView workshop in Warsaw.
Maciej Oczko
July 26, 2014
Tweet
Share
More Decks by Maciej Oczko
See All by Maciej Oczko
Dependency Injection on iOS
maciejoczko
1
120
Working with Legacy Code (Łódź)
maciejoczko
0
53
iOS TDD Workshop (Gdańsk)
maciejoczko
1
81
UICollectionView Basics and Flow Layout
maciejoczko
0
230
Working With Legacy Code - iOS TDD Workshop
maciejoczko
0
170
Depenedency Injection in iOS
maciejoczko
0
69
Other Decks in Programming
See All in Programming
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
630
GPUを計算資源として使おう!
primenumber
1
280
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
110
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
190
CDK引数設計道場100本ノック
badmintoncryer
2
520
PipeCDのプラグイン化で目指すところ
warashi
1
310
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
16k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
ソフトウェア設計とAI技術の活用
masuda220
PRO
23
6.4k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
310
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
RailsConf 2023
tenderlove
30
1.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building Adaptive Systems
keathley
43
2.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
840
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
980
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A designer walks into a library…
pauljervisheath
207
24k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Invisible Side of Design
smashingmag
301
51k
Transcript
UICollectionView
@maciejoczko #UICollectionViewWarsaw
INTRO
UICollectionView
UICollectionView + Flow Layout
iOS 6 Introduced in
UI != NS
UITableView New
UITableView Sibling of
UIScrollView UICollectionView UITableView
is mostly about UICollectionView
GRIDS
GRIDS
GRIDS
None
None
None
MORE GRIDS
None
None
None
None
OTHERS
None
None
UI
cell supplementary view decoration view
cell No predefined cell styles New way of creation Tied
to content
supplementary view Tied to data but separate from cells View
of a kind
decoration view Not tied to content
cell supplementary view decoration view recap
Layout UICollectionView
Layout animations
Layout transitions
Layout posi tion
Layout Subclassing
UICollectionViewLayoutAttributes
UICollectionViewLayoutAttributes frame
UICollectionViewLayoutAttributes frame alpha
UICollectionViewLayoutAttributes frame alpha zIndex
UICollectionViewLayoutAttributes frame alpha zIndex center
UICollectionViewLayoutAttributes frame alpha zIndex center size
UICollectionViewLayoutAttributes frame alpha zIndex center size hidden
UICollectionViewLayoutAttributes frame alpha zIndex center size hidden transform 3D
Layout animations recap transitions positioning subclassing
Collection
UICollectionView DataSource
DataSource collectionView:cellForItemAtIndexPath: collectionView:numberOfItemsInSection: collectionView:viewForSupplementaryElementOfKind: atIndexPath: numberOfSectionsInCollectionView:
DataSource collectionView:cellForItemAtIndexPath: collectionView:numberOfItemsInSection: collectionView:viewForSupplementaryElementOfKind: atIndexPath: numberOfSectionsInCollectionView:
collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; if (!cell) {
cell = . . . } // Configure the cell's content return cell; }
collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; if (!cell) {
cell = . . . } // Configure the cell's content return cell; }
collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; // Configure the
cell's content return cell; }
collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; // Configure the
cell's content return cell; }
collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID” forIndexPath:indexPath]; // Configure
the cell's content return cell; }
collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID” forIndexPath:indexPath]; // Configure
the cell's content return cell; }
[collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@“MY_CELL_ID”]
[collectionView registerClass:[MyCell class] forSupplementaryViewOfKind:@“MY_KIND” withReuseIdentifier:@“MY_CELL_ID”]
[collectionView registerClass:[MyCell class] forDecorationViewOfKind:@“MY_KIND”
The same pattern in UITableView since iOS6
View
UICollectionView Delegate
Delegate Layout transition callback Tracking the removal of views Menu
actions callbacks Selection & highlight tracking callbacks
Layout Flow
Layout Flow UICollectionView
Layout Line oriented
group of lines grid OR
Predefined supplementary views HEADER FOOTER
Customization
itemSize
minimum inter item spacing 10 10
minimum line spacing 10 10
scroll direction HORIZONTAL VERTICAL
HEADER FOOTER reference sizes
section insets
UICollectionViewFlowLayout instance properties setting values UICollectionViewDelegateFlowLayout
Powerful Flow Layout is
Thanks! @maciejoczko
CREDITS screenshots: native apps & AppStore color palette: electrikmonk http://www.colourlovers.com/palette/1930/cheer_up_emo_kid
Q&A
https://github.com/literator/ UICollectionViewWorkshop