Adding subview on view with changeable frame

Question

In my app I am currently working on a feature where upon a button tap, a view near the top of the screen is extended downwards to fill the screen (with a gap around the edge). The view is initially about 40 points tall, and when extended it stretches to 20 points from the bottom of the view.

I am trying to figure out the best way to handle the UI in this view, as in it's small form it only contains a button and an imageview, however when expanded it also contains labels, a scrollview, and other imageviews.

Should I be using a xib, which I could then set the frame of to be the same as the expanded view, or some sort of container view?

If I can avoid it, I would like to avoid creating the layout programmatically.

Anyone have any suggestions?

Answer 1

While there are a number of ways to accomplish the visual requirements, Autolayout is probably the easiest way to manage what you want, whether you are using a storyboard or a .xib file. Although you can define your layout this way, you may need to modify it during runtime.

For example, you might create two constraints for your view:

1) Add a height constraint to your view with a value that is greater than or equal to 40.

2) Add a vertical spacing constraint from the bottom of the view to the bottom layout guide of your view controller. Make this constraint an IBOutlet so that you can modify it later in code.

With Autolayout, you need to make sure the layout isn't ambiguous for the view's size and position, so you should also create constraints for the top, left, and right relative positions of the view.

When it is appropriate to extend your view, implement a function or IBAction that will modify the constraint such that its .constant value is 20.