EEC-492/693/793 iPhone Application Development Lecture 10 Wenbing Zhao & Nigamanth Sridhar 9/21/2018 EEC492/693/793 - iPhone Application Development

Outline Objective-C Introduction to table views Assignments: Categories Introduction to table views UITableView and UITableViewCell Grouped and indexed sections Creating UI elements in Code UISearchBar and magnifying glass Assignments: Various table view apps (chapter 8) Continue building the calculator app 9/21/2018 9/21/2018 EEC492/693/793 - iPhone Application Development EEC492/693/793 - iPhone Application Development 2

EEC492/693/793 - iPhone Application Development Category How to add new behavior to an existing class? Subclassing Categories You can add methods to any existing class You can even override methods the class inherits However, you cannot add instance variables to a class Category method names must be unique across an application When names collide, the category wins, i.e., your category method will completely replace the original method The method you added to the class will be accessible to any instance or subclass of the class 9/21/2018 EEC492/693/793 - iPhone Application Development

How to Define a Category Example: adding deep copy to NSDictionary @interface ClassToAddMethodsTo (category) ...methods go here @end #import <Foundation/Foundation.h> @interface NSDictionary(MutableDeepCopy) - (NSMutableDictionary *)mutableDeepCopy; @end 9/21/2018 EEC492/693/793 - iPhone Application Development

Implementation and Use a Category #import "NSDictionary-MutableDeepCopy.h" @implementation NSDictionary (MutableDeepCopy) - (NSMutableDictionary *) mutableDeepCopy { NSMutableDictionary *ret = [[NSMutableDictionary alloc] initWithCapacity:[self count]]; NSArray *keys = [self allKeys]; for (id key in keys) { id oneValue = [self valueForKey:key]; id oneCopy = nil; if ([oneValue respondsToSelector:@selector(mutableDeepCopy)]) oneCopy = [oneValue mutableDeepCopy]; else if ([oneValue respondsToSelector:@selector(mutableCopy)]) oneCopy = [oneValue mutableCopy]; if (oneCopy == nil) oneCopy = [oneValue copy]; [ret setValue:oneCopy forKey:key]; } return ret; } @end 9/21/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Fast Enumeration for (id key in keys) // fast enumeration It allows you to quickly iterate through a collection, such as NSArray, without the hassle of creating additional objects or loop variables 9/21/2018 EEC492/693/793 - iPhone Application Development

Other Uses of Categories Splitting an implementation into multiple .m files. For example: @interface NSWindow : NSResponder @interface NSWindow(NSKeyboardUI) @interface NSWindow(NSToolbarSupport) @interface NSWindow(NSDrag) @interface NSWindow(NSCarbonExtensions) @interface NSObject(NSWindowDelegate) 9/21/2018 EEC492/693/793 - iPhone Application Development

Other Uses of Categories Making forward references Objective-C doesn’t have any truly private methods If you know the method name, you can call it, even if there is no declaration for that method in the class’s @interface However, doing so you would see a compiler warning: ‘AClass’ may not respond to ‘-privateMethod:” To avoid the warning, you can declare the private method as a category at the top of the implementation file 9/21/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Table Views Table views are the most common mechanism used to display lists of data to the user Mail uses table views to show lists of accounts, folders, and messages Table views are not limited to the display of textual data: YouTube, Settings, iPod apps, etc. 9/21/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Table View Basics Number of rows: no limit Number of column: one! Table view: UITableView Each row: UITableViewCell 9/21/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Table View Basics Table views Get their configuration data from an object that conforms to the UITableViewDelegate protocol Get their row data from an object that conforms to the UITableViewDataSource protocol … Similar to Pickers! What can be put in a UITableViewCell? An image, some text, and an optional accessory icon, by default How to put even more data in a cell? Add subviews to UITableViewCell Subclassing UITableViewCell 9/21/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Table View Cell Styles Cell styles make use of three different cell elements Image: if an image is part of the specified style, the image is displayed to the left of the cell’s text Text label: this is the cell’s primary text Detail text label: the cell’s secondary text, usually used as an explanatory note or label Default style Subtitle style Style value 1 style Style value 2 style 9/21/2018 EEC492/693/793 - iPhone Application Development

Grouped and Plain Tables Table views come in two basic styles Grouped: each group is a set of rows embedded in a rounded rectangle Plain: default style, with no rounded rectangle It is referred to as indexed when an index is used 9/21/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Sections and Rows Each division of the table is a section In a grouped table, each group is a section In an indexed table, each indexed grouping of data is a section In a plain table without index, the entire table is one section 9/21/2018 EEC492/693/793 - iPhone Application Development

Table View Data Source Methods for the Simple Table App Used by the table to ask how many rows are in a particular section - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [self.listData count]; } 9/21/2018 EEC492/693/793 - iPhone Application Development

Table View Data Source Methods for the Simple Table App Called by the table view when it needs to draw one of its rows - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: SimpleTableIdentifier]; // to reduce overhead if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SimpleTableIdentifier] autorelease]; } NSUInteger row = [indexPath row]; cell.textLabel.text = [listData objectAtIndex:row]; return cell; If that new row can just reuse one of the cells that has already rolled off the screen, the system can avoid the overhead associated with constantly creating and releasing those views 9/21/2018 EEC492/693/793 - iPhone Application Development

Table View Delegate Methods for the Simple Table App Setting the indent level - (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row = [indexPath row]; return row; } 9/21/2018 EEC492/693/793 - iPhone Application Development

Table View Delegate Methods for the Simple Table App Method called when a user tapped a row (before the row is selected) -(NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row = [indexPath row]; if (row == 0) // prevent 1st row being selected return nil; return indexPath; } 9/21/2018 EEC492/693/793 - iPhone Application Development

Table View Delegate Methods for the Simple Table App Method called after a row is selected - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row = [indexPath row]; NSString *rowValue = [listData objectAtIndex:row]; … [tableView deselectRowAtIndexPath:indexPath animated:YES]; } 9/21/2018 EEC492/693/793 - iPhone Application Development

Table View Delegate Methods for the Simple Table App Method to specify the height of the table rows - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 70; } 9/21/2018 EEC492/693/793 - iPhone Application Development

Adding Subviews to the Table View Cell Coding UI Elements Directly CGRect nameLabelRect = CGRectMake(0, 5, 70, 15); UILabel *nameLabel = [[UILabel alloc] initWithFrame:nameLabelRect]; nameLabel.textAlignment = UITextAlignmentRight; nameLabel.text = @"Name:"; nameLabel.font = [UIFont boldSystemFontOfSize:12]; [cell.contentView addSubview: nameLabel]; [nameLabel release]; 9/21/2018 EEC492/693/793 - iPhone Application Development

Adding Subviews to the Table View Cell Accessing UI Element via tag CGRect nameValueRect = CGRectMake(80, 5, 200, 15); UILabel *nameValue = [[UILabel alloc] initWithFrame:nameValueRect]; nameValue.tag = kNameValueTag; [cell.contentView addSubview:nameValue]; [nameValue release]; NSUInteger row = [indexPath row]; NSDictionary *rowData = [self.computers objectAtIndex:row]; UILabel *name = (UILabel *)[cell.contentView viewWithTag:kNameValueTag]; name.text = [rowData objectForKey:@"Name"]; 9/21/2018 EEC492/693/793 - iPhone Application Development

Table View Data Source Methods for the Sections App Get number of sections (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return [keys count]; } Specify header value for each section - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section { NSString *key = [keys objectAtIndex:section]; return key; } 9/21/2018 EEC492/693/793 - iPhone Application Development

Table View Delegate Methods for the Sections App To add an index - (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView { return keys; } 9/21/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Adding a Search Bar What’s needed Creating a mutable copy of the dictionary and the keys as the data source Adding an outlet for the table, and another one for the search bar Adding search method, and reset method Adding search bar delegate methods Adding ways of displaying/hiding the index Adding ways of displaying/hiding the search bar 9/21/2018 EEC492/693/793 - iPhone Application Development