ios steps to create custom UITableViewCell with xib file

Question

I need to create my own UITableViewCell using the xib file, to draw the graphic interface... what are the right steps to create my new class and to use into my UITableView?<

Answer 1

In iOS5 you'll want to use the new:

registerNib:forCellReuseIdentifier:

Which basically does the same thing...

Answer 2

Personally I think that both suggested tutorials have a big flaw when it comes to reuseIdentifier. If you forget to assign it in interface builder or misspell it, you will load the nib each and every time cellForRowAtIndexPath gets called.

Jeff LaMarche writes about this and how to fix it in this blog post. Apart from reuseIdentifier he uses the same approach as in the apple documentation on Loading Custom Table-View Cells From Nib Files.

After having read all these articles I came up with following code:

Edit: If you are targeting iOS 5.0 and higher you'll want to stick with Duane Fields' answer

@interface CustomCellWithXib : UITableViewCell

+ (NSString *)reuseIdentifier;
- (id)initWithOwner:(id)owner;

@end

@implementation CustomCellWithXib

+ (UINib*)nib
{
    // singleton implementation to get a UINib object
    static dispatch_once_t pred = 0;
    __strong static UINib* _sharedNibObject = nil;
    dispatch_once(&pred, ^{
        _sharedNibObject = [UINib nibWithNibName:NSStringFromClass([self class]) bundle:nil];
    });
    return _sharedNibObject;
}

- (NSString *)reuseIdentifier
{
    return [[self class] reuseIdentifier];
}

+ (NSString *)reuseIdentifier
{
    // return any identifier you like, in this case the class name
    return NSStringFromClass([self class]);
}

- (id)initWithOwner:(id)owner
{
    return [[[[self class] nib] instantiateWithOwner:owner options:nil] objectAtIndex:0];
}

@end

UINib (available in iOS 4.0 and later) is used here as a singleton, because although the reuseIdentifier is used, the cell still gets re-initialized about 10 times or so. Now cellForRowAtIndexPath looks like this:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomCellWithXib *cell = [tableView dequeueReusableCellWithIdentifier:[CustomCellWithXib reuseIdentifier]];
    if (cell == nil) {
        cell = [[CustomCellWithXib alloc] initWithOwner:self];
    }

    // do additional cell configuration

    return cell;
}

Answer 3

You can create CustomCell class with XIB that is inherited from UITableViewCell. We will just add category in tableview class .m file in following way. I think this is the easiest method which an be applied for custom cell creation.

    @interface UITableViewCell(NIB)
    @property(nonatomic,readwrite,copy) NSString *reuseIdentifier;
    @end
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        return 30;
    }

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    static NSString *identifier=@"cell";
        CustomCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
        if(cell==nil)
        {
             NSLog(@"New Cell");
            NSArray *nib=[[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
            cell=[nib objectAtIndex:0];
            cell.reuseIdentifier=identifier;

        }else{
            NSLog(@"Reuse Cell");
        }
        cell.lbltitle.text=[NSString stringWithFormat:@"Level %d",indexPath.row];
        id num=[_arrslidervalues objectAtIndex:indexPath.row];
        cell.slider.value=[num floatValue];
        return cell;
    }
    @end

Answer 4

This tutorial takes you through the whole modern iOS 5 solution, from the process of creating the cell's xib and class files all the way to the finish:

http://mrmaksimize.com/ios/Custom-UITableViewCell-With-NIB/

Answer 5

`You can create custom cells in table view with the help of .xib file. First setup the table view in your view controller, create a new xib file with its class and use it in table view.

- (IBAction)moveToSubCategory:(id)sender;
@property (strong, nonatomic) IBOutlet UILabel *foodCategoryLabel;
@property (strong, nonatomic) IBOutlet UIImageView *cellBg;



-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [foodCatArray count];
}



-(UITableViewCell *)tableView:(UITableView *)tableView     cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *simpleTableIdentifier = @"ExampleCell";
        ExampleCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
       if (cell == nil) {
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"ExampleCell" owner:self options:nil];
        cell = [nib objectAtIndex:0];
     }   
    [cell setTag:indexPath.row];
    cell.cellBg.image=[UIImage imageNamed:[photoArray objectAtIndex:indexPath.row]];
    cell.foodCategoryLabel.text=[foodCatArray objectAtIndex:indexPath.row];
    return cell;

}

Answer 6

A video tutorial showing how to do this with Xcode 4.2 has been made. The author has written a blog post as well.