38

I'm a newbie with the Storyboard and so I have some difficulties...

I have created a TableViewController and I would like to customize the Cell Prototype. In the Cell Prototype I have added several Labels I would like to customize with my own class which inherits from UITableViewCell (AreaListCell). In the Storyboard, for the Cell Prototype I have configured the Custom Class with "AreaListCell" and its style is "Custom".

In the storyboard, when I select the Cell Prototype and then the assistant, the assistant display my class that implements the UITableViewController (AreasTableViewController) and not
my "AreaListCell" class.

The consequence is I can create outlet (using Ctrl + Drag from the label of the Cell Prototype) to the AreasTableViewController class but not to the AreaListCell class ! Any idea how to connect the Cell Prototype with my AreaListCell class?

Thanks for your help!

sebastien
  • 2,489
  • 5
  • 26
  • 47

3 Answers3

130

UPDATE: As of Xcode 4.6 (possibly earlier) you can now create outlets by control-dragging! - This has to be done into an interface section or class extension (the class extension doesn't exist by default for new cell subclasses. Thanks to Steve Haley for pointing this out.

You can't get the outlet automatically connected and created by dragging into the code block in the assistant editor, which is poor, but you can create the outlets manually and connect them then.

In your cell subclass interface:

@interface CustomCell : UITableViewCell

@property (nonatomic) IBOutlet UILabel* customLabel;

@end

Synthesize as normal in the implementation.

In the storyboard, select the cell and go to the connections inspector, you will see the new outlet. Drag from there to the relevant element in your prototype:

enter image description here

This can now be accessed as cell.customLabel in your cellForRowAtIndexPath: method.

idmean
  • 14,540
  • 9
  • 54
  • 83
jrturton
  • 118,105
  • 32
  • 252
  • 268
  • I used to do like that for my cell, but suddenly it has stop works, my customLabel IBOutlet == nil, and it does not appear in the cell. What can be the cause of issue? In the storiboard outlets are connected. – BergP Jun 02 '14 at 08:55
  • TLDR: create an outlet programmatically and connect it by control+drag from the storyboard – Christoph Mar 27 '17 at 14:45
21

Yeah you can't connect views that are inside of a custom prototype cell using the ctrl+drag method. Instead use the tag property of the view and then when you are building the cell pull the labels out using their tags.

Here:

//Let's assume you have 3 labels.  One for a name, One for a count, One for a detail
//In your storyboard give the name label tag=1, count tag=2, and detail tag=3


- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomTableViewCell *theCell = [tableView dequeueReusableCellWithIdentifier:@"Prototype Cell"];

    UILabel *nameLabel = (UILabel *)[theCell viewWithTag:1];
    UILabel *countLabel = (UILabel *)[theCell viewWithTag:2];
    UILabel *detailLabel = (UILabel *)[theCell viewWithTag:3];

    nameLabel.text = @"name";
    countLabel.text = @"count";
    detailLabel.text = @"details";

    return theCell;
}

You could also set the labels up as properties in your custom cell code and then when the cell is initialized use the viewWithTag call to assign the label properties to the labels you have created on your storyboards.

It took me a few days to realize I couldn't ctrl+drag from inside a custom cell to create an IBOutlet.

Good luck!

EDIT: You CAN create IBOutlets for your labels inside of a custom cell and create the links programatticaly, just not through the ctrl+drag method.

EDIT 2: I was totally wrong, you can ctrl+drag. See the second answer to this question. It is tricky, but it works quite well.

Justin Paulson
  • 4,388
  • 1
  • 23
  • 28
  • You certainly can connect outlets from a prototype to a cell subclass used as a prototype. I will answer with details once I can get an example together. – jrturton Apr 16 '12 at 17:50
  • OK, you can't automatically create outlets by control-dragging to the assistant, but you CAN create outlets manually and connect those. You certainly don't need to use tags. Downvote was a bit much though, if you edit the answer I will remove it (I can't change a vote now unless you edit) – jrturton Apr 16 '12 at 18:51
  • 5
    I do not recommend using tags since you need to maintain them separately which is imho more error prone. – Sbhklr Apr 18 '12 at 15:49
0

Swift 3

// we are using this if your images are at server.

// we are getting images from a url.

// you can set image from your Xcode.

  1. The URL of images are in an array name = thumbnail i.e self.thumbnail[indexPath.row]
  2. on UITableviewCell put a imageView on cell

  3. select UIimageView assign it a tag from storyboard.

    let pictureURL = URL(string: self.thumbnail[indexPath.row])!
let pictureData = NSData(contentsOf: pictureURL as URL)
let catPicture = UIImage(data: pictureData as! Data)
var imageV = UIImageView()
imageV = cell?.viewWithTag(1) as! UIImageView
imageV.image = catPicture
Ameer Chand
  • 51
  • 4