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
80

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
260
Test With Xcode Server
Avatar for Pin-Shih Wang wpsteak
0
110

Other Decks in Programming

See All in Programming
2026/02/04 AIキャラクター人格の実装論 口 調の模倣から、コンテキスト制御による 『思想』と『行動』の創発へ
Avatar for Sald ra sr2mg4
0
670
モジュラモノリスにおける境界をGoのinternalパッケージで守る
Avatar for magavel magavel
0
3.4k
社内規程RAGの精度を73.3% → 100%に改善した話
Avatar for oharu121 oharu121
12
7.3k
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
230
文字コードの話
Avatar for Masaki Hara qnighy
43
16k
AIに仕事を丸投げしたら、本当に楽になれるのか
Avatar for ディップ株式会社 dip_tech
PRO
0
180
今、アーキテクトとして 品質保証にどう関わるか
Avatar for Nealle nealle
0
200
JPUG勉強会 OSSデータベースの内部構造を理解しよう
Avatar for Atsushi Ogawa oga5
2
220
New in Go 1.26 Implementing go fix in product development
Avatar for sunecosuri sunecosuri
0
220
Rで始めるML・LLM活用入門
Avatar for wakama1994 wakamatsu_takumu
0
140
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
Avatar for nnaka2992 nnaka2992
1
290
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
Avatar for harumi harumiweb
8
2.3k

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
760
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
130
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.1k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.7k

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