Add a view. Make it orange.
Embed it in a scroll view. Rename it ContentView.
Pin the scroll view to the safe areas of the parent.
Drag the scroll view out to the edges so it is flush.
Drag the ContentView to the edges of the scroll view so it is flush.
Now add:
- top, leading, trailing, bottom
- width and height
From the ContentView to the scroll view by either dragging from one view to the other, or using the attribute anchor near the bottom.
Everything should be flush and perfectly laid out. If it isn't check your constraints and ensure that no extra added spaces or multipliers were added by IB there.
At this point your are done 🎉. Feel free to do your layout in your content view.
Drag out a scroll view.
Resize to view controller edges.
Pin scroll view to parent edges (safe area).
Add a content view.
Drag it out to the edges. Rename ContentView.
Pin the edges of the content view to scroll view.
Will see red. Next we need to set equal height and width between Scroll View and ContentView.
Next modify the height contraints so it is not always constant.
🎉 At this point your scroll view and content view should be good to go.
The trick with stack views is to give every view within the stack view an explicit height. And then pin the stack view to the edges of the content view.
Not really. The stack view will scroll fine so long as every component inside has an explicit height (greater than won't work here).
The reason you may want to add a spacer view is for alignment within the stack view. If leading alignment doesn't give you want you want, add a custom view, give it some leading and trailing space, and then align your internal stack view elements to that.
- Stack Views are magical. Adding stack views to stack views can sometimes resolve ambiguity and enable you to use
>=for height constraints.