a lighter reusable cell

for TableView & CollectionView

https://github.com/wpsteak/MVCTableViewExample

Transcript

1. a lighter reusable cell for TableView & CollectionView @wpsteak
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
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)
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
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