How to add more than two labels to prototype cell?

Question

I have gone through the tutorial below and it works fine. My question is how do I add more than the two standard cells to the prototype cell?

http://thedarkdev.blogspot.co.uk/2013/09/web-service-apps-in-ios7-json-with.html

cell.textLabel.text = "Title Text"; cell.detailTextLabel.text = "Detail Text"

I am wanting to add another 4 labels and would like to lay them out using the storyboards.

Any ideas how to do this?

Answer 1

You can use a custom cell type and you'll be able to add as many labels as you want:

1. Create a empty UITableViewCell subclass that you'll use for this cell. Note, this subclass doesn't need any code inside its @implementation. We're only going to add outlets for its properties, and those will show up in its @interface, but the storyboard eliminates the need to write any code for the cell, itself.

2. Back in Interface Builder, go to the table view in your storyboard and make sure it has a cell prototype. (If it doesn't drag one from the object library on to the table view.)

   • Over on the "Identity" inspector panel on the right, set the base class of the cell prototype to be your UITableViewCell subclass as the cell prototype's "base class";

   • In the storyboard's "Attributes" inspector for the cell, set the cell "Storyboard identifier" to something you'll reference down in step 5 (I've used CustomCell here);

   • Set the cell "Style" to "Custom" rather than "Basic" or "Detailed":

     

   • add your labels to the cell.

   
   I've added for labels to a single prototype cell here:

   

3. Use the "Assistant Editor" to show your code simultaneously with the storyboard. Select one of the labels you've added to the scene, change the code down below to be the UITableViewCell subclass you created in step 1, and you can now control-drag from the label to create IBOutlet references for the labels to the cell's custom subclass:

   

   By the way, I'd advise against using IBOutlet names of textLabel or detailTextLabel (not only are they too generic, but it can get confused with the labels that appear in standard cell layouts).

4. Now your tableview controller can reference this subclass:

   - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
       static NSString *cellIdentifier = @"Cell"; // make sure this matches the "Identifier" in the storyboard for that prototype cell
       CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier forIndexPath:indexPath];
   
       // retrieve the model data to be shown in this cell
   
       // now fill in the four labels:
   
       cell.firstNameLabel.text = ...;
       cell.lastNameLabel.text  = ...;
       cell.emailLabel.text     = ...;
       cell.telephoneLabel.text = ...;
   
       return cell;
   }
   

So while there are a couple of steps to go through here, the net result is that you can design whatever cell layout you want, and with this very simple UITableViewCell subclass, your cellForRowAtIndexPath is incredibly simple, just referencing the IBOutlet references you connected in Interface Builder.