Sub View with 50% height of the space left between navigation bar & tabbar

Question

I don't want to do this programatically. Please show me the storyboard way to achieve this.

I want orang view to of half size of the space between nav-bar & tabbar. Refere dashed rect, I want half of that rect.

Answer 1

As @Fogmeister mentioned You can use spacer view

Pin both of them and make their heights Equal Height.

And set blue view Hidden.

Answer 2

Very easy, add the following constraints.

Left and right constraints pinning the view to the superview.

Top constraint pinning view to superview with a constant of 64 to offset the nav bar.

Equal heights constraint with the superview. Change the multiplier of this constraint to 0.5 and the constant to -54 (half of the 64pt nav bar + status bar and half of the 44pt tab bar) and update frames.

Job done. :)

Answer 3

There are a couple of ways to approach this that I can think of.

Use a container view

The first is to add a UIView to the superView to act as a container. You can "pin" this container view to the bottom of the navigation bar and the top of the tab bar.

Now add your orange view to this container. With constraints pinning it to the top, left and right. You can then give it equal height with the container and a 0.5 multiplier and it will have half the height between the nav bar and tab bar.

Use a "spacer" view

The other method is to use a spacer view. Add your orange view and then add another view beneath it. Pin them to the nav bar and tab bar respectively and give them a vertical spacing of 0 between them.

Now give them equal heights.

This will make them both take up half the space between the nav bar and the tab bar.

Now make the "spacer view" hidden. It will hide but the constraints will still work.

Both of these will work for any device size and any orientation. Also, for edge cases like if satnav guidance or an incoming call changes the height of the nav bar etc...