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

a lighter reusable cell

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Pin-Shih Wang Pin-Shih Wang
October 01, 2012
Programming
0
77

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
480
A tip for using magical record
Avatar for Pin-Shih Wang wpsteak
0
140
CI with Git Flow
Avatar for Pin-Shih Wang wpsteak
2
250
Test With Xcode Server
Avatar for Pin-Shih Wang wpsteak
0
100

Other Decks in Programming

See All in Programming
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.6k
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
190
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
110
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
500
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
1.1k
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
290

Featured

See All Featured
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.4k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
940
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
0
260
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.1k

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