iCode Tips

In this short tutorial I will explain how to create and use an UITableView that has custom cell, that are loaded from a diferent xib file.

In this tutorial you will also learn how to create a simple table view, connect an outlet to it, and also create it’s datasource and delegate.

This is helpful when you have tables that have complicated designs for the cells and you don’t want to create them from code, and it’s much easier to change.

So create a new viewbased project, right click on classes and add file, select a cocoa touch class and select the options like in the image bellow :

create new uitableview cell

click next and name it something like “ACellView”, remember to check the also create h file button if it’s not checked.

Now we have t0 create the xib file for the cell : right click resources folder , add, and add file and select user interface and an empty xib file :

create new empty xib for cell

Now double click the xib file to actually create the cell view :

First of all, we have to create a view for the cell, this is not just a view it’s a table cell view, if you look in the library you will see this kind of view, drag one :

drag a cell view

After you added the view, you have to identify the view, go to the identity inspector and select the class of the cell, this is the class previously created.

change identity of the cell view

You also have to set an unique cell identifier, this is used for memory management to reuse cell, and not allocate new ones, it’s a huge memory improvement, especially when you are working with tables which have a large number of cells.

add unique cell identifier

And the final step is to add a label to the cell view, we can add here whatever we want, but just for the demo we will add a simple label.

add a lablel

Now, open your viewcontroller header file, it should only be one header file which containts “viewcontroller” and copy the code(remember to change the name of the view controller so it matches yours :

#import <UIKit/UIKit.h>

@interface TVC2ViewController : UIViewController
<UITableViewDelegate, UITableViewDataSource>{

 UITableView *tableView_;

}

@property (nonatomic, retain) IBOutlet UITableView *tableView;

@end

You can see that we added one the datasource and the delegate for a table view, also we added an outlet to a table view, now it’s time to connect them to the table view, but before we do that enter the following line after the implementation line in your m file of the view controller :

@synthesize tableView = tableView_;

Now in the resources group double click the main view xib file, it has the same name as the view controller, the interface builder will open with the empty view.

Now we will create a table view and link it to out outlet, also we will set the datasource and delegate for the tableview.

adding a table view

Just drag a table view from the library to the view, this is very simple, also the table view will take the size of the view, but you can than resize it to any size you want.

Next we connect out outlet to the table view :

connecting the outlet

Now we have to set the datasource and delegate for the table view, without them the table view will display no data. The data source will be used to retrieve the table data, like the number of sections, number of rows, etc. The delegate will be called when certain actions are triggered, like selecting a cell, or just before selecting a cell.

If the connection inspector is not opened you can open it from tools menu.

adding the datasource

And now you should be done with the xib, select the table view and take a look in the connection inspector, it should look like in the image bellow :

check the connections

Now that this is done all we have left to do is create some code to have some data, and implement the delegate and data source.

Go to the .m file of you view controller, and scroll down at the end of the file and paste in the code :

#pragma mark -
#pragma mark UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 return 5;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

 NSString *CustomCellIdentifier = [NSString stringWithFormat:@"CustomCell"];

 ACellView *cell = (ACellView *)[tableView dequeueReusableCellWithIdentifier: CustomCellIdentifier];
 if (cell == nil)
 {
 NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"ACellView" owner:self options:nil];
 cell = (ACellView *)[nib objectAtIndex:0];
 }

 return cell;

}

#pragma mark -
#pragma mark Uitableviewdelegate
- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath {
 return NO;
}

If you compile now you will get an error, because you did now included the cellview file, just import the ACellView.h file, compile it, and everything should be ok.

program is running

As a final note, please keep in mind that the code above is just the base to start it working, the number of cells is hardcoded, and we are not setting any content to the cells, to do that you will have to add some outlets… maybe I’ll write about that in a future tutorial.

If you have any problems, or questions please do not hesitate to ask, and I will answer ASAP.