How do I stack table views vertically using auto layout?

Question

Is there a simple way to stack multiple table views, one on top of the other? My scenario is that I have 3 table views:

• the first contains a set number of text fields for data entry
• the second contains zero or more records of type A. The user can add and remove these records all in situ
• the third contains zero or more records of type B. The user can add and remove these records all in situ

When enough records of type A or B are added, I want the entire view to scroll as necessary, just as if it was one table view.

The result I'm going for is very similar to the edit contact screen:

The top portion (First, Last, Company) would be equivalent to my first table. The phone number portion would be equivalent to my second, and the email portion would be equivalent to my third.

I have no idea whether the contacts screen is actually using multiple tables or not. I do know that it would make my life a hell of a lot easier if I could break my functionality into separate tables rather than trying to lump it all together into one.

The approach I've tried is:

• defined my own parent controller that inherits from UIViewController
• this parent controller instantiates the three child controllers and adds them to the controller hierarchy
• all three child controllers (all UITableViewController instances) disable scrolling
• the views for all three child controllers are arranged in a containing UIView using layout constraints
• the containing UIView is added to a UIScrollView
• the UIScrollView is the sole child of my controller

This resulted in nothing being shown. I hacked around a bit and found that manually specifying frames for my child views made them visible, but I couldn't interact with their contents.

So, my question is: how do I stack several table views vertically whilst leveraging auto layout?

Answer 1

You could do this, but unless I'm missing something there's really no need for it. The approach that I would take is just a single table view with multiple prototype cells where your code defines each "table view" as a section in your case and you just pick the appropriate prototype cell. Of course, each of these cells can have their own class, so your pretty much limitless in terms of customization. I'm positive that's what Apple has done in the contacts app you show an example of.

This is the approach that I always take and I see no reason why it wouldn't work for you. Attached is a screenshot of the basic idea. Each of the cells have unique classes and identifiers.

Then you just do something like this in your code (not exactly obviously, this is just an example from my code). You'll see that for each condition I check, I pick a different cell class and customize as necessary:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = NULL;

    BOOL searchDisplayControllerIsActive = _searchController.isActive;

    if (searchDisplayControllerIsActive) {
        if ([_searchResults count] == 0) {
            if (self.activeConnection != nil) {
                SearchingTableViewCell *searchCell = [self.tableView dequeueReusableCellWithIdentifier:@"SearchingCell" forIndexPath:indexPath];
                [searchCell.activityView startAnimating];

                cell = searchCell;
            }
            else {
                cell = [self.tableView dequeueReusableCellWithIdentifier:@"NoResultsCell" forIndexPath:indexPath];
            }
        }
        else {
            SearchResultTableViewCell *thisCell = [tableView dequeueReusableCellWithIdentifier:@"SearchResultCell" forIndexPath:indexPath];

            Movie *thisMovie = [self.searchResults objectAtIndex:indexPath.row];

            [thisCell.posterImage sd_setImageWithURL:[NSURL URLWithString:thisMovie.imdbBigPosterURL] placeholderImage:[UIImage imageNamed:@"SmallMovieReel"]];
            thisCell.titleLabel.text = thisMovie.title;

            if (thisMovie.in_wanted) {
                thisCell.wantedImage.alpha = 1.0;
            }
            else {
                thisCell.wantedImage.alpha = 0.1;
            }

            if (thisMovie.in_library) {
                thisCell.manageImage.alpha = 1.0;
            }
            else {
                thisCell.manageImage.alpha = 0.1;
            }

            NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
            [dateFormatter setDateFormat:@"yyyy"];
            thisCell.yearLabel.text = [dateFormatter stringFromDate:thisMovie.releaseDate];

            cell = thisCell;
        }
    }
    return cell;
}