In the article Introducing: Pin Constraints, we were introduced with the idea of the pin constraint. However, in some project you might need to use more complex constraint. In this article, we will explain the Advanced Constraints, and how to use them.
When adding a view, by default has four pin constraints added to it. To exit the Pin Mode, all you have to do it press the "+" button placed at the bottom left corner. A selection of constraints is presented to you. Let's explain them with an example.
We have added two views, the firstView, and the secondView. Both views are in Pin Mode, which means they have pin constraints. Let's try and add constraints to firstView.
The four top constraints represent the distance of the firstView to the View. To modify the wanted constraint, simply press on it. Let's try and add a right constraint, where the firstView has a 5 distance with the secondView.
Select the wanted view, in this case the secondView.
Modify the distance as wanted.
Press Add Constraints.
The constraint is added!
As you can see, Advanced Constraints can include constraint relations with other views of the screen.
Let's briefly explain the other constraints!
- Width: The width of the view.
- Height: The height of the view.
- Equal Width: The view will have the same width as the selected view.
- Equal Height: The view will have the same height as the selected view.
- CenterX: The view will be centered horizontally with the selected view.
- CenterY: The view will be centered vertically with the selected view.
- LeadingEdges: The view's left edge will be aligned with the left edge of the selected view.
- TrailingEdges: The view's right edge will be aligned with the right edge of the selected view.
- TopEdges: The view's top edge will be aligned with the top edge of the selected view.
- BottomEdges: The view's bottom edge will be aligned with the bottom edge of the selected view.