Understanding Auto Layout item relationships
Auto Layout, since its introduction in Xcode 6 has become the Trident of Poseidon of every developer in the ocean of iOS UI Designing. Every mobile app is being designed via Auto Layout and Adaptive Layouts. We all know a lot about Auto Layout.
So what is new in this blog? You are boring !!
Hold on, fellas !!
What is it all about?
Until recently, I was one of the developers who was strongly using Interface Builder for UI designing. So creating and using constraints programmatically was almost minimal for me. When I started writing constraints programmatically, I stumbled quite often with the relationship between first item and second item i.e the relation of constraint from one UI component to another. So thought of penning down my observations.
Let us consider the following design:
For setting this in IB, we will require a minimum constraint of View.Leading — Super View.Leading, View.Trailing — Super View.Trailing, View.Top — Super View.Top, View.Bottom — Super View.Bottom.
Let us see the constraints that we have added.
We do not want our constraints to fail the Safe Area layout so we placed them in relation to Safe Area, so don’t get confused. Mark carefully, even though we set our constraints from our View to the Safe Area, the first item should ideally be View but in some constraints we find the first item to be Safe Area.
Why did Xcode do this? 🤦
Okay, let us set View to be the first item in the attribute inspector in every case and see the changes. Just reversing the first and second item for trailing and bottom.
Mark the value of the constant in both the case has become negative.
Let us leave IB and lay the constraints programmatically our way making all constraints from Purple View and see what is the behavior.
Output:
What went wrong?
To understand the above behavior we need to understand the following concepts and study the behavior accordingly.
iOS Coordinate System
Referring to the above chart, the x value of any UI component increases as we move right and vice versa. The y value of any UI component increases as we move down and vice versa.
Auto Layout First Item and Second Item
All Auto Layout relationships can be expressed as:
Restructuring our constraints again
If we restructure our constraints, they will be something like below:
Top:
Purple View.topAnchor = Super View.topAnchor + 50
Top anchor is a type of vertical constraint and it will be related with Y-Axis. So we want our Purple View top to be placed below to the Super Views top i.e the y coordinates of the Purple View will be 50 points more than that of Super View. So we added 50 points to the Super View top as in iOS Coordinate system y increases moving downwards.
Bottom:
Purple View.bottomAnchor = Super View.bottomAnchor - 50
Here the Purple Views the bottom is to top of Super Views bottom and hence we are moving upward vertically along Y-Axis and thus the value of 50 points have to be negated as in the iOS Coordinate system y decreases moving upwards.
Leading:
Purple View.leadingAnchor = Super View.leadingAnchor + 50
Here the Purple Views leading is to right of Super Views leading and hence we are moving right horizontally along X-Axis and thus the value of 50 points have to be added as in the iOS Coordinate system x increases moving right.
Trailing:
Purple View.trailingAnchor = Super View.trailingAnchor - 50
Here the Purple Views trailing is to left of Super Views leading and hence we are moving left horizontally along X-Axis and thus the value of 50 points have to be negated as in the iOS Coordinate system x decreases moving left.
So the correct set of constraints will be:
Output:
Now there is one more question that why does Xcode reverse the first item and second item while setting in Interface Builder and does not set in a readable way as we did in our code. For that, I would refer to a statement from one of Stack Conversation.
Now, constraints on the other end are most often expressed with items in the other order because you usually want the relationship to be the opposite. That is, you want the view’s top to be below the superview’s top, but you want the view’s bottom to be above the superview’s bottom. So, the constant is positive only when you arrange the items in the other order
Conclusion
Auto Layout is something that we all love and it is always best if we know in depth what we are doing. Item relationships being one of the building blocks of Auto Layout should be clearly understood to achieve efficacy in layouts. Happy Coding. 👼🏻
I would love to hear from you
You can reach me for any query, feedback, or just want to have a discussion by the following channels:
Gmail: abhisekbunty94@gmail.com
Please feel free to share with your fellow developers.
