How to visually create and use static cells in a UITableView embedded in a UIViewController

Question

I'm using XCode 4.2 and have built my UI using Storyboards. I need to create a view that has content above and below a UITableView and I can achieve this by using a UIViewController. A UITableViewController does not let you add content above or below the table. You can use the table header/footer but that doesn't work for what I would like to achieve.

I now have a UIViewController with a UITableView embedded in it. I can adjust the height and width of the UITableView accordingly which provides me the UI layout that I am looking for.

I can customize the static cells in the UITableView but when I try to build I get the following error:

Illegal Configuration: Static table views are only valid when embedded in UITableViewController instances

My question is how are others getting around this? Creating a tableview with static cells and laying them out visually is very nice but apparently that is not allowed for some reason that I cannot understand. I can't switch to a UITableViewController because of my visual layout requirements.

Any assistance would be greatly appreciated.

Answer 1

You can achieve this in Xcode 4.5 and later versions, assuming your app is targeted at iOS 6+.

In the Storyboard simply create a UIViewController with a View Container inside it's main view. Then hook up that View Container to a UITableViewController that contains static cells.

Just like this:

You don't need a single line of code. Just control click, drag and select embed. The view controller containment is handled for you.

Answer 2

You are right. In storyboard, you cannot have a tableView with static cells embedded in a viewController. One way around it (I have not tried it myself, though, so I am not sure if it works) can be that you create an instance of UITableViewController in storyboard with static cells. Add an instance of UIView to your viewController, and then programmatically load the tableView of the UITableViewController into the UIView of your viewController.

Answer 3

pmd's answer works but in the event that backward compatibility with iOS 5 is required as well, you can do the embedding programatically using the View Containment API.

In the viewDidLoad method of your parent UIViewController:

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone" bundle:nil];
    MyTableViewController* vc =[storyboard instantiateViewControllerWithIdentifier:@"MyTableVC"];
    [self addChildViewController:vc];
    [self.view addSubview:vc.view];

    // ensure embedded view is aligned to top
    CGRect frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
    vc.view.frame = frame;

    [vc didMoveToParentViewController:self]; 
}

Don't forget to specify a storyboard ID for your UITableViewController with the static cells.

Answer 4

I know this is an old question but I have a scrappy solution to this issue.

I needed 3 static cells on a UIViewController so this is what I did:

1. Drag in some Table View Cells into your interface (not into UITableView) - add text and whatever else you need.
2. Make IBOutlet properties for your cells and synthesise them.
3. Drag a button and make it cover the entire cell. Set the button to type 'Custom' so it appears invisible - repeat for all cells
4. Add numeric tags to your buttons

5. Implement the following functions. buttonDown is connected to the buttons 'Touch Down' event. buttonUp is connected to 'Touch Up Inside' AND 'Touch Up Outside'

   -(IBAction)buttonDown:(id)sender {
       if ([sender tag] ==  1) {
           myFirstCell.selected = YES;
       }
       else if ([sender tag] ==  2) {
           mySecondCell.selected = YES;
       }
       else if ([sender tag] ==  3) {
           myThirdCell.selected = YES;
       }
   }
   
   -(IBAction)buttonUp:(id)sender {
       myFirstCell.selected = NO;
       mySecondCell.selected = NO;
       myThirdCell.selected = NO;
   }
   

You can do whatever else you like in the buttonDown event and use the button to go directly to a new view. I find this pretty useful.