UITableView divided into Sections

Each section can have a title. The title for the last section starts with a '\n' (newline character) for extra vertical space. Each section can also have a footer.

Source code in Section.zip

  1. main.m
  2. Class SectionAppDelegate
  3. Class TableViewController

The UITableViewController acts as the data source for the table view. The UITableViewController must therefore have the following methods. We have already seen the first three.

  1. numberOfSectionsInTableView:
  2. tableView:numberOfRowsInSection:
  3. tableView:cellForRowAtIndexPath:
  4. tableView:titleForHeaderInSection: and tableView:titleForFooterInSection:. Optional. See tableView:viewForHeaderInSection: if you want a picture instead of a line of text.

The UITableViewController also acts as the delegate for the table view. The UITableViewController must therefore have the following method.

  1. tableView:didSelectRowAtIndexPath:

Things to try

  1. Give each section a footer, just like the headers. Give the view controller a method named tableView:titleForFooterInSection:. If it looks better without the footers, remove them.

  2. Make the headers and footers float by changing the table view’s style from UITableViewStyleGrouped to UITableViewStylePlain in the application:didFinishLaunchingWithOptions: method of the application delegate. Then change it back: the grouped style with the rounded edges looks better.

  3. Add an index along the right edge of the window. Add the following two methods to the data source.
    - (NSArray *) sectionIndexTitlesForTableView: (UITableView *) tv
    {
    	return [NSArray arrayWithObjects: @"EST", @"CST", @"MST", @"PST", @"Misc.", nil];
    }
    
    
    - (NSInteger) tableView: (UITableView *) tv
    	sectionForSectionIndexTitle: (NSString *) title
    	atIndex: (NSInteger) index
    {
    	//one-to-one correspondence between sections and section index titles
    	return index;
    }
    

  4. [Advanced]. I’m sorry we have miscellaneous strings scattered throughout the methods tableView:titleForHeaderInSection:, tableView:titleForFooterInSection, and sectionIndexTitlesForTableView:. Let’s concentrate all the strings in one big array. This is called programming.

    Change zones (the array of five arrays) to an array of five dictionaries. Each dictionary will contain four keys and four corresponding values. The first key will be @"header", and the corresponding value will be the header for the section. The second key will be @"footer", and the corresponding value will be the footer for the section. The third key will be @"index", and the corresponding value will be the index word along the right edge of the window. The fourth key will be @"names" and the corresponding value will be the array of state names.

    	zones = [NSArray arrayWithObjects:
    
    		[NSDictionary dictionaryWithObjectsAndKeys:
    			@"EST: Eastern Standard Time", @"header",
    			@"",                           @"footer",
    			@"EST",                        @"index",
    
    			[NSArray arrayWithObjects:
    				@"Alabama",
    				@"Connecticut",
    				@"Delaware",
    				//etc.
    				nil
    			],                             @"names"
    
    			nil
    		],
    
    		[NSDictionary dictionaryWithObjectsAndKeys:
    			@"CST: Central Standard Time", @"header",
    			@"",                           @"footer",
    			@"CST",                        @"index",
    
    			[NSArray arrayWithObjects:
    				@"Arkansas",
    				@"Illinois",
    				@"Iowa",
    				//etc.
    				nil
    			],                             @"names"
    
    			nil
    		],
    
    		//etc.
    		nil
    	];
    
    Even better, put the above array of dictionaries in a separate object. The class of the object should be named Model.