image1

As we all know, Apple has a few different devices out, and they tend to all have different screen sizes and screen dimensions. It can sometimes be difficult to create compelling and consistent user interfaces across all these devices. But Constraints make creating interfaces that work across all iOS devices easier than ever!

If you were to start a new Xcode project and just drag and drop some elements into your view like in the image below, although this will look good in the storyboard, when you run the project on the simulator or an actual device you will be surprised to find out that depending on the device things will look very different. That is because when you drop elements into your view Xcode does not automatically resize or reposition them, however Xcode does generate some basic constraints that are orientated to the top left which is why the elements are positioned the way they are in the different devices. In order to make elements responsive or adaptive, I will need to create the desired constraints.

image1image2

The 4in, 4.7in and 5.5in size corresponds to iPhone 5, 6, and 6 Plus.

Constraints describe a positioning relationship between two views or elements like a relation between a button and a label or the relationship between a label and the top of a containing view. So you can set constraints like, my text field should always be 30px from the edge of its containing view, or always have 50px of space between my button and my label.

Notice how the slider that is visible on the storyboard gets cut off on an iPhone in portrait mode? I’ll fix this with constraints. There are a couple of different ways to add constraints but my favorite way to add them is to use the 3 icons in the bottom right of the storyboard. I added my constraints by clicking first on the slider then the center icon, when the constraints pop-up window appears I clicked the top  left red lines and I inputed the values i wanted, in this case it’s 10 to the top and 10 to the right of the parent view.

image3

The result is this.

image4 image5

So now the slider will always be positioned 10 from the top and right of the parent view regardless of iPhone orientation or version. However the label is overlapping the slider because I have not set constraints on the label so I will do this next. For the label, I can either add constraints to the button or the slider if I want it to be a certain distance from these elements or I can add constraints between the label and the parent view. In this case, since I want to center the label in its parent view, I will add constraints between the parent view and the label.

I clicked on the label then on the first icon on the bottom right of the storyboard select the horizontal center in container box and click on add 1 constraint. Now that label will be horizontally center in the container but I have not set a constraint for the vertical position.

image6

To add a vertical constraint on the label, I will click on the second icon and then click the top red line that symbolized a top constraint to the nearest neighbor and I’ll make the constraint equal to 10, since the nearest neighbor is the container view this will keep the label 10px from the top of the container view.

image7

Then I get this.

image8

Now ill deal with the segmented control that is being cut off. In this case i want it to shrink and grow depending on how much screen real-estate i have. So to do this i will set constraints to the left and right of the view so that the segmented control is always 10px from the left and right of the view. This will force the control to grow or shrink depending on the size of the device.

image9
At this point, I have not set vertical constraints on the segmented control or the text field so they are just being positioned from the top left by Xcode but let’s add our own constraints. I want all these views to always have 50 of vertical space in between them so I will add a top constraint to the segmented control which will apply the nearest top neighbor, the label or the slider, and I will do the same thing to the bottom, add a constraint to the nearest neighbor which is the text field.

img10

This is what we end up with.

img11

It’s not pretty but my elements are positioned where I decided I want them because of the constraints I set and this will be the consistent across the different iPhone version, regardless if I am using a  4, 4.7 or 5.5 inch iPhone.

To sum up, constraints are really useful for creating user interfaces that work well across different Apple devices. You can set constraints between view elements and their parent view to position them anywhere inside the parent or you can set constraints between sibling views to keep them together or keep them apart and more. This is just an intro to constraints and the best way to get more familiar with them it to just use them, create a test project in Xcode, add a bunch of elements and start adding constraints to get the layout you want.