CODEWITHSUNDEEP
iosuitableview
ghiboz
ghiboz

Reputation: 8003

ios steps to create custom UITableViewCell with xib file

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?

thanks in advance

Upvotes: 25

Views: 54393

Answers (6)

Mohammad Kamran Usmani
Mohammad Kamran Usmani

Reputation: 878

`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;

}

Upvotes: 1

kraftydevil
kraftydevil

Reputation: 5246

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/

Upvotes: 1

Bharat
Bharat

Reputation: 121

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

Upvotes: 0

christoph
christoph

Reputation: 1594

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;
}

Upvotes: 10

Duane Fields
Duane Fields

Reputation: 1341

In iOS5 you'll want to use the new:

registerNib:forCellReuseIdentifier:

Which basically does the same thing...

Upvotes: 15

Rich Apodaca
Rich Apodaca

Reputation: 29014

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

Upvotes: 6

Related Questions