Tweet
Tweet

Slide 1

Slide 1 text

a lighter reusable cell for TableView & CollectionView @wpsteak

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

TableView

Slide 4

Slide 4 text

ViewController TableView

Slide 5

Slide 5 text

ViewController TableView DataSource

Slide 6

Slide 6 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

Slide 7

Slide 7 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

Slide 8

Slide 8 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource TableCell

Slide 9

Slide 9 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell TableCell

Slide 10

Slide 10 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell TableCell

Slide 11

Slide 11 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 TableCell

Slide 12

Slide 12 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 TableCell

Slide 13

Slide 13 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 TableCell

Slide 14

Slide 14 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 TableCell

Slide 15

Slide 15 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon TableCell

Slide 16

Slide 16 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell TableCell

Slide 17

Slide 17 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell TableCell

Slide 18

Slide 18 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell TableCell

Slide 19

Slide 19 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? TableCell

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Step1 move logic into cell

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

TableView

Slide 28

Slide 28 text

ViewController TableView

Slide 29

Slide 29 text

ViewController TableView DataSource

Slide 30

Slide 30 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

Slide 31

Slide 31 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

Slide 32

Slide 32 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

Slide 33

Slide 33 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

Slide 34

Slide 34 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

Slide 35

Slide 35 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1

Slide 36

Slide 36 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2

Slide 37

Slide 37 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1

Slide 38

Slide 38 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2

Slide 39

Slide 39 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon

Slide 40

Slide 40 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell

Slide 41

Slide 41 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell

Slide 42

Slide 42 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell

Slide 43

Slide 43 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells?

Slide 44

Slide 44 text

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?

Slide 45

Slide 45 text

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?

Slide 46

Slide 46 text

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?

Slide 47

Slide 47 text

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?

Slide 48

Slide 48 text

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?

Slide 49

Slide 49 text

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? prepareForReuse

Slide 50

Slide 50 text

Step2 split logics

Slide 51

Slide 51 text

TableViewCell / CollectionViewCell • Init UI • PrepareForReuse (reset UI) • SetupContent with DataModel (set data)

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Controller

Slide 54

Slide 54 text

Model Controller

Slide 55

Slide 55 text

Model Controller PrepareDataList Model Model Model

Slide 56

Slide 56 text

TableCell Model Controller PrepareDataList Model Model Model

Slide 57

Slide 57 text

TableCell Model Controller PrepareDataList Model Model Model SetupContent Model Update UI

Slide 58

Slide 58 text

TableCell Model Controller PrepareDataList Model Model Model prepare data handle user interaction data display SetupContent Model Update UI

Slide 59

Slide 59 text

- (void)initControl { init UI… } - (void)setupContent:(id)data { update UI with new content } - (void)prepareForReuse { [super prepareForReuse]; reset UI reset logic } Sample

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

TableView

Slide 62

Slide 62 text

ViewController TableView

Slide 63

Slide 63 text

ViewController TableView DataSource

Slide 64

Slide 64 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

Slide 65

Slide 65 text

ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

Slide 66

Slide 66 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource

Slide 67

Slide 67 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell

Slide 68

Slide 68 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell (init Control at first time) Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell prepareForReuse setup Content update UI set Data

Slide 71

Slide 71 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell return Cell prepareForReuse setup Content update UI set Data

Slide 72

Slide 72 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell return Cell prepareForReuse setup Content update UI set Data

Slide 73

Slide 73 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell return Cell 10 Cells prepareForReuse setup Content update UI set Data

Slide 74

Slide 74 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell return Cell 10 Cells 100 Cells prepareForReuse setup Content update UI set Data

Slide 75

Slide 75 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell return Cell 10 Cells 100 Cells 1000 Cells prepareForReuse setup Content update UI set Data

Slide 76

Slide 76 text

TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell return Cell 10 Cells 100 Cells 1000 Cells prepareForReuse setup Content update UI set Data

Slide 77

Slide 77 text

• init UIView once and only once • reset UI and necessary logic in prepareForReuse: method

Slide 78

Slide 78 text

End