UIScroll with Navbar and Tabbar and container view with dynamic height

Question

I am trying to layout my detail screen in IB with a tab bar and nav bar. However, there are three issues with the display when the simulator runs:

1. There is a gap at the top of the screen,
2. The dynamic label content extends past their container views at the bottom
3. The scrollbar doesn't reach to the bottom of the content.
   
   Screenshot of simulator displaying the issues described
   

My question is how should I set my constraints so that the above issues are resolved?

I have a lot of constraints and I'm not sure where I'm going wrong or what would be the best way to present the steps I've taken so far. But here is a screenshot of my constraints and here is a summary of the constraints/steps I've taken so far:

1. Main view contains just one child: The Scroll View. Scroll view is pinned to top, leading, trailing of main view and bottom is pinned to the Bottom Layout Guide.top,

2. Scroll view has just 1 child subview ("Content View"). Content View is pinned to top + 64, leading, trailing, bottoms to Super View, and it has equal heights and widths to the Main view.

3. The content view has an image, Recipe Title subview, and Shadow Background subview. The Shadow Background subview contains another subview with some labels of dynamic height. I have constraints to pin the leading and trailing sides of these containers to the superview. And I have top, bottom, leading, trailing constraints to pin these subviews to the superview and/or eachother so that there is a chain from top to bottom.

4. The Shadow Background View contains the labels of dynamic height. The labels also have pin constraints of top, leading, trailing and bottom with the exception of the last label which does not have the bottom constraint.

I do not have any code that updates the layout-- everything so far is in the IB.

Any help is GREATLY appreciated!

Answer 1

Hallelujah! After spending a full frustrating week, I've finally found the magical formula in IB for laying out a scroll view + navbar + tab bar + dynamic label height.

My original problems were caused by the following mistakes:

• Adjust Scroll View Insets should have been set to false
• Content View Top and Bottom pins were incorrect
• Missing some heights on some of the subviews
• Last subview wasn't pinned correctly on the bottom

Maybe not all these steps are required and maybe this isn't the most perfect solution, but this is what worked for me. Here is a diagram of the solution for those that prefer pictures.

1. Main View -> Attributes Inspector -> Uncheck the Adjust Scroll View Insets checkbox.
2. Add Scroll View. This is the only child of the Main View. Pin Top, Leading, Trailing Space to the Main View. Pin the Bottom to the Bottom Layout Guide.
3. Add one subview (name it "Content View"). This is the only child of the Scroll View. Pin Top, Leading, Trailing Space to Scroll View. Pin Bottom to Scroll view with a constant of -49 to account for the tab bar. Also set its Height and Width to be equal to the Main View.
4. Add a child subview to the Content View. Top is pinned to Superview with a constant of 62 to account for the Nav Bar. Leading and Trailing is pinned to the Superview. The view also needs a Height-- give it either a fixed value or a minimum value if it is dynamic content (ex: Height >- 20). You may also need to give the Height constraints a lower priority such as 250.
5. Continue adding sibling subviews as needed. Pin the tops to the previous sibling subview. Pin the Leading and Trailing to the Superview. The last sibling subview should be pinned to the Superview. Each subview needs a height. There needs to be one continuous chain of constraints (Top & Bottom pins, Height) from the top subview through to the bottom in order to avoid that "Scroll View has ambiguous scrollable content height" warning and have the scroll work correctly.
6. Do a happy dance.

Hope this helps someone else.

Answer 2

Make the content view's top constraint have a constant of 0, not 64. For the label extending beyond the bottom of the container view, you'll have to post more information about the layout for us to help.