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

a lighter reusable cell

Avatar for Pin-Shih Wang Pin-Shih Wang
October 01, 2012
Programming
0
59

a lighter reusable cell

for TableView & CollectionView

https://github.com/wpsteak/MVCTableViewExample

Avatar for Pin-Shih Wang

Pin-Shih Wang

October 01, 2012
Tweet

More Decks by Pin-Shih Wang

See All by Pin-Shih Wang
iOS Extension
Avatar for Pin-Shih Wang wpsteak
4
470
A tip for using magical record
Avatar for Pin-Shih Wang wpsteak
0
120
CI with Git Flow
Avatar for Pin-Shih Wang wpsteak
2
230
Test With Xcode Server
Avatar for Pin-Shih Wang wpsteak
0
76

Other Decks in Programming

See All in Programming
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
Avatar for Daniel Sogl danielsogl
0
110
物語を動かす行動"量" #エンジニアニメ
Avatar for konifar konifar
14
4.2k
変化を楽しむエンジニアリング ~ いままでとこれから ~
Avatar for murajun1978 murajun1978
0
710
令和最新版手のひらコンピュータ
Avatar for KOBA789 koba789
13
7.3k
AIのメモリー
Avatar for watany watany
13
1.4k
あなたとJIT, 今すぐアセンブ ル
Avatar for monochrome sisshiki1969
1
590
Reactの歴史を振り返る
Avatar for つちのこ tutinoko
1
180
Comparing decimals in Swift Testing
Avatar for 417.72KI 417_72ki
0
170
WebAssemblyインタプリタを書く ～Component Modelを添えて～
Avatar for ruccho ruccho
1
740
11年かかって やっとVibe Codingに 時代が追いつきましたね
Avatar for yimajo yimajo
1
260
kiroでゲームを作ってみた
Avatar for 入井 啓太 iriikeita
0
150
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
Avatar for ShuyaKinjo shuyakinjo
1
260

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
183
54k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Fireside Chat
Avatar for paigeccino paigeccino
38
3.6k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
301
21k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
800

Transcript

  1. a lighter reusable cell for TableView & CollectionView @wpsteak

  2. None

  3. TableView

  4. ViewController TableView

  5. ViewController TableView DataSource

  6. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

  7. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

  8. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource TableCell

  9. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    TableCell

  10. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    TableCell

  11. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 TableCell

  12. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 TableCell

  13. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 TableCell

  14. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 TableCell

  15. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon TableCell

  16. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell TableCell

  17. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell TableCell

  18. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell TableCell

  19. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? TableCell

  20. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells? TableCell

  21. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells? 1000 Cells? TableCell

  22. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells? 1000 Cells? Add/remove subview every time? TableCell

  23. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells? 1000 Cells? Add/remove subview every time? TableCell

  24. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

    Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells? 1000 Cells? Add/remove subview every time? TableCell <reuse>

  25. Step1 move logic into cell

  26. None

  27. TableView

  28. ViewController TableView

  29. ViewController TableView DataSource

  30. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

  31. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

  32. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

  33. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell

  34. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell

  35. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1

  36. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2

  37. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1

  38. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2

  39. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon

  40. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell

  41. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell

  42. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell

  43. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells?

  44. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells?

  45. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells? 1000 Cells?

  46. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells? 1000 Cells? Add/remove subview every time?

  47. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells? 1000 Cells? Add/remove subview every time? <reuse>

  48. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells? 1000 Cells? <reuse>

  49. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 100 Cells? 1000 Cells? <reuse> prepareForReuse

  50. Step2 split logics

  51. TableViewCell / CollectionViewCell • Init UI • PrepareForReuse (reset UI)

    • SetupContent with DataModel (set data)
  52. None

  53. Controller

  54. Model Controller

  55. Model Controller PrepareDataList Model Model Model

  56. TableCell Model Controller PrepareDataList Model Model Model

  57. TableCell Model Controller PrepareDataList Model Model Model SetupContent Model Update

    UI

  58. TableCell Model Controller PrepareDataList Model Model Model prepare data handle

    user interaction data display SetupContent Model Update UI

  59. - (void)initControl { init UI… } - (void)setupContent:(id)data { update

    UI with new content } - (void)prepareForReuse { [super prepareForReuse]; reset UI reset logic } Sample
  60. None

  61. TableView

  62. ViewController TableView

  63. ViewController TableView DataSource

  64. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

  65. ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

  66. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

  67. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell

  68. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell (init Control at first time) Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon

  69. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell (init Control at first time) Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon set Data

  70. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell prepareForReuse setup Content update UI set Data

  71. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell return Cell prepareForReuse setup Content update UI set Data

  72. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell return Cell prepareForReuse setup Content update UI set Data

  73. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell return Cell 10 Cells prepareForReuse setup Content update UI set Data

  74. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell return Cell 10 Cells 100 Cells prepareForReuse setup Content update UI set Data

  75. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell return Cell 10 Cells 100 Cells 1000 Cells prepareForReuse setup Content update UI set Data

  76. TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get

    Cell return Cell 10 Cells 100 Cells 1000 Cells <reuse> prepareForReuse setup Content update UI set Data

  77. • init UIView once and only once • reset UI

    and necessary logic in prepareForReuse: method

  78. End