Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
130
Working with Legacy Code (Łódź)
maciejoczko
0
54
iOS TDD Workshop (Gdańsk)
maciejoczko
1
81
UICollectionView Basics and Flow Layout
maciejoczko
0
240
Working With Legacy Code - iOS TDD Workshop
maciejoczko
0
170
Depenedency Injection in iOS
maciejoczko
0
70
Other Decks in Programming
See All in Programming
dotfiles 式年遷宮 令和最新版
masawada
1
760
愛される翻訳の秘訣
kishikawakatsumi
1
320
ViewファーストなRailsアプリ開発のたのしさ
sugiwe
0
450
新卒エンジニアのプルリクエスト with AI駆動
fukunaga2025
0
200
エディターってAIで操作できるんだぜ
kis9a
0
720
宅宅自以為的浪漫:跟 AI 一起為自己辦的研討會寫一個售票系統
eddie
0
500
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
zozotech
PRO
8
5.5k
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
210
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
mouson
0
100
TUIライブラリつくってみた / i-just-make-TUI-library
kazto
1
380
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
730
Why Kotlin? 電子カルテを Kotlin で開発する理由 / Why Kotlin? at Henry
agatan
2
7k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
A better future with KSS
kneath
240
18k
A Tale of Four Properties
chriscoyier
162
23k
Building Applications with DynamoDB
mza
96
6.8k
Side Projects
sachag
455
43k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Mobile First: as difficult as doing things right
swwweet
225
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
Facilitating Awesome Meetings
lara
57
6.7k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
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