Connect outlet of a Cell Prototype in a storyboard

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”.

  • Why isn't preferredContentSize used by iPhone 6 Plus Landscape?
  • UICollectionView header position in horizontal scroll direction mode with flow layout
  • “Expected Declaration” Error in Swift in userDefaults
  • Decode images in background thread?
  • Objective C: Adding Loading View to View Controllers
  • iOS: Can't save file to 'Application Support' folder, but can to 'Documents'
  • 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!

    3 Solutions Collect From Internet About “Connect outlet of a Cell Prototype in a storyboard”

    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;

    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.

    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.


    //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.

    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