Apple Development Technology Workshops

Transcription

1 Apple Development Technology Workshops Workshop 10 Table Views Building iphone Apps. Pt 2 Fall 2008 Hafez Rouzati Fall 2008 Zach Pousman

2 Last Week UIViewControllers Organizing Content & Building iphone Apps with Navigation & Tab Bar Controllers

3 Today What is a table view? Anatomy of a Table View Classes UITableViewController Protocols UITableViewDataSource UITableViewDelegate

4 Table Views

5 Table Views

6 Table Views

7 Table Views Display lists of content! Single column, multiple rows! Vertical scrolling! Large data sets Powerful and ubiquitous in iphone applications

8 Table View Styles UITableViewStylePlain UITableViewStyleGrouped

9 Table View Anatomy Plain Style Table Header Section Header Table Cell Section Footer Section Table Footer

10 Table View Anatomy Grouped Style Table Header Section Header Table Cell Section Footer Section Table Footer

11 Using Table Views Displaying your data in the table view Customizing appearance & behavior

12 Displaying Data in a Table View

13 A Naïve Solution Table views display a list of data, so use an array [mytableview setlist:mylistofstuff]; Issues with this approach! All data is loaded upfront! All data stays in memory

14 A More Flexible Solution Another object provides data to the table view! Not all at once! Just as it s needed for display Like a delegate, but purely data-oriented

15 UITableView Datasource Provide number of sections and rows // Optional method, defaults to 1 if not implemented - (NSInteger)numberOfSectionsInTableView:(UITableView *)table; // Required method - (NSInteger)tableView:(UITableView *)tableview numberofrowsinsection:(nsinteger)section; Provide cells for table view as needed // Required method - (UITableViewCell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath;

16 NSIndexPath Generic class in Foundation Path to a specific node in a tree of nested arrays

17 NSIndexPath and Table Views Cell location described with an index path! Section index + row index Category on NSIndexPath with helper NSIndexPath (UITableView) + (NSIndexPath *)indexpathforrow:(nsuinteger)row NSUInteger NSUInteger

18 Single Section Table View Return the number of rows - (NSInteger)tableView:(UITableView *)tableview numberofrowsinsection:(nsinteger)section { return [mystrings count]; } Provide a cell when requested - (UITableViewCell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath { UITableViewCell *cell =...; cell.text = [mystrings objectatindex:indexpath.row] return [cell autorelease]; }

19 Datasource Message Flow Datasource

20 Datasource Message Flow numberofsectionsintableview: How many sections? Datasource

21 Datasource Message Flow numberofsectionsintableview: Datasource 5

22 Datasource Message Flow tableview:numberofrowsinsection: How many rows in section 0? Datasource

23 Datasource Message Flow tableview:numberofrowsinsection: Datasource 1

24 Datasource Message Flow tableview:cellforrowatindexpath: What to display at section 0, row 0? Datasource

25 Datasource Message Flow tableview:cellforrowatindexpath: Cell with text John Appleseed Datasource

26 Triggering Updates When is the datasource asked for its data?! When a row becomes visible! When an update is explicitly requested by calling -reloaddata - (void)viewwillappear:(bool)animated { [super viewwillappear:animated]; } [self.tableview reloaddata];

27 Additional Datasource Methods Titles for section headers and footers Allow editing and reordering cells

28 Appearance & Behavior

29 UITableView Delegate Customize appearance and behavior Keep application logic separate from view Often the same object as datasource

30 Table View Appearance & Behavior Customize appearance of table view cell - (void)tableview:(uitableview *)tableview willdisplaycell:(uitableviewcell *)cell forrowatindexpath:(nsindexpath *)indexpath; Validate and respond to selection changes - (NSIndexPath *)tableview:(uitableview *)tableview willselectrowatindexpath:(nsindexpath *)indexpath; - (void)tableview:(uitableview *)tableview didselectrowatindexpath:(nsindexpath *)indexpath;

31 Row Selection in Table Views In iphone applications, rows rarely stay selected Selecting a row usually triggers an event

32 Responding to Selection // For a navigation hierarchy... - (void)tableview:(uitableview *)tableview didselectrowatindexpath:(nsindexpath *)indexpath { // Get the row and the object it represents NSUInteger row = indexpath.row id objecttodisplay = [myobjects objectatindex:row]; // Create a new view controller and pass it along MyViewController *myviewcontroller =...; myviewcontroller.object = objecttodisplay; } [self.navigationcontroller pushviewcontroller:myviewcontroller animated:yes];

33 Altering or Disabling Selection - (NSIndexPath *)tableview:(uitableview *)tableview willselectrowatindexpath:(nsindexpath *)indexpath { // Don t allow selecting certain rows? if (indexpath.row ==...) { return nil; } else { return indexpath; } }

34 UITableViewController

35 UITableViewController Convenient starting point for view controller with a table view! Table view is automatically created! Controller is table view s delegate and datasource Takes care of some default behaviors! Calls -reloaddata the first time it appears! Deselects rows when user navigates back! Flashes scroll indicators

36 Demo: UITableViewController

37 Table View Cells

38 Basic properties UITableViewCell has image and text properties cell.image = [UIImage imagenamed:@ obama.png ]; cell.text Barack Obama ;

39 Accessory Types // UITableView delegate method - (UITableViewCellAccessoryType)tableView:(UITableView *)table accessorytypeforrowwithindexpath:(nsindexpath *)indexpath; UITableViewCellAccessoryDisclosureIndicator UITableViewCellAccessoryDetailDisclosureButton UITableViewCellAccessoryCheckmark - (void)tableview:(uitableview *)tableview accessorybuttontappedforrowwithindexpath:(nsindexpath *)indexpath { // Only for the blue disclosure button NSUInteger row = indexpath.row;... }

40 Customizing the Content View For cases where a simple image + text cell doesn t suffice UITableViewCell has a content view property! Add additional views to the content view - (void)tableview:(uitableview *)tableview willdisplaycell:(uitableviewcell *)cell forrowatindexpath:(nsindexpath *)indexpath { CGRect frame = cell.bounds; frame.size.width =...; UILabel *mylabel = [[UILabel alloc] initwithframe:frame]; mylabel.text =...; [cell.contentview addsubview:mylabel]; } [mylabel release];

41 Custom Row Heights Rows in a table view may have variable heights NSString category in UIStringDrawing.h is very useful for computing text sizes - (CGFloat)tableView:(UITableView *)tableview heightforrowatindexpath:(nsindexpath *)indexpath { NSString *text =...; UIFont *font = [UIFont systemfontofsize:...]; CGSize withinsize = CGSizeMake(tableView.width, 1000]; CGSize size = [text sizewithfont:font constrainedtosize:withinsize linebreakmode:uilinebreakmodewordwrap]; } return size.height + somepadding;

42 Questions? With thanks to Paul Marcos (Apple Inc. / Stanford) for the slide deck!

43 Exercise 10 - TableView-Based Application -Create a new iphone Window-Based Application project. -First, copy into the new project the color view controller class we used in the last exercise. -Next, add a new subclass of UITableViewController. This view controller will manage a table view that displays the names of several colors. -Implement a viewdidload: method to set the table view controller s title to Colors -In the application delegate, in the applicationdidfinishlaunching: method, create an instance of of UINavigationController and an instance of the table view controller (initialize it using the plain style). Push the table view controller as the first controller for the navigation controller. -Add the navigation controller s view as a subview of the application s window.

44 Exercise 10 In the table view controller, add a property that is an array that will contain information about colors. In its initializer method, create the array to contain the colors information. Color information is represented by a dictionary with two keys, name, with a corresponding string value representing the name of a color, and color, where the corresponding value is a color object of the appropriate color: dictionary = [[NSDictionary alloc] initwithobjectsandkeys: [UIColor name, nil]; Create dictionaries for several colors and add them to the array. Implement the table source delegate and data source methods to return appropriate values. (Note: -There is only one section in the table view. -There are as many rows as there are elements in the color information array. -In the tableview:cellforrowatindexpath: method, return a UITableViewCell instance with its text set to the name of the color at the releveant index) Implement a tableview:didselectrowatindexpath: method to create and push a new color view controller, configured using the color information from the dictionary at the corresponding location in the array.