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
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
540
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
個人軟體時代
ethanhuang13
0
330
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
For a Future-Friendly Web
brad_frost
180
9.9k
Scaling GitHub
holman
463
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
What's in a price? How to price your products and services
michaelherold
246
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Music & Morning Musume
bryan
46
6.8k
Writing Fast Ruby
sferik
628
62k
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