ITP 342 Mobile App Dev. Table Views

Transcription

1 ITP 342 Mobile App Dev Table Views

2 Tables A table presents data as a scrolling, singlecolumn list of rows that can be divided into sections or groups. Use a table to display large or small amounts of information cleanly and efficiently in the form of a list. Generally speaking, tables are ideal for textbased content, and often appear as a means of navigation on one side of a split view, with related content shown on the opposite side.

3 Table Views The most common mechanism used to display lists of data to the user is UITableView Highly configurable objects that can be made to look practically any way you want them to Examples: Settings, ipod, and YouTube applications Tables display lists of data Each item in a table s list is a row ios tables can have an unlimited # of rows Constrained only by the amount of available memory ios tables can be only one column wide 3

4 Table View Styles There are two major styles of table views Plain: UITableView.Style.plain Grouped: UITableView.Style.grouped 4

5 Plain Table View Rows can be separated into labeled sections and an optional index can appear vertically along the right edge of the view A header can appear before the first item in a section, and a footer can appear after the last item 5

6 Grouped Table View Rows are displayed in groups, which can be preceded by a header and followed by a footer This style of table always contains at least one group and each group always contains at least one row A grouped table doesn't include an index 6

7 Tables In both styles, a table row becomes highlighted briefly when a user taps a selectable item. If a row selection results in navigation to a new screen, the selected row becomes highlighted briefly as the new screen slides into place. When the user navigates back to the previous screen, the originally selected row again becomes highlighted briefly to remind the user of the earlier selection (it doesn t remain highlighted). 7

8 Table Rows You use standard table cell styles to define how content appears in table rows. The class in UIKit for table rows is UITableViewCell. The UIKit framework defines four styles for the cells that a table view uses to draw its rows. You may create custom table view cells with different appearances if you want, but these four predefined cell styles are suitable for most purposes. 8

9 Basic (Default) An optional image on the left side of the row, followed by a left-aligned title. It s a good option for displaying items that don t require supplementary information. UITableViewCell.CellStyle.default 9

10 Subtitle A left-aligned title on one line and a left-aligned subtitle on the next. This style works well in a table where rows are visually similar. The additional subtitle helps distinguish rows from one another. Images are optional. UITableViewCell.CellStyle.subtitle 10

11 Right Detail (Value 1) A left-aligned title with a right-aligned subtitle on the same line. The Settings application uses cells in this style. Images on the left side are optional. UITableViewCell.CellStyle.value1 11

12 Left Detail (Value 2) A right-aligned title, followed by a left-aligned subtitle on the same line. UITableViewCell.CellStyle.value2 12

13 Table View Elements 13

14 Table View Basics A table view is the view that displays a table's data Is an instance of the class UITableView Each visible row of the table is implemented by the class UITableViewCell A table view is the object that displays the visible part of a table A table view cell is responsible for displaying a single row of the table 14

15 Table View Basics All tables are implemented as a single column Each row is represented by a single UITableViewCell Each UITableViewCell object can be configured with an image, some text, and an optional accessory icon 2 basic ways to add more data in a cell Add subviews to UITableViewCell By subclassing UITableViewCell 15

16 Sections in Tables Each division of your table is known to your datasource as a section In a grouped table, each group is a section In an indexed table, each indexed grouping of data is a section Sections has 2 primary purposes In a grouped table, each section represents one group In an indexed table, each section corresponds to one index entry It is technically possible to create a grouped table with an index, but don t! ios Human Interface Guidelines 16

17 Data Source and Delegate A UITableView object must have an object that acts as a data source and an object that acts as a delegate; typically these objects are either the application delegate or, more frequently, a custom UITableViewController object. The data source must adopt the UITableViewDataSource protocol and the delegate must adopt the UITableViewDelegate protocol. The data source provides information that UITableView needs to construct tables and manages the data model when rows of a table are inserted, deleted, or reordered. The delegate manages table row configuration and selection, row reordering, highlighting, accessory views, and editing operations. 17

18 Populating a Table View A UITableView uses: A data source to populate its rows A delegate to respond to user interaction Both roles are defined by protocols The table view controller plays both roles 18

19 Delegate Pattern 19

20 What the Data Source Provides // UITableViewDataSource protocol optional public func numberofsections(in tableview: UITableView) -> Int public func tableview(_ tableview: UITableView, numberofrowsinsection section: Int) -> Int public func tableview(_ tableview: UITableView, cellforrowat indexpath: IndexPath) -> UITableViewCell optional func tableview(_ tableview: UITableView, titleforheaderinsection section: Int) -> String? optional func tableview(_ tableview: UITableView, titleforfooterinsection section: Int) -> String? 20

21 NSIndexPath Many methods of UITableView take NSIndexPath objects as parameters and return values. UITableView declares a category on NSIndexPath that enables you to get the represented row index (row property) and section index (section property), and to construct an index path from a given row index and section index (init(row:section:) method). Especially in table views with multiple sections, you must evaluate the section index before identifying a row by its index number. 21

22 Table Project Create a Single View Application for iphone Call it Tables In the storyboard, add a Table View to the View Controller Use the library and search for table In the ViewController.swift file, add the UITableViewDataSource protocol Let Xcode fix the protocol error and 2 methods will be added

23 Number of Sections This method is optional. // TableViewController.swift // Return the number of sections override func numberofsections(in tableview: UITableView) -> Int { return 1 } 23

24 Number of Rows This method is required. // TableViewController.swift // Return the number of rows in the section override func tableview(_ tableview: UITableView, numberofrowsinsection section: Int) -> Int { return 100 } 24

25 Configuring Rows (Cells) This method is required. // TableViewController.swift // Return the number of rows in the section override func tableview(_ tableview: UITableView, cellforrowat indexpath: IndexPath) -> UITableViewCell { let cell = tableview.dequeuereusablecell(withidentifier: "TableCell", for: indexpath) // Configure the cell... cell.textlabel?.text = "Row \(indexpath. row)" } return cell 25

26 Dequeing and Reusing Objects Instantiating and destroy objects are expensive, but sometimes we need a lot of objects (table view cells in ios, bullets in video games, etc.) Common approach in software development is to put unused objects into a reuse pool, then use them when it s necessary When you call tableview.dequeuereusablecell(withidentifier, for) you either: Get a cell that has previously been created and isn't currently being used OR Create a new cell of the class you specified 26

27 Storyboard identifier must match the code Storyboard In the Attributes Inspector, for Identifier, enter TableCell 27

28 Build and Run A table is displayed with 100 rows 28

29 Get Data from a Model Let's create a new project that pulls data from a model Let's create a TableViewController this time 29

30 DataModel 30

31 TableVC Project Create a Single View Application for iphone Call it TableVC Delete the view controller from the storyboard Select it (should be outlined in blue) and hit the delete key Delete the ViewController.swift file Select the file, right click, and select Delete Click the Move to Trash button

32 TableViewController Create a new Cocoa Touch Class named TableViewController File à New à File Make it a subclass of UITableViewController For the language, select Swift Add it into the TableView à TableView folder 32

33 Creating a Table View Controller Open the storyboard It should be empty! In Library, search for Table Drag a Table View Controller into the storyboard In the Attributes Inspector, checkmark the "Is Initial View Controller" option In the Identity Inspector, set its class identity to TableViewController 33

34 Data Model Your model should have public methods: // QuotesModel.swift class QuotesModel { } func numberofquotes() -> Int func getquote(at index: Int) -> Quote? func append(quote: Quote) func insert(_ text: String, by author: String, at index: Int) func insert(quote: Quote, at index: Int) func remove(at index: Int) 34

35 Storyboard Can choose different styles for the cells In the Document Outline, select the TableCell In the Attributes Inspector, change the Style Options: Custom, Basic, Right Detail, Left Detail, Subtitle If using one of the styles that displays a Title and Subtitle, you can access to these labels Title à textlabel Subtitle à detailtextlabel 35

36 Add Model to View Controller Create a DataModel property in the TableViewController // TableViewController.swift import UIKit class TableViewController: UITableViewController { var datamodel = QuotesModel() } // methods 36

37 Modify Table View Methods // TableViewController.swift // Return number of sections override func numberofsections(in tableview: UITableView) -> Int { return 1 } // Return numbers of rows in section override func tableview(_ tableview: UITableView, numberofrowsinsection section: Int) -> Int { } return datamodel.numberofquotes() 37

38 Modify Table View Methods // TableViewController.swift // Return the number of rows in the section override func tableview(_ tableview: UITableView, cellforrowat indexpath: IndexPath) -> UITableViewCell { let cell = tableview.dequeuereusablecell(withidentifier: "TableCell", for: indexpath) // Configure the cell... if let quote = datamodel.getquote(at: indexpath.row) { cell.textlabel?.text = quote.text cell.detailtextlabel?.text = quote.author } else { cell.textlabel?.text = "No more quotes" cell.detailtextlabel?.text = "" } } return cell 38

39 Result! Hopefully data from your model is displayed in your table 39

40 Table View Troubleshooting Empty Table? Check the View Controller's Class identity in IB Is the controller set as the table view's data source? Is the property for the model strong? Did you instantiate the model? Did you implement the data source methods? 40

41 Delete table cells Modifying Tables Add navigation control Enable edit button in viewdidload method Use the public remove method in the model Implement the following method: // TableViewController.swift override func tableview(_ tableview: UITableView, commit editingstyle: UITableViewCellEditingStyle, forrowat indexpath: IndexPath) 41

42 Adding Navigation We need someplace to add our edit buttons We'll use a navigation controller to get a navigation bar Select the Table View Controller From Xcode's main menu, select Editor à Embed in à Navigation Controller 42

43 Enable Editing Uncomment the edit button boilerplate If you did not subclass UITableViewController, then you will have to add the line into the viewdidload method The default is the rightbarbuttonitem, but I changed it to the leftbarbuttonitem // TableViewController.swift override func viewdidload() { super.viewdidload() } self.navigationitem.rightbarbuttonitem = self.editbuttonitem 43

44 Handling Deletes We get delete controls, but they don't work We need to fulfill the delete commands Two step process 1. Delete the data 2. Remove the table cells Always update the data model first! 44

45 Enable Editing In TableViewController implementation file Uncomment the edit method boilerplate If you did not subclass UITableViewController, then you will have to add the method // TableViewController.swift override func tableview(_ tableview: UITableView, commit editingstyle: UITableViewCellEditingStyle, forrowat indexpath: IndexPath) { } 45

46 Delete the Table Cell // TableViewController.swift override func tableview(_ tableview: UITableView, commit editingstyle: UITableViewCellEditingStyle, forrowat indexpath: IndexPath) { if editingstyle ==.delete { // Delete from the model self.datamodel.removestudentatindex(index: indexpath.row) } } // Delete the row from data source self.tableview.deleterows(at: [indexpath], with:.fade) 46

47 Adding table cells Add an add button Modifying Tables Add the TextInput files Use one of the insert methods in the model Create a modal segue from table view to input view Implement prepareforsegue method Set the input view controller's completion block Call the insertquote: author: method Refresh the table view 47

48 Open the Storyboard Adding a + Button Using the library, search for a bar button Drag a bar button item to the nav bar on the Answers View controller In the Attributes Inspector, for the Identifier select Add 48

49 Enabling Text Entry Open the TextInput project Drag the InputViewController.swift into your TableView project 49

50 Presenting the Input View Copy the Input View Controller (make sure there is a blue line around it) from the TextInput project Paste it into the TableView storyboard Under the Identity Inspector, set the Storyboard ID to InputViewController 50

51 Presenting the Input View Control drag from the + to the Input View Controller This creates a segue Choose modal 51

52 Storyboards A storyboard may designate one view controller to be the initial view controller. If a storyboard represents a specific workflow through part of your UI, the initial view controller represents the first scene in that workflow. You establish relationships from the initial view controller to other view controllers in the storyboard. In turn, you establish relationships from those view controllers to others, eventually connecting most or all of the storyboard s scenes into a single connected graph. 52

53 Relationships If the relationship is a segue, the destination view controller is instantiated when the segue is triggered. If the relationship represents containment, the child view controller is instantiated when its parent is instantiated. If the controller is not the destination or child of another controller, it is never instantiated automatically. You must instantiate it from the storyboard programmatically. 53

54 Identification To identify a specific view controller or segue inside a storyboard, use Interface Builder to assign it an identifier string that uniquely identifies it. To programmatically load a view controller from the storyboard, you must assign it an identifier. Similarly, to trigger a segue programmatically, it must also be assigned an identifier. When a segue is triggered, that segue's identifier is passed to the source view controller, which uses it to determine which segue was triggered. For this reason, consider labeling every segue with an identifier. 54

55 How many storyboards? When you build an app using storyboards, you can use a single storyboard to hold all of its view controllers, or you can create multiple storyboards and implement a portion of the user interface in each. One storyboard in your app is almost always designated as the main storyboard. If there is a main storyboard, ios loads it automatically; other storyboards must be explicitly loaded by your app. 55

56 Main Storyboard The main storyboard is defined in the app s Information property list file. If a main storyboard is declared in this file, then when your app launches, ios performs the following steps: 1. It instantiates a window for you. 2. It loads the main storyboard and instantiates its initial view controller. 3. It assigns the new view controller to the window s rootviewcontroller property and then makes the window visible on the screen. Your app delegate is called to configure the initial view controller before it is displayed. 56

57 Segues A segue represents a triggered transition that brings a new view controller into your app s user interface. Segues contain a lot of information about the transition, including the following: The object that caused the segue to be triggered, known as the sender The source view controller that starts the segue The destination view controller to be instantiated The kind of transition that should be used to bring the destination view controller onscreen An optional identifier string that identifies that specific segue in the storyboard 57

58 Segues When a segue is triggered, ios takes the following actions: 1.It instantiates the destination view controller using the attribute values you provided in the storyboard. 2.It gives the source view controller an opportunity to configure the new controller. 3.It performs the transition configured in the segue. 58

59 Storyboard Scene Connections Containment relationships are for parentchild connections Navigation Controllers, Tab Bar Controllers Segues are for transitions between views 59

60 Segue Identifiers Pick a segue identifier right away Under the Attributes Inspector, for the Identifier enter showinput 60