Table Views

1. Table Views UITableView

2. Overview • Table view basics • 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

3. Views vs Cells • A tableview 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 UITabeViewdelegate protocol • They get their row data from the object that conforms to the UITableViewDataSourceprotocol

5. Table Cells • Each row is represented by a single UITableViewCell • Each UITableViewCellobject 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. • Leave unchecked: include unit tests, use storyboards • Check use automatic reference counting • 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 nib

11. Creating the view • Click on the nib to show IB • Find a Table View in the library and drag to the view. • The table view should automatically size itself to fill the entire view. • Click on the view, bring up the connections inspector • Under the outlets section drag from dataSourceto File’s Owner in the dock • Under the outlets section drag from delegate to File’s Owner in the dock This makes the viewController both the data source and delegate for the table.

12. Creating the controller • in the Project Navigator click on the xxxViewController.h file and add the bold: @interface CMPViewController : UIViewController<UITableViewDataSource, UITableViewDelegate> @property (copy, nonatomic) NSArray *dwarves; @end This makes the view controller 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.

13. Creating the controller II • in the Project Navigator click on the xxxViewController.mfile and add the bold: #import "BIDViewController.h” @implementation BIDViewController −(void)viewDidLoad { [super viewDidLoad]; self.dwarves = @[@"Sleepy", @"Sneezy", @"Bashful", @"Happy", @"Doc", @"Grumpy", @"Dopey", @"Thorin", @"Dorin", @"Nori", @"Ori", @"Balin", @"Dwalin", @"Fili", @"Kili", @"Oin", @"Gloin", @"Bifur", @"Bofur", @"Bombur"]; } The array will hold our table data

14. Creating the controller II • in the Project Navigator click on the xxxViewController.mfile and add the bold: −(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return[self.dwarvescount]; } 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) We need as many rows as we have array entries.

15. Creating the controller II • in the Project Navigator click on the xxxViewController.mfile and add the bold: −(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { staticNSString *SimpleTableIdentifier = @"SimpleTableIdentifier"; This method is called by the table when it needs a cell to display. We must return a UITableViewCell We identify the cells so that they can be reused later. Method continued on next slide….

16. Creating the controller II • in the Project Navigator click on the xxxViewController.mfile and add the bold: UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier: SimpleTableIdentifier]; if (cell == nil) { cell = [[UITableViewCellalloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SimpleTableIdentifier]; } cell.textLabel.text = self.dwarves[indexPath.row]; returncell; } @end We check to see if there is an unused cell of the correct type that we can reuse. If there was no leftover cell we have to create a new one. Use default style; there are others! The indexPath variable 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.

17. Run! • Should see a table. • But can’t select anything yet!

18. More on Cells • Add image • Add icon image to Xcode (size 40x40, 80x80 for retina) (see Lectures−>Programming−>star.png) • Change the method below (assuming icon has name star.png) UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier: SimpleTableIdentifier]; if (cell == nil) { cell = [[UITableViewCellalloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SimpleTableIdentifier]; } UIImage*image = [UIImageimageNamed:@"star.png"]; cell.imageView.image = image; cell.textLabel.text = self.dwarves[indexPath.row]; returncell; }

19. More on Cells Subtitle • Add detail text • Cells can have additional (“detail”) text. • There are different cell types also. UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier: SimpleTableIdentifier]; if (cell == nil) { cell = [[UITableViewCellalloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:SimpleTableIdentifier]; } UIImage*image = [UIImageimageNamed:@"star.png"]; cell.imageView.image = image; if (indexPath.row < 7) { cell.detailTextLabel.text = @"Mr. Disney"; } else { cell.detailTextLabel.text = @"Mr. Tolkien"; } cell.textLabel.text = self.dwarves[indexPath.row]; returncell; } 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

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

21. Detecting Row Selection • When a row will be selected. Can prevent or change the selection • Add to viewController.m: − (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.row == 0) { return nil; } else { return indexPath; } } Prevents row 0 from being selected.

22. Detecting Row Selection • When a row has been selected. Put up alert box: • Add to viewController.m: − (void)tableView:(UITableView *)tableViewdidSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSString *rowValue = self.dwarves[indexPath.row]; NSString *message = [[NSStringalloc] initWithFormat:@"You selected %@", rowValue]; UIAlertView *alert = [[UIAlertViewalloc] initWithTitle:@"Row Selected!" message:message delegate:nil cancelButtonTitle:@"Yes I Did" otherButtonTitles:nil]; [alert show]; [tableViewdeselectRowAtIndexPath:indexPathanimated:YES]; } Find the name of the dwarf for the selected row A typical alert box Now deselect the row

23. 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 a nib file • Add groups • Add indexes • Add navigation bar or search bar • Detail disclosure buttons (chapter 9)