Tables. Mobile Application Development in ios School of EECS Washington State University Instructor: Larry Holder

Transcription

1 Tables Mobile Application Development in ios School of EECS Washington State University Instructor: Larry Holder Mobile Application Development in ios 1

2 Outline Table View Controller Table View Table Cells Cell interaction Navigation Mobile Application Development in ios 2

3 Table View Controller 2. Create Cocoa Touch Class inheriting from UITableViewController. 3. Assign new class to Table View Controller. 1. Add Table View Controller to Storyboard. Mobile Application Development in ios 3

4 Table View Attributes TableView Content: Static Multiple sections Fixed number of cells Design each cell individually Mobile Application Development in ios 4

5 Table View Attributes TableView Content: Dynamic One section Variable number of cells Design cell prototypes Mobile Application Development in ios 5

6 Table Cell Styles Table cell styles Basic Right detail Left detail Subtitle Custom Mobile Application Development in ios 6

7 Delegate and Data Source UITableViewDelegate protocol Configuring table Handling table interaction UITableViewDataSource Source for each row's data func tableview(_ tableview: UITableView, cellforrowat indexpath: IndexPath) -> UITableViewCell Handling insertion and deletion Mobile Application Development in ios 7

8 Delegate and Data Source Automatic connection for Table View Controller Mobile Application Development in ios 8

9 Custom Cells: Step 1 Create custom class extending UITableViewCell Initialize and configure defaults as needed class TripCell: UITableViewCell { override func awakefromnib() { super.awakefromnib() // Initialization code override func setselected(_ selected: Bool, animated: Bool) { super.setselected(selected, animated: animated) // Configure the view for the selected state Mobile Application Development in ios 9

10 Custom Cells: Step 2 Create custom table view prototype cell on Storyboard Set Identifier Set Custom Class to class from Step 1 Mobile Application Development in ios 10

11 Custom Cells: Step 3 Connect cell elements to cell class Mobile Application Development in ios 11

12 Custom Cells: Step 4 Configure cells in UITableViewController class TableViewController: UITableViewController { //... override func tableview(_ tableview: UITableView, cellforrowat indexpath: IndexPath) -> UITableViewCell { let cell = tableview.dequeuereusablecell(withidentifier: "tripcell", for: indexpath) as! TripCell cell.tripimage.image = UIImage(named: "kauai.jpg") cell.triplabel.text = "Kauai" return cell Mobile Application Development in ios 12

13 Navigation Embed in Navigation Controller Create views for Detail and Add Create segue to Detail View Perform when row/accessory selected From View, not row Create Add bar button Create segue from Add button to Add View Mobile Application Development in ios 13

14 Cell Interaction: Selection Row Selection override func tableview(_ tableview: UITableView, didselectrowat indexpath: IndexPath) { self.selectedrow = indexpath.row // retain for prepareforsegue performsegue(withidentifier: "todetail", sender: nil) Accessory Selection (only for Detail ) override func tableview(_ tableview: UITableView, accessorybuttontappedforrowwith indexpath: IndexPath) { self.selectedrow = indexpath.row // retain for prepareforsegue performsegue(withidentifier: "todetail", sender: nil) Mobile Application Development in ios 14

15 Cell Interaction: Deletion // Override to support conditional editing of the table view. override func tableview(_ tableview: UITableView, caneditrowat indexpath: IndexPath) -> Bool { // Return false if you do not want the specified item to be editable. return true // Override to support editing the table view. override func tableview(_ tableview: UITableView, commit editingstyle: UITableViewCellEditingStyle, forrowat indexpath: IndexPath) { if editingstyle ==.delete { // Delete the row from the data source first trips.remove(at: indexpath.row) tableview.deleterows(at: [indexpath], with:.fade) Mobile Application Development in ios 15

16 Insertion In AddViewController.swift Maintain Bool indicating new entry ready Save button sets Bool=true and performs unwind segue class AddViewController: UIViewController, UITextFieldDelegate { var newtripready: Bool = weak var nametextfield: func savetapped(_ sender: UIBarButtonItem) { newtripready = true performsegue(withidentifier: "unwindfromadd", sender: nil) //... Mobile Application Development in ios 16

17 Insertion (cont.) In TableViewController.swift In unwind segue Check if new entry ready If so, create new data instance, add to array, and reload func unwindfromadd (segue: UIStoryboardSegue) { let addvc = segue.source as! AddViewController if (addvc.newtripready) { let name = addvc.nametextfield.text! trips.append(name) self.tableview.reloaddata() Mobile Application Development in ios 17

18 Adding Table View to Existing View Set Delegate and Data Source Mobile Application Development in ios 18

19 Set Delegate and Data Source Programmatically Conform view controller to UITableViewDelegate and UITableViewDataSource protocols Create outlet connection to table view Set table view delegate and datasource to self class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource weak var triptable: UITableView! override func viewdidload() { super.viewdidload() // Do any additional setup after loading the view. triptable.delegate = self triptable.datasource = self Mobile Application Development in ios 19

20 Resources Start Developing ios Apps (good Tables tutorial) developer.apple.com/library/content/referencelibrary /GettingStarted/DevelopiOSAppsSwift UITableViewController (documentation) developer.apple.com/documentation/uikit/uitablevie wcontroller Mobile Application Development in ios 20