Add a TableView to an iOS Application

It's often necessary for applications to display a list of items to the user. The way this is done in iOS applications is by subclassing UITableViewController.

Add a new Objective-C class to the application. (Name the class GasCansViewController.) However, this time, the subclass should be UITableViewController. (Note: It's also not necessary to create a .xib file for this class.)

Once the class has been created, I'll temporarily remove the details view which was created in a prior lesson, and instead instantiate this new view. So, within GasCanManAppDelegate.m, alter the didFinishLaunchingWithOptions method as follows:

  1. #import "GasCanManAppDelegate.h"
  2. //#import "GasCanDetailViewController.h"
  3. #import "GasCansViewController.h"
  4.  
  5. @implementation GasCanManAppDelegate
  6.  
  7. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  8. {
  9. self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
  10. // Override point for customization after application launch.
  11.  
  12. // GasCanDetailViewController *baseView = [[GasCanDetailViewController alloc] init];
  13. // [self.window setRootViewController:baseView];
  14.  
  15. GasCansViewController *tableView = [[GasCansViewController alloc] init];
  16. [self.window setRootViewController:tableView];
  17.  
  18. self.window.backgroundColor = [UIColor whiteColor];
  19. [self.window makeKeyAndVisible];
  20. return YES;
  21. }

It's now necessary to update the newly created view controller with some specifics. Within the file GasCansViewController.m, import headers and update the initialization code as follows:

  1. - (id)initWithStyle:(UITableViewStyle)style {
  2. return [self init];
  3. }
  4.  
  5. -(id) init {
  6. self = [super initWithStyle:UITableViewStyleGrouped];
  7. if (self) {
  8. [[GasCanStore canStore] createCan:5 withName:@"Can one"];
  9. [[GasCanStore canStore] createCan:4 withName:@"Can two"];
  10. [[GasCanStore canStore] createCan:3 withName:@"Can three"];
  11. [[GasCanStore canStore] createCan:2 withName:@"Can four"];
  12. [[GasCanStore canStore] createCan:1 withName:@"Can five"];
  13. }
  14. return self;
  15. }

In this code, the initialization code ensures that the style of the table is hard-wired to be "grouped". Also, five gas cans are created within the gas can store.

In order to actually display the items in the store, there are three methods that must be implemented. Add the following code to the class:

  1. -(void)viewWillAppear:(BOOL)animated {
  2. [super viewWillAppear:animated];
  3. [[self tableView] reloadData];
  4. }
  5.  
  6. -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  7. return [[[GasCanStore canStore] allCans] count];
  8. }
  9.  
  10. -(UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  11. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"GasCanCell"];
  12.  
  13. if (cell == nil) {
  14. cell = [[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault
  15. reuseIdentifier:@"GasCanCell"];
  16. }
  17. GasCan *can = [[[GasCanStore canStore] allCans] objectAtIndex:[indexPath row]];
  18. NSString *curLabel = [NSString stringWithFormat:@"%@ (%f)",can.name, can.level];
  19. [[cell textLabel] setText:curLabel];
  20. return cell;
  21. }
  • The first method ensures that data is refreshed when the view is about to be displayed
  • The second method tells the view the number of items that will be displayed
  • The third method constructs a view that is displayed in the UI. Note that for memory purposes, it's possible to reuse previously constructed cells.

Save and run the application. Your screen should look as follows:


Now that I've constructed a detailed view of a gas can, and a means to display a list of gas cans, it's time to connect these two views and navigate between them.