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
50
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
440
A tip for using magical record
wpsteak
0
84
CI with Git Flow
wpsteak
2
170
Test With Xcode Server
wpsteak
0
50
Other Decks in Programming
See All in Programming
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
350
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
390
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
110
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
180
Sheets API使ってみた
toshi0383
2
160
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.4k
Ruby GitHub Packages
bkuhlmann
0
640
GitHub Copilotのススメ
marcy731
1
220
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
100
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
Building Adaptive Systems
keathley
32
1.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
The Language of Interfaces
destraynor
151
23k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
The Power of CSS Pseudo Elements
geoffreycrofte
61
5k
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