Simplifying AutoLayout with Stack View and reducing constraints

November 14, 2018
Stack-View-Image


https://lh3.googleusercontent.com/HJWVJ4kXupnMKPs8XbMp6QxWaTfHcXdQAl1dXY3x_Wghfdbf2kQnigmmAN67B8Mnr0iNZw6Xvd-glgHd08AwVesUTvS_17u6noHy_GF9LLGf1UmK_Q_nPnRSeV7hCe_ml0Pyg2mW

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.

https://lh5.googleusercontent.com/qr69OmNjk_8R8lcn0GbgU1UzaAQxAzwJ0HkV0JzJJoF86NvZ-nuPajx7Z3Ax7uPMyMB2zLHWKxsU57hReCHHMdmL7H6mScYzXtuxb4s2XB-7m1HcHjVYN39nOC4gYy_BG8g5SlCZ

Now let’s see how we would build this UI using AutoLayout constraints.

https://lh6.googleusercontent.com/UuW8r9H6kn9cXiNtccXCHaeWyAEz-MsvPYrUESh_f1eJ4GyEg_nPF-ZbofTYob0JL4OWLWy8Y-D3YCW8adsdtylgCcyuPOU9Y0o4XxtR18X9X-AAiPHfRdLdLhWkNmfvyek1tmuf

UI design with 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.

https://lh6.googleusercontent.com/oynRGq1me5W0nhv2R0L8i-jvFsvaUV3M_RfY7Su7ChqFNubmluVPPw8Rbf9HHurwh4ANhbL839Iglk-xPxFA-Wip_8hY_Kw96jW7HuOLQkl2qMr3deZl5ioG4gTosygMUvaRstSY

UI design with Stack View

How does UIStackView work? Let’s run through an example.

  1. Add two labels and embed them into one Stack View. Set axis to vertical.
https://lh6.googleusercontent.com/rNeuHrW1sR-L9pU0Kzdqs2rc4tS1PTOjtCkqV1Y0TkzWL4uPrdTDM7UMaZLCnJnq18uvKjzbWnKibtG3ZiB2TQp1_-sV525GTMfN5JEUTur-T9e4a9gRvWIIkj4BStbGjtuWYE8a

2. Embed an image view and a label into a Stack View and set axis to horizontal.

https://lh6.googleusercontent.com/ybe5rs5WgXy8vI27Y3yn1p39oJhvgtT966PtEqLqR60yqCY9DcXAZ0yB4BfMxQYpi6eDs7Xh9keKc4DiJh6o2D17F0f1FKa9QxAeoaRvh21TGJw9bh3IHGEfarz73FmvhRv0gtmX

3. Embed another image view and label into another Stack View and set axis to horizontal.

https://lh3.googleusercontent.com/XTLn0kSSvVBOj9L0RZUogkZ4d_PM3bh7NVu3iUD9PRWBhFxpdjXugE0-6PHH7jMFsu4edXGyOPX7nWp_nPq1C0MAuoOa13gp93S5atudeCL_CHFYaAOQ2fzOXgks8eAodpL-ElXW

4. Embed Stack Views from point 2 & point 3 into another Stack View and set axis to horizontal.

https://lh5.googleusercontent.com/mgFWUjMlgcqsdHAqxWXIK8suMn5RzbwdKUlBYuFsh6zs3NPWACMzlvdfb8Ac2OrkjypqXvfS6GdaZTONmMpuC_1n2PonzDQP9oIa61aeiAfR_wnZ4v5-I1Wy98CANIeFHghkJrm7

5. Embed image view into another Stack View with axis set to vertical, along with the stack views from point 4 and point 1.

https://lh4.googleusercontent.com/_FkSSGpOKcqHSwU_SEQlrtH4neiBr8_OemDXfqvNB4bApSK7zQw_u5-YjU9PZLwWVQtQT014KUef7Xh64v-miAp5liKTv3LSmlyn7yasy5w8szpOMAmtHFQnEq0Bw91bMgeYufah

6. Embed another image view into Stack View with axis set to horizontal, along with the stack view from point 5.

https://lh5.googleusercontent.com/0I0DKgH2WRVoaGz9rzFH0y_-3tFO6JJKD7o1EZNzUWzyHQH6AHJItbz7djt3-qC9uZphzXTk9AQ_qhEm6GqIAl08t5lmKFYMqhw8NGPC23pOWDyI8woRXgv1NnvKBJCtc04afYk1

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.

https://lh4.googleusercontent.com/A0FaaoNsroQagT-6C1Tjqm5M9BvEdtVgllXSNNv4oH3SqQnL4s7Lfs0iKQmOMx8uPTzqIZlfRJNn8pagQ49io10sjsQyJ-TNgOZ799r9Ub3bqu-G13txzpxWYrS2t0J-OQtkKTS9

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 😄

Let's build something awesome.

Reach out to us to discuss app development services for your company. We'll get back to you within 24 business hours.

Send us a message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.