How StackView help your iOS app to be more dynamic

During the past years, autolayout was really useful to create dynamic interfaces for a multitude of devices with differing resolution.

From iOS 9, is now possible to use a new UI component called UIStackView, that is the holy grail and can be used in conjunction with autolayout.

In this article, we introduce a conceptual framework for considering the range of strategic possibilities in using StackView.

Stack views hide the details of constraint management from the developer because every view has an intrinsic content size.

If you add two views inside it, depending on the configuration of the UIStackView, you can configure alignment (vertical or horizontal), distribution, and spacing between the elements.

In this way, you can simplify your layout configuration, and work with nested views.

But UIStackView offers more than that. Works with autolayout when you have dynamic elements is a little bit complex, especially when you have a lot of views that depend on a business logic.

An example can be our message box used in our mobile app, that is highly dynamic.

The message box is basically a cell, with inside a stackview that allow our cell engine to show dynamic content inside it, like in this case: text and images, maintaining a space between elements, and adding text and images that can be dynamic in height and width.

Images can be added to the stack view when needed, regardless of if they are one or ten. The only constraint on the images is the height because the width is governed by the box, generated by some logic around the length of the text, if present.

How we can achieve this if we don’t have StackViews? We could have used UITableView nested inside UITableViewCell, but the implementation is more complex and unwieldy.

Imagine that you need to implement a view with elements, where every view inside it appear or disappear depending on a complex business logic.

For example the profile area of a user, where there are some sections that need to be hidden when a user is not logged.

Drawing the view controller in a storyboard and inserting every main view inside a stack view is the easiest step, but if we try to hide a view there are some problems with the autolayout. Then, the solution is to use constraints priority of the height constraint to manage this case very easily, and set the property isHidden to true or false on every view, to compress or expand the content of the UIStackView. This article explains very well what I mean.

If you want to implement the same behavior with the only autolayout, you need to add the constraints between every view and between every margin, and you have to act on every single height constraint, remembering that you must remember the exact height of the component. In fact, if you hide a view, the distance between the above and bottom elements doesn’t change. Furthermore, the biggest problem with this approach is that you need to break some of the constraints if you want to add a new component to the view. It’s a little bit tricky. Ndr: of course, this is not the unique path to follow.

In conclusion, UIStackView is really helpful in many cases, especially two:

1. when you need to repeat same views multiple times like in a Sign-up form. We use many text fields and manually set constraints between each text field. But if you put all text fields in stack view then you just need to set required constraints of stackview only and not text fields. Textfields inside stackview will be arranged automatically without Autolayout.
2. sometimes we need to hide view and we want to remove its occupied space so at that time use of stackview is recommended because if you hide any view that resided in stackview will also remove its occupied space automatically.

Cheers ✌

Originally published at blog.customerly.io on May 14, 2018.