Swift Components Tour – Autolayout Intro – Where? pt. 1

In this lesson

The Swift Components Tour is over! But let’s talk about autolayout, specifically the who, what, when, where, why, and how of autolayout. Today, where to use autolayout, part 1, code.

Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Hello world, Kyle here with Brax.tv. We’re back! Not exactly in the Swift Components Tour app, but we’re in the same general area as the Swift Components Tour app. You can’t see it but it’s here in the background.


The reason that it’s not front and center is that we’re not exactly still on the tour, we’re talking about Autolayout. Today’s video is going to be about the Where? Of Autolayout. Where do I use Autolayout? That question’s a little broad. I’m going to narrow it down and make it a little more specific.


You can use Autolayout with Interface Builder or in code. I’m going to give you my thoughts on each and why you should use it in Interface Building. If you’re not using it in Interface Builder, that’s fine. It’s still simple enough in code, it’s just harder and a little more work.


First, let’s talk about using Autolayout programmatically in your code, in your view controllers. When using Autolatyout programmatically, there are two different ways that you can use Autolayout programmatically. The first one of those uses something called a visual format language. The second of those is just a method with a lot of parameters. The first process to create constraints for your views requires some more specific knowledge and something you most likely haven’t used anywhere else in your journey through iOS. That is the visual format language.


Here we are in an iOS Developer Library Resource for Autolayout, in the Autolayout guide, on the page working with Autolayout programmatically. I’m just using this as examples for setting up Autolayout in your code, as I’m not doing that anywhere in the Swift app because it’s just easier in Interface Builder and you are going to see why. I’m not saying that this visual format language is hard to learn but unless you’re using Autolayout with the visual format language constantly, you’re probably going to need to keep this visual format language syntax page open all the time, or at least when you’re working with Autoalyout in this way.


You can see here that there’s a lot of stuff to remember. Reading some of these strings, you don’t even know what they mean or what they’re trying to say. What about this “white box 1, black box 4, black width, red box.” You might be assuming that there’s a white box that goes next to a black box but there might be a little spacing with this black width string and then next to that, after the spacing is the red box. It’s not completely obvious at first and it’s going to take a lot of getting used to and a little bit of practice to even get started with it.


Back in this other document, again, from the Autolayout guide, we can see this visual format language in action. Here in this example, Apple is showing the end product of what they’re trying to achieve with this layout, with these Autolayout statements. They want button 1 next to button 2 with a little bit of spacing. Here we can see the visual format string that they’ve created. After we’ve seen the end product it does seem kind of obvious, but when using this on your own you have to think of this on your own. It’s not just reading it. Speaking a language is harder than understanding a language. But it does make sense. Button 1, 12 pixels of space, then button 2, placed horizontally.


Here it does say that you can just use a hyphen for a standard aqua space, which I guess is 12 pixels. But who knows if that will change in the future or if it’s even changed since that document was created. It looks like these buttons are from previous versions of iOS.


How we use these visual format language strings in Autolayout is that you have to create an NSDictionary of something called Variable Bindings, which use like this to store references to the items you’re talking about in your visual format string to use when you’re creating the constraints. You can create an array of constraints like width of visual format language using constraints with visual format and passing in your visual format string with some additional options and metrics that usually come with some more customization. But that is a little more advanced, then you pass in your view’s dictionary so that this string can get references to the objects you’re wanting to talk about. Then you can add your constraints to a view.


Not only being a little more complicated and requiring you to learn this new syntax, the process using the visual format language cannot even do everything that you need or want to do with Autolayout. You can see here that although most of the constraints that are useful in real interfaces can be expressed using the language, some cannot.


Down here, this code example is using this other method with a lot of parameters to achieve this same effect by placing button 2, 12 pixels to the right of button 1. You do that with this constraintWithItem: method. Basically what this is saying is you want button 2’s left layout attributes, the left side of button 2, to be exactly -12 pixels from the right of button 1. This makes a lot more sense to read and to use. The main downside of this is that it is a seven line long method. There are seven parameters, it’s going to be a huge method. You’re probably going to add line breaks like this. So we’ve created this constraint here and we can store it to a variable and we can add it to our view. When these buttons are displayed while your app is running then it will lay them out according to this.


In my opinion this is a lot easier and a lot more clear when working with other developers than this visual format language. I’m not saying to avoid the visual format language, it’s very useful to know. A lot of any constraint conflicts that might be printed to the debugger down here will often include what’s going on written in this visual format language.


Let’s hop into the storyboard. I’m going to do a little set up first to create a view controller with these two buttons in Interface Builder. Then I’ll show you how we can do the same thing that we’re doing in code here in Interface Builder.

Additional Info

Register to get access to additional resources and info.