A Table View Based App for iPhone (Part 4)

In part 3 [link to Part 3 blog] of this blog, we added functionality to our table view app to add and delete rows from the table and from the data source. The source file for part three is available [link to Friends3 code zip] here, and the full source for this part is available [link to Friends4 code zip] here.

In this final part of this blog, we’ll be exploring how to group the rows of a table view and sort them alphabetically. So let’s get started!

Open the Friends.xcodeproj file from part 3 and navigate to the Friends.h file. We will be adding a method that will return a new dictionary containing values corresponding to the names in the friendsDictionary object, and keys that are the unique first letters of those names. Here is Friends.h:




In Friends.m, we add the definition of the dictionaryKeyedByFirstCharOfKeys method, and also add a couple of private methods to help obtain this dictionary:




Notice that we have declared the two private methods in a class extension (an @interface at the top of the implementation file). This is not strictly necessary, but is a good habit to get into. The dictionaryKeyedByFirstCharOfKeys method uses both arrayOfKeysHavingFirstChar: and sortedArrayOfKeys to build the new dictionary. If we put a log statement in the view controller that calls this method, we can see a sample of the output it will produce:

The keys of this new dictionary will become the headers for the sections in the table view, and the values will be the keys we use to populate the cells in the table view.

Now we must set up our table view controller to display its data using a grouped (rather than single section) mode. The first step is to instantiate the controller using a grouped style in AppDelegate.m:




Now make the following changes to FriendsViewController.m (the entire file is listed, as there are several changes to be made):




We alter the numberOfSectionsInTableView: and numberOfRowsInSection: to take advantage of our new groupable data in the Friends class. Also note that we supply a header for each section in the tableView: titleForHeaderInSection: method by alphabetizing the keys of the dictionary returned by the dictionaryKeyedByFirstCharOfKeys method of the Friends class.

The most important changes are made in the tableView: cellForRowAtIndexPath: method. These changes are necessary to get the proper entry for each section and each row in the section. Study the code carefully to understand how it works.

There are two modes for the display of a grouped table view, controlled by settings in the xib file. By default, when we run the app now, the table view will be displayed like this, with the headers as moving bars above each section:

If we modify the style in the Attributes Inspector for the table view (in FriendsViewController.xib) as shown here, the table view will be grouped with a larger division between each section.

Play around with various settings to see the result, and enjoy developing Table View Applications!

Leave a Comment: