How To Access Storyboard and Xib Constraints in Code

A reader commented on a previous tutorial about not having realized that you can access a constraint (NSLayoutConstraint) in code just like you can any UIKit component such as a button or label. Let’s take a look at how you can do this with a good use case for employing such a technique.

I’m going to demonstrate it with a constraint accessed in Swift code. The constraint will be updated in code to move a UIView up or down based on whether the keyboard is visible. I previously demonstrated this with a video tutorial, so if you want to see that the link is at the bottom of this post.

10 March 2017: I’ve updated the code in GitHub to be Swift 3 compliant. Also remember that if your keyboard doesn’t open in a simulator, make sure you have toggled the software keyboard ON in the simulator.

From a code perspective, we start out with a bottom and top view, where the top view has the controls we want visible for the user. By default, we want the bottom view to have a height of 0. When the keyboard becomes visible, we want the height of the bottom view to match that of the keyboard, which pushes the top view up accordingly so it is not obstructed by the keyboard. We accomplish this by creating a height constraint on the bottom view.

Here is what the Storyboard looks like prior to the constraint being created.

Screen Shot 2016-04-06 at 6.30.44 PM

You can see that Auto Layout isn’t happy because it doesn’t know how to allocate space to the TopView and BottomView. Adding the constraint for BottomView height will solve that problem. I added the constraint of height = 0 which you can see below in the outline view of the Storyboard.

Screen Shot 2016-04-06 at 6.47.59 PM

In the ViewController on the right side, you’ll notice that I’ve also manually added the IBOutlet for the NSLayoutConstraint in code, and named it bottomHeight. This does not mean that the constraint in the Storyboard is now connected and accessible to the IBOutlet in code, because I simply typed it into the code.

You have the choice to define the IBOutlet for the NSLayoutConstraint by doing a Ctrl-Drag from the BottomView in Storyboard to the ViewController class, or you can create the IBOutlet in the ViewController first, and then Ctrl-Drag to connect the constraint from the Storyboard to the IBOutlet already defined in code. I’m demonstrating the latter, which is probably the least common way so why not illustrate it! Here is what you’ll see as you are about to make the connection in this way.

connect-constraint

Once you make the connection as I’ve shown, you can now access the Storyboard constraint in code.

I’ve added code in this project to set the constraint height constant based on whether the keyboard is visible or not. For simplicity, here is the complete ViewController class.

You can see where the bottomHeight.constant value is set in the last two methods. Using a constraint in this particular case is excellent because it avoids having to worry about frame size calculations.

The project for this tutorial is available on GitHub here, and you can also watch the video of this being setup in this tutorial on my website.

Note: In the video mentioned above, I had a view.setNeedsLayout() after changing the constraint constant. This is not needed, since the constraint change effectively sets the view as needing a layout already. I’ve removed it in the code above and in the GitHub version.

Leave a Comment:

2 comments
Add Your Reply