How to use autolayout to scale view for all screen sizes?

Question

The main navigation view of my app uses UIButtons with background images. I\'m using autolayout in IB to lay out the view.

I want the view to look the same (or simil

Answer 1

I've done some tinkering and I believe I've found a solution. I will demonstrate how to do it for the two larger squares roughly in the middle of your view.

Here is a reference image:

First, you need to create a container (my blue view) that spans the entire width of the superview, and has a height the same or larger than your inner squares (orange).
This view needs the following constraints: Align Center X to Superview, Align Center Y to Superview (OR constraints to give it the Y position you desire), Height Equals: [square height], Trailing Space to Superview, Leading Space to Superview.

The inner orange squares must be placed inside the container, and must be given the following constraints: Align Center X to Superview, Leading Space to Superview (value = space between square and edge of superview), Trailing Space to [other view] (value = space between squares). Select the two squares together, and add Aspect Ratio, Equal Width and Equal Height constraints.
The items in bold depend on which square you're selecting. The left one should have leading space to superview and trailing space to the other view, and the right one should have these constraints swapped.

This should give you your desired effect with autolayout.