Scroll View School · Embedding Layouts | raywenderlich.com


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/9223-scroll-view-school/lessons/13

Hey! Thank you for this super useful trick! I can’t embed a layout in in this way on the last Xcode though… for example, if I add the constraints to the scrollview in that way Xcode will say that some constraints are missing and after that will start lots of more troubles on embedding the view.
There is also a new option in the “size inspector” like “layout” that could be “automatic” or “translate mask into constraint” that changes radically the behavior of the view compared to this example.
Please, could you help me to understand how to do this in the new Xcode? I can’t figure it out and I’m sure that I can’t see the forest for the trees :sweat_smile:

Hi! Yes, this whole process is a little more complicated in Xcode 11.

There are two new things you need to deal with:

1 - As you mentioned, there is a new “layout” dropdown! Previously, this was only available to you through code, and Interface Builder set it for you. The View Controller’s root view is set to use auto resizing, and let Auto Layout make constraints for it behind the scenes. So when you pull that root view out, you need to set that “layout” dropdown to “automatic”. I don’t think that’s a very helpful name :woman_shrugging:t4:.

In code, it’s a little more obvious what that does. It’s a boolean called translatesAutoresizingMaskIntoConstraints, where true means “yes, make constraints for me” and false means “no thanks, I’ll constrain it myself.” If you aren’t familiar with autoresizing, I recommend this episode from Layout in iOS: https://www.raywenderlich.com/6849561-layout-in-ios/lessons/12
It was recorded with the previous version of Xcode, so it doesn’t mention that “layout” dropdown, but it does explain what autoresizing is.

2 - Scroll Views now have a Content Layout Guide and Frame Layout Guide in Interface Builder! Once you’ve told the old root view that you’re going to give it constraints, you need to constrain it in two ways:
a - Constrain it to the Content Layout Guide as you would normally have constrained it to the Scroll View.
b - The Content Layout Guide will tell the Scroll View what size its contents are. Yay! That will make your errors go away. But you still need to tell that view containing your stack view what size you actually want it to render at. You can do that by setting an equal width constraint between the view and the Frame Layout Guide.

I’ve added a new project to the materials for this episode with all of that done in Xcode 11 so you can see a finished, working product. Let me know if you have any more questions :]

1 Like