The Interface Builder is the encouraged way to create and adjust constraints. There are plenty of tools and mechanisms that make dealing with constraints as easy as possible. There are ways to create, modify, debug and test constraints in Interface Builder that I’ve personally come to fall in love with. At first I was intimidated by all the different context menus and I had no idea what I was doing but since I’ve got the hang of it, I can’t ever imagine giving this up. Apple has built some great tools to make working with constraints easy and effortless.
Let’s open up Xcode and take a look at everything important when dealing with constraints.
- Creating Constraints
- Updating Views
- Finding & Adjusting Constraints
- Fixing Errors
- Connecting Constraints to Code
Creating Constraints in Interface Builder
Let’s practice Constraints on our login screen example that we’ve used before. First thing I want to do is place a nice logo inside the view.
Now there are two common ways to create constraints in Xcode. The first one is to click-and-control drag the selected view to the superview that the constraints should be applied to. The Direction in which you drag is important here and will define if for example the centering option will be shown vertically or horizontally. Let’s just center this image vertically and horizontally on the canvas to see how this works.
This method is very intuitive and does lead to the goal pretty quickly. All you have to be aware of, is the fact that all the information you provide have to lead to a set of constraints that can be resolved properly. If you don’t remember them exactly, the were:
- Set size of the view
- Set the position of the view
- X Coordinate
- Y Coordinate
I generally don’t use this method very often. Sometimes there are very small margins or sometimes you miss the right view. There can be a couple of problems with this approach, but I wanted to let you know this method exists either way. Maybe you’ll like it more than the second one, I’m about to show you.
My preferred method of adding constraints to a view are the add constraint and align menu. You can find them right here in the footer of the Storyboard. We already have the constraints applied to the logo view right here, but let’s suppose you did something wrong and you want to reset all the constraints on this view. Here’ how you can do it.
You can reset all the constraints on the selected view right here or you could reset all the constraints on all the views in this container.
Let’s just reset all the constraints on this selected view – you have to make sure the right view is selected – and re-add them using the other menus just so you can see how the workflows differ.
Sometimes you’ll get some yellow lines inside of the Storyboard. That usually means that the layout that is displayed to you on the screen right there is not matching the one that will be displayed once the app is run.
There is a method do align those again to make sure „what you see is what you get“. Just choose Update Views in the Menu or use the Shortcut alt-cmd-= to align the view properly.
If you followed along, you can run the app again and you’ll see that the constraints are doing their magic. They take care of the alignment of the logo just like we told them to. Basically this is the starting point to any other layout. The process is exactly the same and can just be adjusted to fit any needs. But there are many more details.
So the constraints are set now. But what if you’re not happy with the result they are producing? Maybe you want the logo to be offset from the center to the top? You can easily adjust the values of the constraints using the interface builder. Again there are multiple places you can choose to do that.
First of, you probably noticed that there now is a Constraints item in the sidebar – the outline view – of your apps views. Right there you can select and adjust the constraints in the sidebar on the righthand side of the storyboard. If it’s hidden, just click the sidebar button in the top right corner to uncollapse the sidebar. The part that is interesting to us is the constant part. This is where we can enter any number – this value is defined in „points“ – to offset the constraint by the entered value. Let’s try it now.
This process has the downside that you’ll have to deal with the constantly growing number of constraints in the constraint Item in the sidebar. Since all constraints are grouped in there this can get messy. Isn’t it much more convenient to just select the item that the constraint is applied to and find the corresponding constraint in there?
I guess that’s what the apple developer thought too, so they created the size inspector view in a way that lists out all the applied constraints on a selected view.
As you can see this is a much more convenient way to see constraints and it just lists out all the constraints that are relevant for this view. Hovering over the constraints in this list Highlights them in the Storyboard if possible and you can easily edit them using the „Edit“ button. Or you could use the graphic above to select the constraint you want to focus on.
Let’s try to adjust the X position of our logo with those controls to see how they work.
Interface Builder Canvas
Another way you can see and select constraints is the Storyboard Canvas itself. Right here in the menu you can find the option to show the constraints on the canvas just by selecting Editor -> Canvas -> Show Constraints. Obviously this option does not present you with all the constraints that there are, but only with the onces that correspond to the selected view. It does this so you don’t get overwhelmed by the incredible amount of constraints that will be in your project as it grows and becomes more complex.