Iphone UITableViewCell CustomCell

Question

Attempting to implement a "Simple" a CustomCell, I have a normal tableViewController that renders fine using the normal "default" methods, but I need to implement a Custom cell with some UILabel's and a UIImage.

So I created the CustomCell.h, CustomCell.m, CustomCell.xib

The .H

@interface CustomCell : UITableViewCell <UITextViewDelegate>
{
    IBOutlet UIImageView *image;
    IBOutlet UILabel *name;
    IBOutlet UILabel *date;
    IBOutlet UILabel *comment;
}

@property (retain,nonatomic) IBOutlet UIImageView *image;
@property (retain,nonatomic) IBOutlet UILabel *name;
@property (retain,nonatomic) IBOutlet UILabel *date;
@property (retain,nonatomic) IBOutlet UILabel *comment;

and .M

@implementation CustomCell

@synthesize image;
@synthesize name;
@synthesize date;
@synthesize comment;


#pragma mark -
#pragma mark View lifecycle

- (id) initWithController: (Controller *) ctnlr 
{
    ControllerPointer = ctnlr;
    return(self);
}

- (void) SetImage:(UIImageView*)Image
{
    image = Image;
}

- (void) SetName:(NSString*)Name
{
    [Name retain];
    [name.text release];
    name.text = Name;
}

- (void) SetDate:(NSString*)Date
{
    [Date retain];
    [date.text release];
    date.text = Date;
}

- (void) SetComment:(NSString*)Comment
{
    [Comment retain];
    [comment.text release];
    comment.text = Comment;
}

anyway, when I attempt to create these customcells in cellForRowAtIndexPath (as one would expect might be implemented) I am left with only a blank screen. So obviously I am missing something big... When I created the .XIB file with "Interface Builder" I made sure to connect the "Referencing Outlets" to the appropriate labels and images.

So following the implied logic of the way the Xcode framework appears to work, I followed the same reasoning (for lack of an exact example) No worky... Anyway, if there are any IPhone geeks that would like to enlighten me... (yes, there are no "[something release]" calls, I am not even sure if anything needed to be alloc'd. Please tell me there's just a couple calls I am leaving out, it can't be too much more than something simple like this Right...?

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{   
  static NSString *CellIdentifier = @"Cell";        
    CustomCell *cell = (CustomCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if(cell == nil)
    {
        cell = [[[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil] lastObject];
    }

    NSUInteger row = [indexPath row];
    SnsObject *sObj = [SnsArray objectAtIndex:row]; 
    [cell SetName:[sObj getUserName]];

    NSUInteger row = [indexPath row];
    SnsObject *sObj = [SnsArray objectAtIndex:row]; 
    cell.name = [[UILabel alloc]init];
    cell.name.text = [sObj getUserName];

    cell.date = [[UILabel alloc]init];
    cell.date.text = [sObj getDateTime];

    cell.comment = [[UILabel alloc]init];
    cell.comment.text = [sObj getCommentText];

    cell.image = [[UIImageView alloc]init];
    cell.image.image = [sObj getImageUrl];
  return(cell)
}

Thanks in Advance!

Answer 1

There are other issues with the code beyond what mrcrowl mentioned about now needing to "alloc-init" the outlets. In particular, this line:

cell = [[[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil] lastObject];

This is not the typical idiom used to load a custom tableview cell from a .xib. First of all, you pass "owner:self", which means you want to hook up the outlet objects in the .xib file with outlet members in your tableviewcontroller object, probably not what you intended. Second, you're relying on the order of objects returned from loadNibNamed:owner:options:, which while it may work today, may not work tomorrow, or on a new release of iOS.

Instead, the usual idiom is to declare an outlet for the entire tableviewcell in your tableviewcontroller: (in the .h file):

...
   UITableViewCell *tvCell;
...

@property (nonatomic, retain) IBOutlet UITableViewCell *tvCell;

Then in place of your line, you have this:

[[NSBundle mainBundle] loadNibNamed:@"NewsArchiveTitleTvCell" owner:self options:nil];
cell = tvCell;
self.tvCell = nil;

Normally this isn't done with subclassing, notice how I didn't declare the class as CustomCell, but as a vanilla UITableViewCell. So how to you get at those pesky subviews so you can configure them? Using tags is the normal way:

...
#define kMyKewlLabelTag 1
...
    UILabel *kewlLabel = (UILabel *) [cell viewWithTag:kMyKewlLabelTag];
    kewlLabel.text = [NSString stringWithFormat:@"Hi there from row %d!", indexPath.row];
...

EDIT: edit: here's a bit more detail, comments are too short to address the "what's going on here?" question. Here's an excerpt from one of my apps that loads the UITableViewCell from a .xib:

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

    static NSString *CellIdentifier = @"MyShoppingCartTvCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) 
    {
        [[NSBundle mainBundle] loadNibNamed:@"ShoppingCartTvCell" owner:self options:nil];
        cell = tvCell;
        self.tvCell = nil;
    }
        ...
        // (insert code to grab model data for this row)
        ...
    UILabel *nameLabel = (UILabel *) [cell viewWithTag:1];
    nameLabel.text = itemNameStr;

    UILabel *countLabel = (UILabel *) [cell viewWithTag:2];
    countLabel.text = [NSString stringWithFormat:@"%d", itemCount];

    UIImageView *iv = (UIImageView *) [cell viewWithTag:3];
        ...

Here's what's going on here:

• There is no custom UITableViewCell subclass, there is only a .xib file named "ShoppingCartTvCell.xib" containing a UITableViewCell, and UI elements placed inside the UITableViewCell. UI elements whose data must change per row are assigned a unique tag (the tag field is in the CMD-1 Attributes Inspector in IB) so that your code can get a handle to those objects to change them (customize labels, images, etc). Make sure you don't use "0" since all elements by default have a 0 tag. Also, make sure the Identifier field of the UITableViewCell in CMD-1 Attributes Inspector is the CellIdentifier string.

• The File's Owner of the .xib file is your table view controller where you want to display the cell. More precisely, it can be any class containing a IBOutlet UITableViewCell *tvCell; member. It is an instance of this class that you pass in as owner to loadNibNamed:owner:options:. As long as the value of the linked outlet is nil in the owner, when you call loadNibNamed:owner:options, the outlet of the owner is filled in with the object from the .xib (as long as the connection was made in the .xib in IB). Understanding that is a magic moment in Apple programming that opens whole new vistas to you :).

• You must set self.tvCell = nil; to prepare for the next cellForRowAtIndexPath that needs to load from the .xib. I also sometimes set to nil before loadNibNamed:owner:options:, I think that's a bit safer actually.

Here's how you go about loading your UITableViewCells from a .xib:

• In xcode, add an IBOutlet UITableViewCell *tvCell; to your UITableViewController class (including property declaration if you like)

• In your xcode project, create a New File, User Interface, Empty Xib. Open this .xib in IB

• In IB, drag a TableViewCell from the Library into your empty .xib file under First Responder

• Click File's Owner, CMD-4 (Identify Inspector), and under Class select the class containing the IBOutlet UITableViewCell *tvCell that you added (probably your UITableViewController subclass, the class where you're manipulating your table).

• Control-drag from File's owner to the UITableViewCell, and select the outlet you want to hook up. This is the field that will hold the newly-loaded-from-xib UITableViewCell when you call loadNibNamed:owner:options with an instance of File's Owner as the "owner" parameter.

• Add UI elements into the UITableViewCell (make sure they're inside the UITableViewCell hierarchy). Any elements that you want to customize per-row require a unique tag value.

• follow the recipe I gave above in cellForRowAtIndexPath

• Have a magic moment where you start to understand how .xib files and File's Owner objects really work together, and start creating lots of cool UITableViewCells and other custom view objects in IB because it's really easy and way better than creating them in code (IMNSHO).

Answer 2

Ok... Thanks all for the good input, but sometimes the simplest answer is not only the most eloquent, it's the best... Here's what I found to work,, keeping it as simple as possible, without changing a thing outside of one function.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{   
    static NSString *CellIdentifier = @"CustomCellIdentifier";  
    CustomCell *cell = (CustomCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if(cell == nil)
    {
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
        for(id oneObject in nib)
        {
            if([oneObject isKindOfClass:[CustomCell class]])
            {
                cell = (CustomCell*)oneObject;
            }
        }
    }
    NSUInteger row = [indexPath row];
    printf("MainMessageBoard.m cellForRowAtIndexPath = [%i]\n",row);
    SnsObject *sObj = [SnsArray objectAtIndex:row];
    cell.Name.text = [sObj getUserName];
    cell.Date.text = [sObj getDateTime];
    cell.Comment.text = [sObj getCommentText];
    cell.Image.image = [self resizeImage: [self imageFromURLString: [sObj getImageUrl]] scaledToSize:CGSizeMake(32.0f, 32.0f)];
    cell.CommentCount.text = [NSString stringWithFormat:@"(%d)", [sObj getCommentCount]];
    cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
    return(cell);
}

Answer 3

When you load a UITableViewCell from a .xib, you shouldn't need to create the controls manually.

For example, this kind of thing is unnecessary:

cell.name = [[UILabel alloc]init];

This will replace the label loaded from your xib with a new label that has a zero frame -- that is, the new label will be located at 0,0 and will have no width or height. Hence, no worky.

Assuming you have the xib hooked up correctly to CustomCell's IBOutlets, they controls you are seeking should already be there.

P.S. Forgive me if I am reading too much into your method name, but I don't think this line will work either, because the .image property expects a UIImage:

cell.image.image = [sObj getImageUrl];