{"id":20833,"date":"2016-02-15T09:45:09","date_gmt":"2016-02-15T17:45:09","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=20833"},"modified":"2016-02-15T09:45:09","modified_gmt":"2016-02-15T17:45:09","slug":"building-dynamic-layouts-for-ios-with-uistackview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/building-dynamic-layouts-for-ios-with-uistackview\/","title":{"rendered":"Building Dynamic Layouts for iOS with UIStackView"},"content":{"rendered":"

\t\t\t\tLaying 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, but this is no longer a viable approach as the device landscape has broadened. To solve this, Apple introduced AutoLayout, which can dynamically adjust your user interface<\/a> 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 that 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.<\/p>\n

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

\"UIStackView<\/a><\/p>\n

Introducing UIStackView<\/h2>\n

Apple has taken note of the pain of AutoLayout\u00a0and has provided a new tool that aims to make our lives easier. UIStackView<\/code> eliminates the pain of inner constraints by handling the creation of the the constraints at runtime based on the simple properties you\u2019ve set. This means we can drag and drop new controls into a UIStackView<\/code> and have the correct constraints automatically set for us. It even allows for adding and removing views at runtime (you’d set it to be hidden).<\/p>\n

Instead of working with constraints like you would with AutoLayout, you use self-descriptive properties such as Axis, Spacing, Alignment, and Distribution with UIStackView<\/code>. 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.<\/p>\n

\"uistack_hero_2x\"<\/a><\/p>\n

UIStackView<\/code> is an interesting addition to our toolbox, as it is a non-rendering subclass of UIView<\/code>. Because it is 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<\/code> is that it’s 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<\/a> data to see how many users are using pre-iOS 9 devices).<\/p>\n

\"Xamarin<\/a><\/p>\n

Adding and Removing Views from StackLayout<\/h2>\n

UIStackView<\/code> has an API for adding and removing subviews, alleviating any worries about your layout. Any views you wish to view within the stack view will need to be added using the ArrangedSubviews\u00a0property rather than SubView property.<\/p>\n

\n\/\/Add View\nMyUIStackView.AddArrangedSubview(myView);\n\n\/\/Remove view\nMyUIStackView.RemoveArrangedSubview(myView);\n<\/pre>\n
Extending this a little further allows us to easily add an animate effect to the addition and removal of views.<\/p>\n
\/\/ Animate stack\nUIView.Animate(0.25, ()=>{\n    \/\/ Adjust stack view\n    MyUIStackView.LayoutIfNeeded();\n});\n\n<\/pre>\n
Learn More<\/h3>\n
We have fantastic documentation on how to get started with UIStackViews<\/a> over on our documentation site.<\/p>\n
UIStackView<\/code>s are available with the latest version of Xamarin.iOS for both Xamarin Studio and Visual Studio. If you’re looking to target iOS 9 as a minimum, you’ll find UIStackView<\/code>s dramatically improve the rate at which you can build a user interface that looks great on all iOS form factors.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
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, but this is no longer a viable approach as the device landscape has broadened. To solve this, Apple introduced AutoLayout, which can dynamically adjust your user interface depending on […]<\/p>\n","protected":false},"author":1929,"featured_media":20835,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[6,4],"class_list":["post-20833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-ios","tag-xamarin-platform"],"acf":[],"blog_post_summary":"
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, but this is no longer a viable approach as the device landscape has broadened. To solve this, Apple introduced AutoLayout, which can dynamically adjust your user interface depending on […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/20833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1929"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=20833"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/20833\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=20833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=20833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=20833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}