Xamarin: Building Dynamic Layouts for iOS with UIStackView

Laying out views on iOS has traditionally been very difficult. Before the birth of the iPad and different iPhone form-factors, developers would often hardcode view positions. As the device landscape has broadened, this is no longer a viable approach. To solve this, Apple introduced AutoLayout, which can dynamically adjust your user interface depending on device form factor by using a constraints-based layout system. AutoLayout solved many issues, but is difficult to learn, fragile to changes, and can be extremely time consuming to get right. One of the more frustrating aspects of this approach is if I wish to add a control between different parts of my content, I’ll need to break a number of existing constraints and rebuild the layout almost from scratch to ensure it works perfectly.

What if we could layout views in a dynamic manner that was also extremely easy? One of my favorite editions to iOS 9 is a brand new control named UIStackView to help streamline the process of laying out interface elements. This new control is unlike any existing controls we’ve been using before with iOS. In this blog post, I’m going to detail how you can get started building dynamic, beautiful UIs with UIStackView today.

Introducing UIStackView

Apple has taken note of our pain with AutoLayout and has provided us with a new tool which aims to make our lives easier. UIStackView eliminates the pain of inner constraints by handling the creation of the the constraints at runtime based on the simple properties you’ve set. This means we can drag and drop new controls into a UIStackView and it’ll have the correct constraints automagically set for you. It even allows for adding and removing views at runtime (you’d set it to be hidden).

Instead of working with constraints like you would with AutoLayout, you use self-descriptive properties such as Axis, Spacing, Alignment, and Distribution with UIStackView. Naturally, these are accessible from the Properties Pad which makes it as simple as a few mouse clicks to get your UI looking great on every iOS device.

UIStackView is an interesting addition to our toolbox as it is a non-rendering subclass of UIView. Because its non rendering, you don’t have the ability to set its background color or override its Draw method. Instead, it’s just a control for helping you with the layouts of its subviews. Another key limitation of UIStackView is that it is not compatible with devices running below iOS 9. This means that if you need to support backwards compatibility, you’ll need to continue using constraints (be sure to check your Xamarin Insights data to see how many users are using pre-iOS 9 devices).

Adding and Removing Views from StackLayout

UIStackView has an API for adding and removing subviews which allows you to avoid worrying about your layout. Any views you wish to view within the stack view will need to be added using the ArrangedSubviews property rather than SubView property.