Making a view centered on the remaining space

Question

I have this viewController that shows a navigationBar at the top (white box on top) and a toolbar at the bottom (orange box in picture).

Because the navigationBar is something iOS is adding to the viewController, when the viewController is visible, self.view's high will be reported as the screen size minus 44 points.

I have added an imageView to the view and I want it centralized between the navigationBar and the toolbar, like seen in the following picture.

What I did was to add a constraint to centralize vertically the imageView. As you see in the picture Xcode shows that the imageView is perfectly vertically centered as I want but this is not what happens when the app runs (thanks Apple).

In practice this is what happens: suppose I am running it on iPhone 5. iPhone's 5 screen high is 568 points. Because there is a navigation bar, the hight of self.view will be 524 pt (568 - 44). The constraint stupidly will disregard the top 44 pixels where the navigation bar is and centralize the imageView on the are between the bottom of the navigationBar and the top of the toolbar. The result is that the imageView will be closer to the bottom.

This imageView is carefully chosen to fill completely the space between the toolbar and the navigationBar when the app is running on iPhone 4. Also this imageView has to respect an aspect ratio constraint. Exactly like this:

Instead of centralizing the imageView using a vertically centered constraint I tried to add a top constraint to the superview and a bottom constraint to the toolbar. That works fine in all iPhones, except on the iPhone 4, where these two constraints force the imageView into another aspect ratio, like this:

So, what kind of constraint I have to apply to the imageView to make it center on the space between the navigationBar and the toolbar without losing the aspect ratio?

Answer 1

If you want the view to be centered between the navigation bar and the tool bar, then deselect both "Under Top Bars" and "Under Bottom Bars" for your controller. Add a centerY constraint to your image view, give it 0 length spacing constraints to the 2 sides, and finally, the aspect ratio constraint. I tested this, and it worked at all sizes, with a 1:1 aspect ratio. If you want a taller aspect ratio (your image looks like ~1:1.2 w:h) then you need to do some additional work to make it turn out right for the 3.5" screen because there's not enough height to get that ratio with the image view being full width (assuming that you also have the status bar showing -- if not, then these constraints should work for the 3.5" screen). I can edit my answer to include how to do that, if you say what aspect ratio you want, and if you want some minimum spacing between the two bars, or whether you want the image view to be as wide as possible while still maintaining its aspect ratio (which would mean there would be no space to the two bars).