Swift Components Tour – Autolayout IBOutlet

In this lesson

Back in the Swift Components Tour app, let’s talk about how to reference an autolayout constraint from the storyboard in your code.

Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Hello world. Kyle here with Brax.tv. Today we’re going to talk about how to make an IBOutlet from a constraint in the storyboard. The main reason that you would want to do this is that say after a view is presented, see how we are on this text field’s view controller here, at some point in time you may want to change some values of that constraint without having to remove all constraints from the object you’re wanting to move around, and then re-adding them with the adjusting value. Instead, why don’t we just change the value of an existing constraint.


In the real world example of this in this TextFieldViewController is that we want this bottom text field to dodge, to move up out of the way of the keyboard when it shows. But how can we do that when all of our constraints are in the storyboard? Well, we just need to hook it up to our view controller code and store a reference to that constraint as an IBOutlet like we would any other item on the storyboard.


We can see here in the code that we do have the IBOutlet all ready for that bottom constraint that we were editing to move the text field out of the way of the keyboard. We have that right below some other objects in that view. We do know that if you right click and drag from an object in the storyboard onto the code for that view controller, that it will bring up this little window and you can type in a name for the reference to the object using an IBOutlet.


There’s also something called an Outlet Collection, which is like it stores an array of IBOutlets without having to reference each one, but they must be of the same type. But that’s not important because we’re just talking about normal IBOutlets here. We don’t need to make another IBOutlet for this text field we have here. We know that we are already editing the constant for this bottom constraint here. We can see up here in the referencing outlets that there is a reference to the TextFieldViewController with a name of bottomConstraint, that’s the one we have right here.


But what if for some reason we also wanted to change the height at some point during the presentation of this view controller? I’m just picking a random constraint here, I don’t have a situation that we would want to change the height of this text field for, but let’s make an IBOutlet for it anyway.


We’re going to right click drag, or Control drag, into the code. We are using the assisted editor so you can have two editing windows side by side in the whole editing area. Let’s just call this bottomTextFieldHeightConstraint. Maybe there’s an event that we would want to edit this value. But let’s just go down here. Before we will layout subviews or some other method or an event like that is called so that when we change the constant here it actually is changed instead of having to ask the app or this view to recalculate its position with it’s Autolayout constraints. So we’ll just say self.bottomTextFieldHeightConstraint.constant = 1000. If we run this again, we’ll see that on view did load that we’re setting the constant of this constraint, which is the height of this view, to 1000. So this box should be huge, this text field should be huge. Yes, it’s giant. And it’s also throwing off the layout of the rest of the screen because it’s not expecting it to be that huge. Because that’s a little ridiculous but it works perfectly for our example. Thanks for watching.

Additional Info

Register to get access to additional resources and info.