Why you should use UIStackView or one of its open source alternatives

Over the last 12 month, I learned a lot about the differences between the iOS and Android Environment along the way. One thing that attracted my attention over and over was Androids easy layout system. Every time we had to reconfigure a view, the Android developer just removed or added that View from the containing layout and he was instantly ready to go. The same applies to sizing, he just removed a subview and the parent resized itself automatically. I was frustrated and impressed at the same time because if you are an iOS Developer these tasks are a little bit problematic. Thanks to UIStackView we are able to accomplish same things under iOS really easy since iOS 9. Here is a little example:

Setup using plain Autolayout

What you see is a basic UIView containing 3 UILabels. All Labels are constrained to have the same size. Each label also has some fixed top, left, bottom and right margin constraints. The biggest Problem with this approach is that you need to break some of the constraints if you want to add a new label to the View. Basically, you need to remove constraints and add new ones, maybe you get everything right again but maybe you just mess it up. With a more complex layout, it can get even more complicated to extend your View.

This is the moment where UIStackView comes into play. You can achieve the same thing as above but much simpler and easier to extend. First, you need to remove the labels and add a UIStackView to your UIView. But wait, Xcode provides a handy shortcut for you, that embeds all your views inside a StackView super fast. Just follow the path Editor/Embed In/Stackview after selecting each of the 3 View et voilΓ .

Labels wrapped inside a UIStackView

The UIView now contains a UIStackView filled up with all 3 Labels. There are 2 more things you need to do to finish everything up. First update the left, right, bottom and top constraint of the UIStackView to a value of 8. After you did that you need to select the Stackview and change its distribution value to Fill Equally and Spacing to 8.0 inside the Inspector. What you get is a nice and easy to understand equivalent of the example above.

Updated Constraints

If you want to add a new View to this hierarchy you just drag and drop another label and everything adjusts itself like magic. No more need to manually remove and add Constraints. Hell yeah!

Added a new label to theΒ stack

There is a lot of Stuff UIStackView can do on top of that. For Instance, most of its properties are animatable, you can nest UIStackViews into each other and you can also define size class dependencies directly inside the Storyboard. We all don’t like long tutorials so maybe I will cover some of these features in the future. For now, I just wanted to give you a taste of what UIStackView can do. Besides that, there are great open source alternatives compatible with iOS8 and iOS7.

Check out Soundrocket, a great Soundcloud Client for iOS and feel free to add me on github, twitter, linkedin or xing if you have any question! If you like electronic music you can also listen to my Tracks on SoundCloudΒ ;)


Sebastian Boldt