Introduction to TableViews Part 1

This tutorial will introduce to one of the common used UI component in iOS, the TableView. We're going to use the TableView to list a bunch of iOS programming Books.The final result will look like this:

Update: June 23, 2014. This tutorial is made with Xcode 4 and targeted for iOS 6. The fully updated version for iOS7 and Xcode 5 is available here.

Let's start. Open a New Project, Select a Single View Application and fill in the following Info.

Choose a location and Click Create.

This App will only run in Portrait mode So only select the portrait icon in the supported device orientation section.

Also change the shouldAutorotateToInterfaceOrientation in IOSBooksViewController.m to the following:

 

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation 
{
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

Delete the Books View Controller in The Storyboard editor and change the @interface line in IOSBooksViewController.h from:

@interface IOSBooksViewController : UIViewController

to:

@interface IOSBooksViewController : UITableViewController

Go back to the StoryBoard Editor and drag a TableView Controller on the Canvas.

Go to the Identity Inspector and change the class in IOSBooksViewController

Run the App And now you should see the empty Table View.

Our TableView contains a number of rows, which will be filled with IOS Books. In IOS 5 you can design the Prototype Cells visually in the StoryBoard editor. Drag a Label onto the Protype Cell on our Tabel View. Expand the Label so it almost fill up the entire cell, Enter for the placeholder text "Book Item" and change the Font to System Bold Size 17. Also uncheck the Autoshrink option.

Select the TableView Cell and in the Attribute Inspector enter BookItem for the "Reuse Identifier". This will be used for the reuse when rows scroll off the screen and new rows must become visible. In a moment we'll hook this identifier up in our code.

Add the following methods to IOSBooksViewController.h

 

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 5;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"BookItem"];
return cell;
}

The numberOfROwsinSection returns the number of sections.The table view then calls the  cellForRowAtIndexPath method to obtain a cell for that row. Inside cellForRowAtIndexPath we simply grab a copy of the prototype cell. NSIndexPath is an object that points to a specific row in the table.

If you run the app now, you'll see the rows are filled with the default placeholder text.

Go to the Storyboard Editor and set the tag number from the label to 100. This is a unique number to easily reference the label, it will be handy later on to change the text.

Time to fill those rows with real data. Create a new file, choose Objective-C class and name the class IOSBook, make the ckass a subclass of NSObject. This should produce the following files.

//IOSbook.h
#import <Foundation/Foundation.h>

@interface IOSBook : NSObject

@end

//IOSBook.m
#import "IOSBook.h"

@implementation IOSBooks

- (id)init
{
self=[super init];
if (self) {
//Init code here
}
return self;
}

@end

Add a property to IOSBook.h before the @end directive

@property (nonatomic, copy) NSString *title;

Synthesize this property in IOSBook.m right below the @implementation directive

@synthesize title = _title;

The title property represents the title of the IOS Book. We need to let the View Controller know about the IOSBook object with

//IOSBooksViewController.m 

#import "IOSBook.h"

Create a mutable array which will contain the IOSBook objects. Mutable means, can be changed.

@implementation IOSBooksViewController 
{
NSMutableArray *books;
}

Change ViewDidLoad in IOSBooksViewController to

- (void)viewDidLoad
{
[super viewDidLoad];

books = [[NSMutableArray alloc] initWithCapacity:10];

IOSBook *book;

book = [[IOSBook alloc] init];
book.title = @"Beginning iOS 5 Development";
[books addObject:book];

book = [[IOSBook alloc] init];
book.title = @"iOS 5 Programming Cookbook";
[books addObject:book];

book = [[IOSBook alloc] init];
book.title = @"Programming iOS 5";
[books addObject:book];
book = [[IOSBook alloc] init];
book.title = @"The iOS 5 Developer's Cookbook";
[books addObject:book];

book = [[IOSBook alloc] init];
book.title = @"Beginning iOS 5 Games Development";
[books addObject:book];
}

Here we allocate the books array with a size of 10 items. Then we create a book item which is added to the books array.

Change the cellForRowAtIndexPath to

 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"BookItem"];

IOSBook *book = [books objectAtIndex:indexPath.row];

UILabel *label = (UILabel *)[cell viewWithTag:100];
label.text = book.title;

return cell;
}

The objectAtIndex method iterates through the array and the text from the label is updated with the book title.

If you run the app you'll see all the IOS Books nicely displayed in our TableView

Next time, we'll continue with our app, where we will add some functionality to add and delete books from our TableView. Till the next time.

You can download the source code of this project here