Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
a lighter reusable cell
Search
Pin-Shih Wang
October 01, 2012
Programming
0
58
a lighter reusable cell
for TableView & CollectionView
https://github.com/wpsteak/MVCTableViewExample
Pin-Shih Wang
October 01, 2012
Tweet
Share
More Decks by Pin-Shih Wang
See All by Pin-Shih Wang
iOS Extension
wpsteak
4
460
A tip for using magical record
wpsteak
0
120
CI with Git Flow
wpsteak
2
230
Test With Xcode Server
wpsteak
0
74
Other Decks in Programming
See All in Programming
Gemini CLI のはじめ方
ttnyt8701
1
100
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
460
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.3k
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
20250708_JAWS_opscdk
takuyay0ne
2
150
MCPで実現できる、Webサービス利用体験について
syumai
7
2k
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
120
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
470
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
270
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Music & Morning Musume
bryan
46
6.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Designing for humans not robots
tammielis
253
25k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Raft: Consensus for Rubyists
vanstee
140
7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Making Projects Easy
brettharned
116
6.3k
Speed Design
sergeychernyshev
32
1k
Transcript
a lighter reusable cell for TableView & CollectionView @wpsteak
None
TableView
ViewController TableView
ViewController TableView DataSource
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
Create UILabel1 TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
Create UILabel1 Create UILabel2 TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
Create UILabel1 Create UILabel2 Create Image1 TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
Create UILabel1 Create UILabel2 Create Image1 Create Image2 TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell TableCell
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get Cell
Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells? 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? 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? 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? 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? 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? TableCell <reuse>
Step1 move logic into cell
None
TableView
ViewController TableView
ViewController TableView DataSource
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell Create UILabel1
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell Create UILabel1 Create UILabel2
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell Create UILabel1 Create UILabel2 Create Image1
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon return Cell 10 Cells?
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?
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?
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?
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>
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>
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
Step2 split logics
TableViewCell / CollectionViewCell • Init UI • PrepareForReuse (reset UI)
• SetupContent with DataModel (set data)
None
Controller
Model Controller
Model Controller PrepareDataList Model Model Model
TableCell Model Controller PrepareDataList Model Model Model
TableCell Model Controller PrepareDataList Model Model Model SetupContent Model Update
UI
TableCell Model Controller PrepareDataList Model Model Model prepare data handle
user interaction data display SetupContent Model Update UI
- (void)initControl { init UI… } - (void)setupContent:(id)data { update
UI with new content } - (void)prepareForReuse { [super prepareForReuse]; reset UI reset logic } Sample
None
TableView
ViewController TableView
ViewController TableView DataSource
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource
ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell (init Control at first time) Create UILabel1 Create UILabel2 Create Image1 Create Image2 Create Icon
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
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell prepareForReuse setup Content update UI set Data
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell return Cell prepareForReuse setup Content update UI set Data
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell return Cell prepareForReuse setup Content update UI set Data
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell return Cell 10 Cells prepareForReuse setup Content update UI set Data
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell return Cell 10 Cells 100 Cells prepareForReuse setup Content update UI set Data
TableCell ViewController - (UITableViewCell *) tableView: cellForRowAtIndexPath: TableView DataSource Get
Cell return Cell 10 Cells 100 Cells 1000 Cells prepareForReuse setup Content update UI set Data
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
• init UIView once and only once • reset UI
and necessary logic in prepareForReuse: method
End