Simplifying AutoLayout with Stack View
and reducing constraints.
In the digital world, every website and mobile app have to be “responsively designed,” so that the design automatically adjusts to the screen resolution of a particular device. As Android has always had devices with different screen resolutions from multiple OEMs, they have been doing responsive design from the very beginning. Now that Apple has been consistently releasing iPhones with different resolutions each year, they too have had to adopt it.
To simplify the process, iOS has a feature called AutoLayout. AutoLayout allows developers to create user interface by defining relationships between UI elements. Most iOS developers are familiar with this tool.
Let’s take a look at some UI.
Now let’s see how we would build this UI using AutoLayout constraints.
← We must define several constraints for each of the UI elements.
Image Views: Top Constraint, Leading Constraint, Width and Height
Labels: Top Constraint, Leading Constraint, Trailing Constraint and Height
For a simple view like the one above, we would have to define as many as 36 constraints. Imagine a more complex UI — defining constraints and updating/managing the UI would be a difficult task.
What if you could achieve the same UI by setting just 4 constraints?
Turns out, you can. Enter UIStackView. Stack View drastically reduces the number of constraints that need to be defined and allows a developer to update and maintain the UI more easily.
How does UIStackView work? Let’s run through an example.
- Add two labels and embed them into one Stack View. Set axis to vertical.
2. Embed an image view and a label into a Stack View and set axis to horizontal.
3. Embed another image view and label into another Stack View and set axis to horizontal.
4. Embed Stack Views from point 2 & point 3 into another Stack View and set axis to horizontal.
5. Embed image view into another Stack View with axis set to vertical, along with the stack views from point 4 and point 1.
6. Embed another image view into Stack View with axis set to horizontal, along with the stack view from point 5.
7. Add another label for the title. Embed this, along with all the Stack Views created above, into another Stack View with a vertical axis.
Constraints aren’t a large part of StackView. It’s almost entirely about the vertical and horizontal stack views or using the distribution property to align UI elements, making things very simple. We only have to set constraints for the final vertical stack view which was first stack view in the hierarchy of UI elements.
Now you’ve seen how StackView can help eliminate the tedious and error-prone process of managing a large number of constraints. The best use of this feature is when setting multiple controls that are vertically or horizontally aligned with one another. You simply add the controls and provide frame constraints — StackView handles the alignment. Finally, an additional benefit of StackView presents itself when you choose to hide a view. StackView automatically removes the space that it occupies.
If you liked this post and found it helpful, give me some claps! Please follow me on Twitter and on Medium! Follow AppIt Ventures for other interesting articles. Thanks 😄
