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

a lighter reusable cell

Pin-Shih Wang
October 01, 2012
Programming
0
53

a lighter reusable cell

for TableView & CollectionView

https://github.com/wpsteak/MVCTableViewExample

Pin-Shih Wang

October 01, 2012
Tweet

More Decks by Pin-Shih Wang

See All by Pin-Shih Wang
iOS Extension
wpsteak
4
450
A tip for using magical record
wpsteak
0
110
CI with Git Flow
wpsteak
2
200
Test With Xcode Server
wpsteak
0
64

Other Decks in Programming

See All in Programming
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
3
640
情報漏洩させないための設計
kubotak
3
600
Go の GC の不得意な 部分を克服したい
taiyow
3
820
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
320
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
330
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
500
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ！
maroon1st
0
500
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
280
Zoneless Testing
rainerhahnekamp
0
120
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
170
フロントエンドのディレクトリ構成どうしてる？　Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Docker and Python
trallard
42
3.1k
Building an army of robots
kneath
302
44k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Designing for humans not robots
tammielis
250
25k
The Cost Of JavaScript in 2023
addyosmani
46
7k
Faster Mobile Websites
deanohume
305
30k
For a Future-Friendly Web
brad_frost
175
9.4k

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