iOS 6 AutoLayout with multiple tableviews all dyna

Question

Okay so I am stuck. In my app I have a product view. On this view there are two nested table views inside a scroll view. The first tableview is only one cell and holds static text. This text length is dynamic based on which proudct you pick. The second tableview consists of multiple cells based on how many sub products are linked to that prodcuct. So in iOS 5, it was pretty easy to dynamically move the frame of each table view based on how large the text was in the first table view. I could then just sum up the height of all the table views and that would be the height of the scroll view. The issue is when I turned on auto layout things got hozed. From my understanding scrollviews have changed. We cannot use the frame or content size of a scroll view. So the first thing I did was changed all that over to contraints. I did the following below.

CGSize descriptionSize = [descriptionDetail sizeWithFont:
                         [UIFont systemFontOfSize:14]
                         constrainedToSize:CGSizeMake(320, CGFLOAT_MAX)
                         lineBreakMode:NSLineBreakByWordWrapping];

self.theScroller.translatesAutoresizingMaskIntoConstraints= NO;
[self.theScroller setContentInset:UIEdgeInsetsMake(0, 0, (descriptionSize.height+ (43 * [Solution count])), 0)];

Now this above works flawless. The scroll views scrolls great and is the correct height with auto layout on.

Now the part I am stuck on is how do I dynamically move the two tableviews up and down based on how long the description is or how many cells are in the second table view? The frames of the table view dont seem to have any effect on where they are located. I tried messing around with the contraints but didn't seem to get anywhere. Any help would be greatly appreciated. Thanks

Answer 1

I believe the problem you're running into is that scroll views don't have an inherent size. With autolayout they get their size according to sibling/parent constraints and then scroll any interior content that doesn't fit. Since table views are fancy scroll views, you need to tell them how big they are and manually change it according to the interior content instead of scrolling or showing whitespace.

I'm not sure what the relation is between your table views, but it sounds like the second table view should have the top edge a fixed distance away from the bottom edge of the first table view which is easy enough to do in autolayout, just pick the two table views and pin the vertical spacing. Pin the height of the first scroll view and make an outlet to the constraint in your controller, then add the following to your controller:

-(void) viewWillLayoutSubviews{
    [self.firstTableView layoutIfNeeded];
    self.firstTableViewHeightConstraint.constant = self.firstTableView.contentSize.height;
}

That will fix it so that your first table view be the same height as its content and won't scroll. Autolayout will take care of moving your second table view down.

Answer 2

You could make life easier for yourself by doing all this using a single UITableView I think.

Your upper UIView with the UIImageView in it is the tableHeaderView, your first 'single row UITableView' is the first section in the UITableView and your table view with dynamic content is in further sections of the UITableView.