ITP 342 Mobile App Dev. Table Views

Transcription

1 ITP 342 Mobile App Dev Table Views

2 Table Views The most common mechanism used to display lists of data to the user 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 2

3 Table View Styles There are two major styles of table views: plain and grouped. The two styles are distinguished mainly by appearance. Plain Table Views Grouped Table Views 3

4 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 4

5 Indexed List A variation of plain table views associates an index with sections for quick navigation which is called an indexed list. The index runs down the right edge of the table view. Entries in the index correspond to section header titles. Touching an item in the index scrolls the table view to the associated section. The rows in indexed lists should not have disclosure indicators or detail disclosure buttons, because these interfere with the index. 5

6 Grouped Table View Rows are displayed in groups, which can be preceded by a header and followed by a footer A grouped table view always contains at least one group of list items one list item per row and each group always contains at least one item A grouped table view 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 Standard Styles for Table View Cells 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. A Closer Look at Table View Cells n/userexperience/conceptual/tableview_iphone/table ViewCells/TableViewCells.html 8

9 Cell Styles 9

10 Default The default cell style includes an optional image in the left end of the row, followed by a left-aligned title. The default style is good for displaying a list of items that don t need to be differentiated by supplementary information. This style is associated with the UITableViewCellStyleDefault constant. 10

11 Subtitle The subtitle style includes an optional image in the left end of the row, followed by a leftaligned title on one line and a leftaligned subtitle on the line below. The left alignment of the text labels makes the list easy to scan. This table cell style works well when list items look similar, because users can use the additional information in the detail text labels to help distinguish items named in the text labels. This style is associated with the UITableViewCellStyleSubtitle constant. 11

12 Value 1 The value 1 style displays a left-aligned title with, on the same line, a rightaligned subtitle in a lighter font. It is associated with the UITableViewCellStyleValue1 constant. 12

13 Value 2 The value 2 style displays a right-aligned title in a blue font, followed on the same line by a left-aligned subtitle in a black font. Images don t fit well in this style. In the value 2 layout, the crisp vertical margin between the text and the detail text helps users focus on the first words of the detail text label. It is associated with the UITableViewCellStyleValue2 constant. 13

14 Table View Elements 14

15 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 15

16 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 16

17 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 17

18 Table Project Create a Single View Application for iphone Call it TableView Delete the view controller from the storyboard Select it (should be outlined in blue) and hit the delete key Delete the ViewController (.h and.m) files Select both files, right click, and select Delete Click the Move to Trash button

19 Working with Tables Create a new Objective-C class named ExampleTableViewController File à New à File Make it a subclass of UITableViewController Add it into the TableView à TableView folder 19

20 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 Identity Inspector, set its class identity to ExampleTableViewController 20

21 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 21

22 Delegate Pattern 22

23 What the Data Source Provides // UITableViewDataSource - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableview; - (UITableViewCell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath; - (NSInteger)tableView:(UITableView *)tableview numberofrowsinsection:(nsinteger)section; SWIFT // UITableViewDataSource 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 23

24 Answering the Questions How many sections? // ExampleTableViewController.m // Return the number of sections - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableview{ return 1; } SWIFT // ExampleTableViewController.swift // Return the number of sections func numberofsections(in tableview: UITableView) -> Int { return 1 } 24

25 Answering the Questions How many rows? // ExampleTableViewController.m // Return number of rows in the section - (NSInteger)tableView:(UITableView *)tableview numberofrowsinsection:(nsinteger)section{ return 100; } SWIFT // ExampleTableViewController.swift // Return the number of rows in the section func tableview(_ tableview: UITableView, numberofrowsinsection section: Int) -> Int { return 100 } 25

26 Configuring Rows (Cells) // ExampleTableViewController.m - (UITableViewCell *)tableview:(uitableview *)tableview cellforrowatindexpath: (NSIndexPath *)indexpath{ static NSString *cellidentifier UITableViewCell *cell = [tableview dequeuereusablecellwithidentifier:cellidentifier]; // Configure the cell cell.textlabel.text = [NSString stringwithformat:@"row %d", indexpath.row]; } return cell; 26

27 Configuring Rows (Cells) SWIFT // ExampleTableViewController.swift // Return the number of rows in the section func tableview(_ tableview: UITableView, cellforrowat indexpath: IndexPath) -> UITableViewCell { let cellidentifier = "TableCell" let cell = tableview.dequeuereusablecell(withidentifier: cellidentifier) // Configure the cel.. cell?.textlabel?.text = "Row \(indexpath.row)" } return cell 27

28 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 dequeuereusablecellwithidentifier:] you either: A. Get a cell that has previously been created and isn't currently being used OR B. Create a new cell of the class you specified 28

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

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

31 Need a Model Let's use the DataModel from a previous project Drag DataModel files (.h and.m) into Table View project 31

32 DataModel 32

33 Data Model Your model should have public methods: // DataModel : NSObject - (NSUInteger) numberofstudents; - (NSDictionary *) randomstudent; - (NSDictionary *) studentatindex:(nsuinteger) index; - (void) insertstudent: (NSDictionary *) studentobj atindex: (NSUInteger) index; - (void) insertstudent: (NSDictionary *) studentobj; - (void) insertstudent: (NSString *) lastname firstname: (NSString *) firstname; - (void) insertstudent: (NSString *) lastname firstname: (NSString *) firstname atindex: (NSUInteger) index; - (void) removestudentatindex: (NSUInteger) index; - (NSDictionary *) nextstudent; - (NSDictionary *) 33

34 Data Model Your model should have public methods: SWIFT // DataModel.swift class DataModel{ } // Properties... func numberofstudents() -> Int func randomstudent() -> [String: String] func studentatindex(index: Int) func insertstudentatindex(index: Int) func insertstudent(lastname: String, firstname: String) func insertstudent(lastname: String, firstname: String, index: Int) func removestudentatindex(index: Int) func nextstudent() -> [String : String] func prevstudent() -> [String : String ] 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 ExampleTableViewController Instantiate it in the viewdidload method (Objective-C) // ExampleTableViewController.m #import "ExampleTableViewController.h" #import ExampleTableViewController (strong, nonatomic) ExampleTableViewController - (void)viewdidload { [super viewdidload]; } self.model = [[DataModel alloc] init]; 36

37 Modify Table View Methods // ExampleTableViewController.m // Return number of sections - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableview { return 1; } // Return numbers of rows in section - (NSInteger)tableView:(UITableView *)tableview numberofrowsinsection:(nsinteger)section { return [self.model numberofstudents]; } 37

38 Modify Table View Methods // ExampleTableViewController.m // Return cell at a given index path - (UITableViewCell *)tableview:(uitableview *)tableview cellforrowatindexpath: (NSIndexPath *)indexpath { UITableViewCell *cell = [tableview dequeuereusablecellwithidentifier:@"tablecell" forindexpath:indexpath]; // Configure the cell... NSDictionary *student = [self.model studentatindex:indexpath.row]; cell.textlabel.text = student[kfirstname]; cell.textlabel.text = student[klastname]; } return cell; 38

39 Add Model to View Controller Create a DataModel property in the ExampleTableViewController SWIFT // ExampleTableViewController.swift import UIKit class ExampleTableViewController: UITableViewController { } var datamodel = DataModel() 39

40 Modify Table View Methods SWIFT // ExampleTableViewController.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 self.datamodel.numberofstudents() } 40

41 Modify Table View Methods SWIFT // ExampleTableViewController.swift // Return cell for row at index path override func tableview(_ tableview: UITableView, cellforrowat indexpath: IndexPath) -> UITableViewCell { let cell = tableview.dequeuereusablecell(withidentifier: "TableCell", for: indexpath) // Configure the cell... let student = self.datamodel.studentatindex(index: indexpath.row) cell.textlabel?.text = student[kfirstname] cell.detailtextlabel?.text = student[klastname] } return cell 41

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

43 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? 43

44 Delete table cells Modifying Tables Add navigation control Enable edit button in viewdidload method Use the public remove method in the model Implement the tableview: commiteditingstyle: forrowatindexpath method 44

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

46 46

47 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 47

48 Enable Editing // ExampleTableViewController.m - (void)viewdidload { [super viewdidload]; } self.navigationitem.rightbarbuttonitem = self.editbuttonitem; SWIFT // ExampleTableViewController.swift override func viewdidload() { super.viewdidload() } self.navigationitem.rightbarbuttonitem = self.editbuttonitem 48

49 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! 49

50 Enable Editing In ExampleTableViewController implementation file Uncomment the edit method boilerplate tableview: commiteditingstyle: forrowatindexpath: If you did not subclass UITableViewController, then you will have to add the method 50

51 Delete the Table Cell // ExampleTableViewController.m - (void) tableview: (UITableView *) tableview commiteditingstyle: (UITableViewCellEditingStyle) editingstyle forrowatindexpath: (NSIndexPath *) indexpath { if (editingstyle == UITableViewCellEditingStyleDelete){ // Delete from the model [self.model removestudentatindex:indexpath.row]; } } // Delete the row from data source [tableview deleterowsatindexpaths:@[indexpath] withrowanimation:uitableviewrowanimationfade]; 51

52 Delete the Table Cell SWIFT // ExampleTableViewController.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) 52

53 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 53

54 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 54

55 Enabling Text Entry Open the TextInput project Drag the following files into your TableView project InputViewController.h InputViewController.m 55

56 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 56

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

58 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. 58

59 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. 59

60 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. 60

61 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. 61

62 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. 62

63 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 63

64 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. 64

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

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

67 Handle Input Completion Supply a block Use the prepareforsegue: sender: method Add the data to the model using the one of its insert methods Insert a row into the table NSIndexPath *indexpath = [NSIndexPath indexpathforrow:answerindex insection:0]; [self.tableview insertrowsatindexpaths:@[indexpath] withrowanimation:uitableviewrowanimationfade]; Dismiss the input view [self dismissviewcontrolleranimated:yes completion:nil]; 67