Question

I have a UIView that has 3 sub-views: a header, a center panel, and a footer. The header and footer are both fixed height, and I’m able to set their autosizing properties so that they behave like I want: the header stays anchored to the top and stretches to fit the screen (portrait or landscape), while the footer stays anchored to the bottom and also stretches with the screen.

The problem I’m having is with the center panel. I’m able to anchor it underneath the header, but I can’t find any way of setting the autosizing properties for this center panel so that it stretches itself so that its bottom is just at the top of the footer. Everything I set seems to stretch it to the bottom of the main UIView (so it’s stretched underneath the footer, which I don’t want).

I can’t do this in code (I think, unless there is a way) by overriding layoutSubviews, because I’m animating this outer view and I need the subviews to resize with the animation. Is there a way to do this in IB?

Answer 1

In code:

header.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;
content.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
footer.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;

In Interface Builder:

Header:

Content:

Footer:

Explanation:

The fixed margins (see annotated screenshot below) will keep the view’s distance from the top and bottom of the super view’s bounds constant. This is what you want since you have a fixed height header and footer.

This stuff is absolutely doable in code. There is nothing you can do in Interface Builder that you can’t do in code as well.