Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UICollectionView Introduction

Avatar for Maciej Oczko Maciej Oczko
July 26, 2014
Programming
0
61

UICollectionView Introduction

Presentation prepared for UICollectionView workshop in Warsaw.
Avatar for Maciej Oczko

Maciej Oczko

July 26, 2014
Tweet

More Decks by Maciej Oczko

See All by Maciej Oczko
Dependency Injection on iOS
Avatar for Maciej Oczko maciejoczko
1
120
Working with Legacy Code (Łódź)
Avatar for Maciej Oczko maciejoczko
0
53
iOS TDD Workshop (Gdańsk)
Avatar for Maciej Oczko maciejoczko
1
81
UICollectionView Basics and Flow Layout
Avatar for Maciej Oczko maciejoczko
0
230
Working With Legacy Code - iOS TDD Workshop
Avatar for Maciej Oczko maciejoczko
0
170
Depenedency Injection in iOS
Avatar for Maciej Oczko maciejoczko
0
69

Other Decks in Programming

See All in Programming
状態と共に暮らす：ステートフルへの挑戦
Avatar for ypresto ypresto
3
1.2k
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
Avatar for r-kagaya rkaga
3
1.9k
Boast Code Party / RubyKaigi 2025 After Event
Avatar for はる lemonade_37
0
100
Instrumentsを使用した アプリのパフォーマンス向上方法
Avatar for hinakko hinakko
0
250
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
Avatar for hachi (Hayao Kimura) hayaokimura
5
1.1k
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
Avatar for Koki Senda thousanda
1
120
カウシェで Four Keys の改善を試みた理由
Avatar for ike ike002jp
1
140
Flutterでllama.cppをつかってローカルLLMを試してみた
Avatar for sakuraidayo sakuraidayo
0
150
ニーリーQAのこれまでとこれから
Avatar for Nealle nealle
2
810
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
Avatar for Mete Atamel meteatamel
0
110
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
Avatar for r-kagaya rkaga
4
1.4k
Rubyの!メソッドをちゃんと理解する
Avatar for Yuto Urushima alstrocrack
1
310

Featured

See All Featured
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
344
40k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
24
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
33k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
75
5.8k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.3k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
Building Applications with DynamoDB
Avatar for Matt Wood mza
94
6.4k

Transcript

  1. UICollectionView

  2. @maciejoczko #UICollectionViewWarsaw

  3. INTRO

  4. UICollectionView

  5. UICollectionView + Flow Layout

  6. iOS 6 Introduced in

  7. UI != NS

  8. UITableView New

  9. UITableView Sibling of

  10. UIScrollView UICollectionView UITableView

  11. is mostly about UICollectionView

  12. GRIDS

  13. GRIDS

  14. GRIDS

  15. None
  16. None
  17. None

  18. MORE GRIDS

  19. None
  20. None
  21. None
  22. None

  23. OTHERS

  24. None
  25. None

  26. UI

  27. cell supplementary view decoration view

  28. cell No predefined cell styles New way of creation Tied

    to content

  29. supplementary view Tied to data but separate from cells View

    of a kind

  30. decoration view Not tied to content

  31. cell supplementary view decoration view recap

  32. Layout UICollectionView

  33. Layout animations

  34. Layout transitions

  35. Layout posi tion

  36. Layout Subclassing

  37. UICollectionViewLayoutAttributes

  38. UICollectionViewLayoutAttributes frame

  39. UICollectionViewLayoutAttributes frame alpha

  40. UICollectionViewLayoutAttributes frame alpha zIndex

  41. UICollectionViewLayoutAttributes frame alpha zIndex center

  42. UICollectionViewLayoutAttributes frame alpha zIndex center size

  43. UICollectionViewLayoutAttributes frame alpha zIndex center size hidden

  44. UICollectionViewLayoutAttributes frame alpha zIndex center size hidden transform 3D

  45. Layout animations recap transitions positioning subclassing

  46. Collection

  47. UICollectionView DataSource

  48. DataSource collectionView:cellForItemAtIndexPath: collectionView:numberOfItemsInSection: collectionView:viewForSupplementaryElementOfKind: atIndexPath: numberOfSectionsInCollectionView:

  49. DataSource collectionView:cellForItemAtIndexPath: collectionView:numberOfItemsInSection: collectionView:viewForSupplementaryElementOfKind: atIndexPath: numberOfSectionsInCollectionView:

  50. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; if (!cell) {

    cell = . . . } // Configure the cell's content return cell; }

  51. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; if (!cell) {

    cell = . . . } // Configure the cell's content return cell; }

  52. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; // Configure the

    cell's content return cell; }

  53. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; // Configure the

    cell's content return cell; }

  54. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID” forIndexPath:indexPath]; // Configure

    the cell's content return cell; }

  55. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID” forIndexPath:indexPath]; // Configure

    the cell's content return cell; }

  56. [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@“MY_CELL_ID”]

  57. [collectionView registerClass:[MyCell class] forSupplementaryViewOfKind:@“MY_KIND” withReuseIdentifier:@“MY_CELL_ID”]

  58. [collectionView registerClass:[MyCell class] forDecorationViewOfKind:@“MY_KIND”

  59. The same pattern in UITableView since iOS6

  60. View

  61. UICollectionView Delegate

  62. Delegate Layout transition callback Tracking the removal of views Menu

    actions callbacks Selection & highlight tracking callbacks

  63. Layout Flow

  64. Layout Flow UICollectionView

  65. Layout Line oriented

  66. group of lines grid OR

  67. Predefined supplementary views HEADER FOOTER

  68. Customization

  69. itemSize

  70. minimum inter item spacing 10 10

  71. minimum line spacing 10 10

  72. scroll direction HORIZONTAL VERTICAL

  73. HEADER FOOTER reference sizes

  74. section insets

  75. UICollectionViewFlowLayout instance properties setting values UICollectionViewDelegateFlowLayout

  76. Powerful Flow Layout is

  77. Thanks! @maciejoczko

  78. CREDITS screenshots: native apps & AppStore color palette: electrikmonk http://www.colourlovers.com/palette/1930/cheer_up_emo_kid

    Q&A

  79. https://github.com/literator/ UICollectionViewWorkshop