iOS — Auto-Layout — Less than / Greater than constraints

Auto-layout is used to give constraints to UI elements provided in iOS. We add constraints to elements so that they adjust in the screen according to the size and look good on all devices and orientations. Here we will discuss some constraints provided by auto-layout api of Apple.

Here is the list of all the constraints we may give to our UI elements provided by UIKit:

Format: first-item*.Constraint-Name.constraint(available-initialiser*)

Top Anchor

Bottom Anchor

Leading Anchor

Trailing Anchor

Height

Width

CenterX

CenterY

Left + Right Anchors (Irrespective of Language Direction)

While giving constraints programatically, we see that we have the following list of available constraint methods for a particular NSLayoutAnchor that could be any of the above:

1. view.leadingAnchor.constraint(equalTo:)
2. view.leadingAnchor.constraint(equalTo: , constant: )
3. view.leadingAnchor.constraint(equalToSystemSpacingAfter: , multiplier: )
4. view.leadingAnchor.constraint(lessThanOrEqualTo: )
5. view.leadingAnchor.constraint(lessThanOrEqualTo: , constant: )
6. view.leadingAnchor.constraint(lessThanOrEqualToSystemSpacingAfter: , multiplier: )
7. view.leadingAnchor.constraint(greaterThanOrEqualTo: )
8. view.leadingAnchor.constraint(greaterThanOrEqualTo: , constant: )
9. view.leadingAnchor.constraint(greaterThanOrEqualToSystemSpacingAfter: , multiplier: )

Our scope of discussion for this article are the less-than (4–5) and greater-than (7–8 ) set of constraints.

Lets discuss a simple use case in order to understand these set of constraints:

Problem Statement: Blue is the containing view above, the problem is that we have to pin the bottom of the blue containing view to one of the two labels with greater text.

I know there could be other solutions running through your mind, but let us solve this problem, with the help of these above described constraints.

Consider this programatically written constraints code:

NSLayoutConstraint.activate([

label1.leadingAnchor.constraint(equalTo: containingView.leadingAnchor),

label1.topAnchor.constraint(equalTo: containingView.topAnchor),

label2.leadingAnchor.constraint(equalTo: label1.trailingAnchor),

label2.trailingAnchor.constraint(equalTo: containingView.trailingAnchor),

label2.topAnchor.constraint(equalTo: containingView.topAnchor),

label1.bottomAnchor.constraint(lessThanOrEqualTo: containingView.bottomAnchor, constant: 0)

label2.bottomAnchor.constraint(lessThanOrEqualTo: containingView.bottomAnchor, constant: 0)

])

Consider the the label on left is label1 and label on right is label2. Consider the last two lines (subject of discussion)here.

Keep in mind that we have to compare the constant value (for our less than / greater than cases) which we give for spacing / margins when giving a constraint. Also note that, whenever we don’t specify a constant, this means that the value for that constant is zero, we may omit the last two constraint lines with label1.bottomAnchor.constraint(lessThanOrEqualTo: ) initialiser.

Considering the coordinate system of iOS, which starts at the top left of the screen, the value of x increases towards right and value of y increase towards bottom. The first of the bottom two constraints states that, label1.bottomAnchor <= containingView.bottomAnchor i.e. the constant value of label1.bottom anchor should be less than containingView.bottomAnchor. Whatever values which fall under this set satisfies this constraint. Lets see this visually:

Suppose we have label 1, pinned to the top left, at point (0,0). As we see the value of y is increasing as we are moving downwards. Considering our last statement i.e. label1.bottomAnchor <= containingView.bottomAnchor, bottom anchor is a y axis constraint, so here we will consider the y value. Here, label1.bottomAnchor is 200 whereas containingView.bottomAnchor is 300, as 200 <= 300 our constraint is rightly satisfied.

The label2 is pinned to bottom of the view, so for label2 it is 300 <= 300. In this way all of our provided constraints are satisfied for this view.

Remember: Auto-layout arranges our views so that they may satisfy all of our constraints, if for any reason there is a conflict in constraints, auto-layout breaks some conflicting constraints and log them in the debugger.

Similarly: For greater than equal to, if we want to use greater than or equal to instead of less than or equal to, our bottom two constraints would become containingView.bottomAnchor.constraint(greaterThanOrEqualTo: label*.bottomAnchor, constant: 0), i.e. view bottom should be greater than or equal to 200 for label1 and it greater than or equal to 300 for label2, which would result the same. So now our Auto-layout will now try to keep the view greater than or equal to 200 and 300 both in order to satisfy all constraints.

Lastly for peeps who work with storyboards: You may have to give an equality constraint then in the size inspector, you may have to modify it like in this image below:

Hope this will give you a bit of help understanding less than / greater than constraints.

Happy Coding :)