1. Table Views
UITableView

2. Overview Table view basics Reference: Tables display lists of data
Each item in a table’s list is a row
Tables can have an unlimited number of rows
Tables can only be one column wide (but see later slides)
Reference:
Apple Developer Reference
Chap 8 in “Beginning iPhone Development with Swift”

3. Views vs Cells A table view is a subclass of a view
Technically it is a UITableView
Each visible row in a table is an instance of a UITableViewCell
Table view cell
Table view

4. Table Data Table views do not store all the data
Rather they just store data for the rows that are displayed
They get their configuration data from the object that conforms to the UITableViewdelegate protocol
They get their row data from the object that conforms to the UITableViewDataSource protocol

5. Table Cells Each row is represented by a single UITableViewCell
Each UITableViewCell object can be configured with an image, some text, an optional accessory icon
If you need more data (or columns) in a cell you can create a subview
Can do this programmatically
Can do this in IB

6. Grouped Tables Plain Tables. The default style. May be indexed
Grouped Tables. Each group is a set of rows embedded in a rounded rectangle.
Can consist of a single group
Each division in a table is known to your data source as a section
In a grouped table, each group is a section
In an indexed table, each indexed grouping of data is a section. E.g., names beginning with ‘A’, names beginning with ‘B’, etc.

7. Indexed vs Grouped
Indexed Table
Grouped Table

8. The app We’ll create a simple app with a single table view
Later will create a navigation app that uses tables

9. Creating Create a new project Select single view application
Choose a name, etc. Make sure the language is Swift and it’s for the iPhone
Leave unchecked: use core data
Choose a place to save
Do not need to use git

10. What did you get? Look at the file navigator
Normal appDelegate, viewcontroller, and Main.storyboard

11. Creating the view Click on the Main.Storyboard to show IB
Find a Table View (not a TableViewController) in the library and drag to the view.
The table view should automatically size itself to fill the entire view.
Click on the pin icon at bottom
Check the Constrain to margins checkbox
click on all 4 struts
change all 4 distances to 0
change Update Frames to Items of New Constraints
click the Add 4 Constraints button

12. Creating the view
Open the hierarchical view by clicking on the Document Outline button
Click on the Table View, bring up the connections inspector
Under the outlets section drag from dataSource to View Controller in the outline
Under the outlets section
drag from delegate to
View Controller in the outline
This makes the viewController both the data source and delegate for the table.

13. Delegates & Datasources
Delegate: an object that takes responsibility for doing certain tasks on behalf of another object.
a delegate contains methods that another object calls when certain events happen or when something needs to be done.
Datasource: an object that supplies information to another object.
a datasource knows about the model and can get information from it on behalf of view object

14. Delegates & Datasources
Calls when something happens
object
These can be the same object
datasource
Calls to get information

15. Creating the controller
in the Project Navigator click on the ViewController.swift file and add the bold:
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
private let dwarves = [
"Sleepy", "Sneezy", "Bashful", "Happy",
"Doc", "Grumpy", "Dopey",
"Thorin", "Dorin", "Nori", "Ori",
"Balin", "Dwalin", "Fili", "Kili",
"Oin", "Gloin", "Bifur", "Bofur",
"Bombur" ]
let simpleTableIdentifier = "SimpleTableIdentifier"
This makes the view controlleraable to be both the data source and the delegate of a table.
The array will hold our data. Normally the data will reside in the model class not the controller class.
UITableViewDataSource and UITableViewDelegate are protocols

16. Creating the controller II
in the Project Navigator click on the ViewController.swift file and add the bold:
func tableView(tableView: UITableView,
numberOfRowsInSection section: Int) -> Int {
return dwarves.count }
We need as many rows as we have array entries.
This method is called by the table when it needs to know how many rows are in the section (number of sections is 1 by default)

17. Creating the controller II
in the Project Navigator click on the ViewController.swift file and add the bold:
func tableView(tableView: UITableView,
cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
This method is called by the table when it needs a cell to display. We must return a UITableViewCell
Method body on next slide….

18. Creating the controller II
We check to see if there is an unused cell of the correct type that we can reuse.
var cell = tableView.dequeueReusableCellWithIdentifier(simpleTableIdentif ier) as? UITableViewCell if (cell == nil) { cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: simpleTableIdentifier) cell!.textLabel?.text = dwarves[indexPath.row] return cell }
The reuse identifier is used to identify the type of cell
If there was no leftover cell we have to create a new one.
Use default style; there are others!
The indexPath parameter contains the row (and section) number that the table will use this cell for.
The label text is what shows up in the row.
We return this cell; it will be displayed as the next row
As table rows scroll out of view, they are placed into a queue of cells to be reused. If memory gets low, they are discarded.

19. Run! Should see a table. But can’t select anything yet!
Problem: tables runs under the nav bar.
To fix:
go to storyboard, select the tableView in the doc outline
on the storyboard, resize (don’t grab) the top of the view down until you see the blue guideline under the status bar
Click the tie-fighter icon (Resolve Auto Layout Issues) at the bottom and click Update Constraints.
Run again

20. More on Cells
Add image
Add icon image to Xcode (see LectureProgramminstar.png)
Change the method on next slide(assuming icon has name star.png)

21. More on Cells
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { var cell = tableView.dequeueReusableCellWithIdentifier(simpleTableIdentifier) as? UITableViewCell if (cell == nil) { cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: simpleTableIdentifier) } let image = UIImage(named: "star") cell!.imageView?.image = image let highlightedImage = UIImage(named: "star2") cell!.imageView?.highlightedImage = highlightedImage cell!.textLabel?.text = dwarves[indexPath.row] cell!.textLabel?.font = UIFont .boldSystemFontOfSize(50) return cell! }}

22. More on Cells Add detail text
Subtitle
Add detail text
Cells can have additional (“detail”) text.
Must change the cell “style”.
func tableView(tableView: UITableView,
cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell = tableView.dequeueReusableCellWithIdentifier(simpleTableIdentifier)
as? UITableViewCell
if (cell == nil) {
cell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: simpleTableIdentifier) }
let image = UIImage(named: "star")
cell!.imageView?.image = image
let highlightedImage = UIImage(named: "star2")
cell!.imageView?.highlightedImage = highlightedImage
if indexPath.row < 7 {
cell!.detailTextLabel?.text = "Mr Disney"
} else {
cell!.detailTextLabel?.text = "Mr Tolkien"
cell!.textLabel?.text = dwarves[indexPath.row]
cell!.textLabel?.font = UIFont .boldSystemFontOfSize(50)
return cell! }}
Must change the style of the cell for the subtitle to show up!
We’ll use different subtitles for the first 7 rows (0-6).
Other styles:
initWithStyle:UITableViewCellStyleValue1
initWithStyle:UITableViewCellStyleValue2

23. Detecting Row Selection
Two events you can detect:
When a row will be selected. Can prevent or change the selection
When a row has been selected. Can react to the selection.

24. Detecting Row Selection
When a row will be selected. Can prevent or change the selection
Add to viewController.m:
func tableView(tableView: UITableView,
willSelectRowAtIndexPath indexPath: NSIndexPath)
-> NSIndexPath? {
if indexPath.row == 0 {
return nil
} else if (indexPath.row % 2 == 0){
return NSIndexPath(forRow: indexPath.row + 1, inSection: indexPath.section)
} else {
return indexPath }
indexPath contains the number of the row that was selected.
Prevents row 0 from being selected.
When an even row is touched, the following row is selected

25. Detecting Row Selection
When a row has been selected. Put up alert box:
Add to viewController.m:
func tableView(tableView: UITableView,
didSelectRowAtIndexPath indexPath: NSIndexPath) {
let rowValue = dwarves[indexPath.row]
let message = "You selected \(rowValue)"
let controller = UIAlertController(title: "Row Selected",
message: message, preferredStyle: .Alert)
let action = UIAlertAction(title: "Yes I Did",
style: .Default, handler: nil)
controller.addAction(action)
presentViewController(controller, animated: true, completion: nil) }
Find the name of the dwarf for the selected row
A typical alert box
Now deselect the row

26. Other modifications to cells
See Beginning iOS 6 Development chapter 8
Set indent level of row
Set font size, row height
Customize table view cells
Programmatically
Using the storyboard
Add groups
Add indexes
Add navigation bar or search bar
Detail disclosure buttons (chapter 9)