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
240
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
Kiroで始めるAI-DLC
kaonash
2
620
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
testingを眺める
matumoto
1
140
Deep Dive into Kotlin Flow
jmatsu
1
360
rage against annotate_predecessor
junk0612
0
170
AI時代のUIはどこへ行く?
yusukebe
18
9k
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
旅行プランAIエージェント開発の裏側
ippo012
2
920
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
For a Future-Friendly Web
brad_frost
180
9.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Embracing the Ebb and Flow
colly
87
4.8k
Bash Introduction
62gerente
615
210k
Writing Fast Ruby
sferik
628
62k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Statistics for Hackers
jakevdp
799
220k
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