Make UIScrollView with dynamic height subviews work automatically with Auto Layout

Question

I have the following view structure with its constraints:

UIView "parent"
   UIScrollView (leading, trailing, top and bottom to superview)
      - UIView "container" (leading, trailing, top and bottom to UIScrollView, 
                            equal width and height so parent UIView)
         - UIView "A" (leading, trailing, top to UIScrollView, height of 200)
         - UIView "B" (top, leading and trailing to UIView A, height of 140)
         - UIView "C" (top, leading and trailing to UIView B, height >= 88 "rest
                       of the screen until bottom", bottom to UIView "container")

"A" and "B" UIView's do not change its size but "C" does. Inside it, I am adding programmatically n "labels containers" UIView that have different heights depending on the content of m UILabel that they host.

Right now, I am calculating the size of the n UILabel with boundingRectWithSize: and I am sizing the height of their parent "labels containers" UIView that it is being added inside "C" UIView setting its height constraint to the sum of all UILabel.

Then, I resize "C" UIView height constraint so that it is equal to the sum of all added UIView.

This is working perfectly on all different screen sizes, portrait and landscape. The UIScrollView is showing all three "A", "B" and "C" subviews, having "C" n UIView that host m UILabel.

But now I am having troubles when rotating the device. I face the problem that I have to recalculate the size of all UILabel to change the height constraint of all the "labels container" UIView and change the "C" UIView height constraint so that it can fit everything without large blank spaces between all views.

So my question is: how can I achieve the same behaviour using exclusively Auto Layout?

Now I have to recalculate sizes and change height constraints so that everything adapts, but I would love that all UILabel resize themselves automatically and fit their content, then the "labels container" UIView resize to fit all the UILabel and then "C" UIView resizes automatically to fit the content.

Thank you in advance!

Answer 1

Ok, I was doing three things wrong:

1st: I was calculating the height of the labels to set then the size of the "labels container" UIView using a height constraint. Height constraints not needed as Auto Layout manages everything.

2nd: I was modifying the "C" UIView constraint height manually by adding the height value of each "labels container" UIView added.

3rd: After fixing the first two steps, I forgot to set the last added UIView constraint with its parent view...

Now everything works as expected.

Answer 2

As per my knowledge you need to add TableView for your dynamic labels and to achieve this you have to follow below steps:

1step : Add ScrollView in your ViewController.

2step : Add ContainerView in ScrollView to manage scroll constrains.

3step : Add your "A" view with fixed size lets say 150px.

4step : Add your "B" view with fixed size lets say 150px.

5step : Add TableView for dynamic labels with fixed size 0px. At this step make Outlet of your tableView height Constrains we will use it in next step.

6step : Call your service and add labels in your tableView.

in this 6th step while you are adding labels in your table view means while you reload your tableView do below code for dynamic heigh constrains.

7step : Now as per your Row height adjust height of table view as mention below.

arrListArray = @[@"One",@"Two",@"Three",@"Four",@"Five",@"Six",@"Seven",@"Eight",@"Nine",@"Ten"];
int rowHeight = 44;
self.tblHeightConstraint.constant = (rowHeight * arrListArray.count);

now reload your constrains with below method:

[UIView animateWithDuration:0.1
                     animations:^{
                         // Called on parent view
                         [self.view layoutIfNeeded];
}];

it will increase your scrollView contain size automatically.

Show sample images :

View Constrains Stack :

Now as per your comment you have to add CollectionView in place of tableView and add TableView in CollectionViewCell with your specific design.

Hope this will helps!