Editing Multiple Constraints

A quick tip that can save you some pain when editing multiple constraints in Interface Builder.

Creating Constraints In Interface Builder

If you’ve ever created your Auto Layout constraints with Interface Builder you’ll be familiar with the problem. When you add constraints by control-dragging between views in the canvas Interface Builder tries to be helpful. It adds constant spacing to the constraints based on the size and position of views in the canvas.

Unless you carefully position your views before creating the constraints it’s rarely what you want. Creating constraints then becomes a painful two step process of adding the constraints and then editing them to remove the constants.

Assuming you haven’t given up on Interface Builder there’s a quicker way that you may not have discovered.

Editing Multiple Constraints

Suppose I want to pin a view to the leading, top and trailing margins of the root view of a view controller. Here’s a common way to do that in Interface Builder:

  1. Drag a view from the object library and drop it onto the canvas. Then drag between it and the root view to create the three constraints (hold the Option key to create constraints with the margin):

    Adding leading, top and trailing space constraints between the green view and container margin of the root view

  2. You’ll end up with some spacing constants added to your constraints based on the size and position of the view:

    Trailing, top and leading constraints in document outline with extra spacing constants

  3. You have several options to remove the constant from the three constraints. You could double-click on each constraint in the canvas:

    Editing space constant in popup

    You could also select each constraint and use the size inspector.

  4. The trick is to realise that the inspector applies changes to all selected items. So the quickest way is to first select all three constraints in the document outline:

    Three constraints selected in document outline

    You can now delete the extra constant space in the size inspector and it will apply to all three constraints:

    Size inspector showing constraint values for multiple constraints

  5. The final result with the extra constant space removed from the three constraints:

    Document outline showing constraints with no extra constant

Note that this trick applies to editing properties on views as well as constraints. For another example, see Xcode 13 Vary For Traits.

Xcode 13 Improvements

Xcode 13 adds a small improvement by allowing you to select the group of constraints in the document outline. From the Xcode 13 release notes:

You can now select and navigate outline view groups, such as “Constraints”, using the keyboard. Selecting a group is equivalent to selecting all of the items contained in the group.

So instead of selecting the three constraints individually we can just select the “Constraints” group in the document outline:

Constraints group selected in document outline

Learn More

Want more tips on building adaptive layouts with Auto Layout? Take a look at my book Modern Auto Layout (now updated for Xcode 13 and iOS 15).