How to have an app centered on and/or fill the screen?

Question

I am new to Xcode and I have a very simple layout with a square ImageView with two buttons below it. I wrap these in a UIView called Box (as a subview target for viewForZoomingInScrollView), which is wrapped in a ScrollView.

I tried building it in two different ways with the SingleView template. In the first way I changed the ViewController's view to a ScrollView, like this.

Second, I also tried it with the Scrollview inside the ViewController's view like this.

Everything works fine or as expected, in both cases, except: In both cases, the entire ViewController, stays pinned to the top left corner of the screen, regardless of orientation or zoom level.

* Omg, I solved all my resource management and action issues in one day and now I have spent nearly a week fighting with Layout *

When I have no constraints, like this:

The App opens like this. View is Black, ScrollView is purple, Box is DKGray, and ImageView is LTGray

When I pinch it, the image stays (after bouncing) pinned to the top left.

If I add centering constraints to ScrollView and Box,

ScrollView's constraints are respected but Box's are not. (Actually when the app opens Box fills ScrollView, it is only after pinching that Box goes up into the top left. Can scrolling destroy the constraints...? Do I have to put constraints in scrollViewDidEndZooming?)

Here are my current sub-questions. When Layout doesn't have enough constraints, it must add them. Does the constraints it adds have priority over mine? Is there a way to see what constraints it adds? I get these warnings with the constraints above.

Over Arching Question: How do I get it to be in the center of the iOS screen, or to fill the screen? I imagine there is an Interface Builder solution and a code solution, either or both would be of interest.

Thanks for reading.

Answer 1

Changing the element alignment

Each element needs to have constraints to outline where it should display in it's parent. i.e. right now you have an image, inside a view, inside a scroll view. So each of those three elements needs to have constraints set.

For each element:

1. Click the element
2. Click the 'Add new alignment contraints' button at the bottom right
3. Check the 'Horizontally in container' and 'Vertically in container' checkbox and then click the 'Add 2 constraints' button

Run your app and you should now see that the image is centre aligned, both horizontally and vertically.

Changing the element size dynamically This is also easy to do through the storyboards. This video shows you how to do it: https://www.youtube.com/watch?v=aSsR1NlQvMA The only extra thing is that you'll need to do this with each element, as per above.

Answer 2

Try to select your scrollView and in Pin menu of autoLyout try to add these constraints.