Complex iOS UITableViews

Presented at the first Fullstack Nights at the Puerto Rico Science and Technology TRUST.

Transcript

1. Complex iOS UITableViews By Axel Rivera
2. HELLO Axel Rivera Full-time iOS Developer Polsense, Inc.
3. Founder Startup After Hours http://tiny.cc/afterhours Twitter - @arivera
4. iOS Development 5 Years
5. Swift 1.5 Years It's Awesome!
6. UITableView == Swiss Army Knife
7. Basic Example
8. Complex Designs
9. Delegation class MyController: UIViewController { override func viewDidLoad() { super.viewDidLoad() tableView = UITableView(frame: CGRectZero, style: .Plain) tableView.dataSource = self tableView.delegate = self } }
10. Data Source extension MyController: UITableViewDelegate { func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 1 } func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 1 } func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { return UITableViewCell(style: .Default, reuseIdentifier: nil) } }
11. Delegate extension MyController: UITableViewDelegate { func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { tableView.deselectRowAtIndexPath(indexPath, animated: true) } func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat return 44.0 } }
12. UITableViewCell
13. 4 Default Cells
14. Default var UITableViewCell(style: .Default, reuseIdentifier: CellIdentifier) cell.textLabel?.text = "Text Label"
15. Value1 var cell = UITableViewCell(style: .Value1, reuseIdentifier: CellIdentifier) cell.textLabel?.text = "Text Label" cell.detailTextLabel?.text = "Detail Text"
16. Value2 var cell = UITableViewCell(style: .Value2, reuseIdentifier: CellIdentifier) cell.textLabel?.text = "Text Label" cell.detailTextLabel?.text = "Detail Text"
17. Subtitle var cell = UITableViewCell(style: .Subtitle, reuseIdentifier: CellIdentifier) cell.textLabel?.text = "Text Label" cell.detailTextLabel?.text = "Detail Text"
18. 5 Years Of Experimentation
19. Most Common Scenario 4 All Rows Have Same Type 4 Single Section 4 Objects are Stored in an Array
20. All Rows Are the Same
21. All Rows are the Same func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 1 } func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return arrayOfObjects.count } func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { var cell = tableView.dequeueReusableCellWithIdentifier(CellIdentifier) as UITableViewCell! if cell == nil { cell = UITableViewCell(style: .Default, reuseIdentifier: CellIdentifier) } let myObject = arrayOfObjects[indexPath.row] cell.textLabel?.text = myObject.text return cell }
22. Complex Scenario 4 Rows are of Different Types 4 Multiple Sections 4 Content Not Defined as Array
23. Complex Scenario
24. func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 2 } func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { if section == 0 { return 1 } else if section == 1 { return 2 } return return 0 }
25. func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { if indexPath.section == 0 { var cell = tableView.dequeueReusableCellWithIdentifier(CellIdentifier) as UITableViewCell! return cell } if indexPath.section == 1 { if indexPath.row == 0 { var cell = tableView.dequeueReusableCellWithIdentifier(SecondIdentifier) as UITableViewCell! return cell } var cell = tableView.dequeueReusableCellWithIdentifier(SecondIdentifier) as UITableViewCell! return cell } return UITableViewCell(style: .Default, reuseIdentifier: nil) }
26. if indexPath.section == 0 { var cell = tableView.dequeueReusableCellWithIdentifier(CellIdentifier) as UITableViewCell! if cell == nil { cell = UITableViewCell(style: .Default, reuseIdentifier: CellIdentifier) } let myObject = arrayOfObjects[indexPath.row] cell.textLabel?.text = myObject.text return cell }
27. if indexPath.section == 1 { if indexPath.row == 0 { var cell = tableView.dequeueReusableCellWithIdentifier(AnotherIdentifier) as UITableViewCell! if cell == nil { cell = UITableViewCell(style: .Subtitle, reuseIdentifier: AnotherIdentifier) } cell.textLabel?.text = "This Content Might Be Fixed" cell.detailTextLabel?.text = "Common in Settings" return cell } var cell = tableView.dequeueReusableCellWithIdentifier(AnotherIdentifier) as UITableViewCell! if cell == nil { cell = UITableViewCell(style: .Default, reuseIdentifier: AnotherIdentifier) let customSwitch = UISwitch() cell.accessoryView = customSwitch self.customSwitch = customSwitch } cell.textLabel?.text = "You Can Add Custom Controls to Default Views" if let customSwitch = cell.accessoryView as? UISwitch { customSwitch.on = NSUserDefaults.standardUserDefaults().objectForKey("my_key") as? Bool ?? false } return cell }
28. Have to Use Conditionals In All Data Source And Delegate Methods
29. See Any Problems? 4 Nested structures can be complex 4 What happens if you decide to change the order?
30. Even More Problems
31. How About Animations?
32. Can Add Helper Methods to Manage Cells by passing indexPath as Parameter 4 I don't do it 4 Have to use conditionals anyway (indexPath.section and indexPath.row) 4 Cell UI Logic belongs in Data Source and Delegate methods to improve readability (My Opinion)
33. There Has To Be A Better Way
34. Goals 4 Single Data Source Array for Everything 4 Make UITableView logic SECTION and ROW agnostic 4 Improve Readability 4 Decrease Number of Lines 4 Keep Cell management in Data Source and Delegate methods
35. Additional Goal Can we have as many one liners as possible?
36. New Method func updateDataSource(reload reload: Bool = true) { var content: TableRow! var rows = TableRowArray() var sections = TableSectionArray() content = TableRow(text: "Text Label", detail: "Detail Text") content.groupIdentifier = CellIdentifier content.identifier = "sample_identifier" content.height = 54.0 rows.append(content) sections.append(TableSection(title: "Section 1", rows: rows)) dataSource = sections if reload { tableView.reloadData() } }
37. class MyController: UIViewController { var tableView: UITableView! var dataSource = TableSectionArray() override viewDidLoad() { super.viewDidLoad() // Add UI Stuff Here // Update Data Source at the end updateDataSource() } }
38. Number of Sections and Rows func numberOfSectionsInTableView(tableView: UITableView) -> Int { return dataSource.count } func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return dataSource[indexPath.section].rows.count }
39. Create Cell func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let row = dataSource[indexPath.section].rows[indexPath.row] let groupIdentifier = row.groupIdentifier ?? String() if groupIdentifier == CellIdentifier { var cell = tableView.dequeueReusableCellWithIdentifier(CellIdentifier) as UITableViewCell! if cell == nil { cell = UITableViewCell(style: .Default, reuseIdentifier: CellIdentifier) } cell.textLabel?.text = row.text return cell } return UITableViewCell(style: .Default, reuseIdentifier: nil) }
40. Cell Height func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { return dataSource[indexPath.section].rows[indexPath.row].height ?? 44.0 }
41. Section Title func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? { return dataSource[section].title }
42. Cell Selection func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) { tableView.deselectRowAtIndexPath(indexPath, animated: true) let row = dataSource[indexPath.section].rows[indexPath.row] let identifier = row.identifier ?? String() if identifier == "custom_identifier" { // Do Something Here } }
43. Section struct TableSection { var groupIdentifier: String? var identifier: String? var title: String? var footer: String? var rows = TableRowArray() var userInfo = TableInfo() init(title: String?, rows: TableRowArray) { self.title = title self.rows = rows } }
44. Row struct TableRow { var rowType: TableRowType = .Custom var identifier: String? var groupIdentifier: String? var text: String? var detail: String? var view: UIView? var userInfo = TableInfo() var object: Any? var height: CGFloat? init(type: TableRowType) { self.rowType = type } init(type: TableRowType, text: String?, detail: String?) { self.rowType = type self.text = text self.detail = detail } }
45. GitHub gist.github.com/riveralabs/ TableUtils.swift
46. The End Axel Rivera Twitter - @arivera