Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

a lighter reusable cell

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

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
130
CI with Git Flow
Avatar for Pin-Shih Wang wpsteak
2
240
Test With Xcode Server
Avatar for Pin-Shih Wang wpsteak
0
94

Other Decks in Programming

See All in Programming
Integrating WordPress and Symfony
Avatar for Alexandre Salomé alexandresalome
0
160
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう！
Avatar for neruneruo neruneruo
4
930
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
Avatar for Shoma Okamoto shmokmt
5
2.3k
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
120
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
Avatar for Ryota Nakamura nowaki28
0
430
ゲームの物理 剛体編
Avatar for Fadis fadis
0
360
dotfiles 式年遷宮 令和最新版
Avatar for masawada masawada
1
800
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
380
宅宅自以為的浪漫：跟 AI 一起為自己辦的研討會寫一個售票系統
Avatar for 高見龍 eddie
0
510
モデル駆動設計をやってみよう ワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
Avatar for haru860 haru860
0
270
脳の「省エネモード」をデバッグする ～System 1（直感）と System 2（論理）の切り替え～
Avatar for HideyukiKitao panda728
PRO
0
110
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
Avatar for Chris Richardson cer
PRO
0
380

Featured

See All Featured
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.3k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
0
88
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
72
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
0
290
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
250
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
64
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
740

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