Layout Constraint

Layout Constraint is a powerful system where it can dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views. For example, you can constrain an image view so that it is horizontally centered within its superview and so that the image view top edge always remains 8 points below its superview top. If the image view superview size or position changes, the image view position is automatically updated.

By defining layout constraints for all the views, you can create a responsive view with complex behaviour of sizing or position the views. Usage of custom view and collection view are possible with the power of layout constraints that are used to define their views.

Figure 1: *A simple view with layout constraint with fixed height and left, top, right edge connected to its superview by 10px.*

A layout constraint is defined between layout constraint attributes from two views. Additionally, width, height, aspect ratio constraint can be added using a single view.

iOS Development Notes: Layout Constraints is based on Auto Layout used in iOS development.

Layout Constraint Attributes

Layout constraint attributes define feature that can be constrained. For a view to resize or positioned correctly using layout constraints, the view must have sufficient horizontal and vertical constraints. Normally, a view should have two vertical constraints and two horizontal constraints to be considered sufficient. Here are the list of constraint attributes

Top
Bottom
Left or Leading
Right or Trailing
Center Horizontal
Center Vertical
Width
Height

Vertical constraint attributes can only be connected to other vertical constraint attribute of other view only. Likewise, horizontal constraint attribute can only be connected to other horizontal constraint attribute of other view only. This is for info only as the system done this automatically for you.

Connection between two constraint attributes are called as constraint connection. Here are the list of valid constraint connections. This list are presented when adding constraint using constraint connector menu.

Align Top: Top constraint connected to other top constraint of different view
Align Bottom: Bottom constraint connected to other bottom constraint of different view
Align Leading: Leading constraint connected to other leading constraint of different view
Align Trailing: Trailing constraint connected to other trailing constraint of different view
Left Spacing: Leading constraint connected to trailing constraint of different view
Right Spacing: Trailing constraint connected to leading constraint of different view
Top Spacing: Top constraint connected to bottom constraint of different view
Bottom Spacing: Bottom constraint connected to top constraint of different view
Center Vertically: Center vertical constraint connected to other center vertical constraint of different view
Center Horizontally: Center horizontal constraint connected to other center horizontal constraint of different view
Equal widths: Width constraint connected to width constraint of different view
Equal heights: Height constraint connected to height constraint of different view
Aspect ratio: Width constraint connected to height constraint of same view.

Adding Layout Constraint

You can add a layout constraint using constraint connecter menu. Here are the steps to add a layout constraints

Hold CONTROL button on your keyboard
Hold left mouse click at any view you want to add a constraint
While still holding both CONTROL button and left mouse click, move the mouse position to other view you want to connect the constraint.
Release left mouse click, this will present constraint connector menu which show list of recommended constraint connections.
Alternatively, you can move mouse to a view at the View List. This will present constraint connector menu and show all list of valid constraint connections.
Select a constraint connection.
Constraint added is indicated by a blue line at the view.

*Figure 2: Adding align top constraint connection to its superview*

Editing Layout Constraint

A constraint attribute can be edited after added to a view. Each constraint attribute have constraint constant that can be modified. For example, for a top align constraint connection, constraint constant with value 0 will make the view align exactly with the other view. For equal widths, equal heights and aspect ratio connection, the constraint have constraint multiplier which are used to set width or height ratio for the view. To edit a constraint attribute,

Click at constraint attribute line while a view is already selected.
Contraint popover will be shown.
Update the constraint constant or multiplier as needed.
The view frame will be automatically updated from the constraints.
To delete a constraint attribute, click delete button at the constraint popover.

Figure 3: *Editing constraint attribute using constraint popup*

Layout Constraint Inspector

Editing a constraint attribute also can be done using layout constraint inspector, which can be accessed at right of the attributes inspector.

The inspector let you see all constraints added to the selected view. The inspector also display the other view the constraint connected to and the constraint attribute type and its constant. To edit a constraint attribute, simply click at a row in the inspector, which will show the same constraint popup as in Figure 3.

Figure 5: *Editing constraint attribute using layout constraint inspector.*

Layout Constraint Status Line

Constraint attributes added to a view are visually shown as line when the view is selected. A normal, a constraint attribute without any issues is shown as blue line. Consider view in Figure 6 below, added constraint connections to the selected view are top align connection, left align connection, right align connection and height constraint attribute. The constraints added to the view are complete and the frame of the view is correct.

*Figure 6: A view with complete constraints added*

Consider Figure 7, a same view with Figure 6, but the position and size are moved to other place. In this case, the view frame is incorrect and is shown using yellow line color with offset value. The correct frame is shown using yellow dotted line.

*Figure 7: A view with complete constraints but wrong frame.*

Consider Figure 8, still same view as Figure 6 but with height constraint removed. In this case, a red line is shown at the bottom of the view, which indicates another vertical constraint need to be added to the view.

*Figure 8: A view with missing additional vertical constraint.*

These status line greatly help by helping you visually when adding or editing constraints. Additionally, you can apply constraint operation to further modify the constraints.

Layout Constraint Operation Menu

Layout constraint operation menu can be accessed using the bottom bar. Using operation menu, some operation related to layout constrains of the selected views or all views in the selected artboard can be applied.

Here are explanation of the list

Update frames: If a view constraint attributes is complete, but the frame is incorrect, this operation repair the frames to its intended position and size calculated by the layout constraints.
Update constraints: If a view constraint attributes already added, but the frame is incorrect, this operation update the constraint attribute value to match the new frame.
Add missing constraints: If there are any missing constraint attributes, this operation will add the missing constraint.
Reset to suggested constraints: This operation reset all constraints using suggested constraints defined by the system.
Clear constraints: This operation clear all constraints added.

Layout Constraint Issues Menu

When adding multiple views, there are likely to have constraint issues. Various complexity of the design also may increase the difficulty of setting layout constraints properly. To help fixing the constraint related issues, layout constraint issues menu can be used. While constraint operation menu perform operation for all constraint for the selected views, by using constraint issues menu you can fix a specific constraint individually. The menu also displays all constraint related issues for all views in the artboard. Constraint issues menu can be accessed at the bottom bar.

Figure 10 shows constraint issues menu shown for the current artboard. In this case, the view (Rect2) is missing all constraints. At bottom bar, a red icon with issues count is displayed when there are any issues in the artboard. There are 4 issues for the view which indicates missing 2 horizontal constraints and missing 2 vertical constraints for the view in this case. Clicking the Issues button presents a valid constraint list to be added to the view.

Figure 11: Adding missing layout constraints

Intrinsic Content Size

Typically, a view need to have two horizontal and two vertical constraints for the constraints to be sufficient. For a view with intrinsic content size, only a horizontal and vertical constraints are needed. However you can still add additional constraint to the view to override the intrinsic content size.

Intrinsic content size is a natural size for the view. View that have intrinsic content size are button, image view and text label. Consider Figure 12, when the artboard frame is changed, layout constraints are applied to the view. A text label with intrinsic content size is resized to its natural size even though no constraint is added.