{"id":23596,"date":"2015-12-31T12:11:06","date_gmt":"2015-12-31T20:11:06","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=23596"},"modified":"2015-12-31T12:11:06","modified_gmt":"2015-12-31T20:11:06","slug":"autolayout-101-building-beautiful-dynamic-uis-for-all-devices","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/autolayout-101-building-beautiful-dynamic-uis-for-all-devices\/","title":{"rendered":"Auto Layout 101: Building Beautiful, Dynamic UIs for All Devices"},"content":{"rendered":"

\t\t\t\tMake 2016 the year that your UIs look beautiful\u00a0on all form factors!\u00a0By using Auto Layouts, you ensure that you app’s UI is responsive and looks great no matter what device it runs on, and also get support for iOS 9’s multitasking feature<\/a> for free.<\/p>\n

What is Auto Layout?<\/h3>\n

Auto Layout is a constraints-based layout system introduced in iOS 6 that has since\u00a0been\u00a0adopted on OS X and tvOS. It allows us\u00a0to easily create adaptive user interfaces rather than the traditional layout system, where each element’s has a hardcoded value for its position. We only had to worry about one screen size when the App Store\u00a0initially launched, which made development relatively simple. Today, the device landscape is very different—we need to think about both different devices, such as the iPod, iPhone, Apple TV, and iPad, as well as different form factors within those devices,\u00a0which further complicates how we create our user interfaces.<\/p>\n

Auto Layout solves this\u00a0by creating a mathematical representation of the relationship between views (which is called a constraint). Although a constraint may sound complex, in reality it translates to the size and position of a UI element, relative to the size of the display or other views around it.<\/p>\n

UITraitCollection<\/h3>\n

In iOS 8, Apple introduced two new additions to UIKit to help us create interfaces for multiple devices. These were size classes and UITraitCollection<\/a>.<\/p>\n

A UITraitCollection describes the properties (or traits) for a user interface element. These include properties such as size, display scale, and user interface idiom (an iPhone or iPad). This allows us to redefine our UI based on a set of traits, which means we can have unique UIs depending on the device\u2019s orientation or size. Just as the introduction of the iPhone 6 moved us from pixels to points, UITraitCollection forces us to think about screen dimensions, device orientations, and UIs in a more abstract way.<\/p>\n

Size Classes<\/h3>\n

Size classes combined with Auto Layout allow the UI to adapt to the different traits of a device. In fact, a UITraitCollection contains two properties, HorizontalSizeClass<\/a><\/i> and VerticalSizeClass<\/a><\/i>. UIUserInterfaceSizeClass enumeration contains three\u00a0members: Compact, Regular and Unspecified.<\/p>\n

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

When using Auto Layout, we no longer have numerous physical devices to concern ourselves with when developing for iOS. Instead we have four abstract devices to design against: regular-compact, regular-regular, compact-compact and compact-regular. This approach results in all iPhones in portrait having compact-width and regular height size classes and translates to your UI looking great on both the iPhone 4S and the iPhone 6 Plus without any modification.<\/p>\n

Size classes aren\u2019t just for the device class, but can also be used for views. This means our views can differ from the device size classes listed above and opens up a world of possibilities since we\u2019re able to display multiple views on screen at the same time, each with its own unique size class. A popover on the iPad, for example, could have a Regular-Compact Size Class, which would result in it displaying full screen on the iPhone in Portrait without any extra work from the developer.<\/p>\n

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

An Abstract New Way of Thinking<\/h3>\n

Some readers may not feel that migrating from old xibs or the springs and structs approach to Auto Layouts\u00a0is necessary. Apple has made it clear that all iOS developers today should be using size classes to ensure their apps work with multi-tasking devices (limited to the iPad for the moment). Adopting Auto Layout and size classes requires a shift in how we think about iOS design. Pixel perfect mockups are no longer feasible due to the adaptive nature of this approach to layouts. But alongside the loss in pixel perfection, we gain the ability to build our UI for multiple form factors once and be guaranteed it\u2019ll look great across all devices.<\/p>\n

Further Reading and Practical Guides<\/h3>\n

You should find everything you need to get started in our documentation. We’ve put together a plethora of information on how to create your UIs with Storyboards<\/a> and how to use Auto Layouts<\/a>. Xamarin University<\/a>\u00a0also provides a terrific class\u00a0which covers Advanced iOS UI with Auto Layout and Constraints (iOS 300).\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"

Make 2016 the year that your UIs look beautiful\u00a0on all form factors!\u00a0By using Auto Layouts, you ensure that you app’s UI is responsive and looks great no matter what device it runs on, and also get support for iOS 9’s multitasking feature for free. What is Auto Layout? Auto Layout is a constraints-based layout system […]<\/p>\n","protected":false},"author":1929,"featured_media":23597,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[6,4],"class_list":["post-23596","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-ios","tag-xamarin-platform"],"acf":[],"blog_post_summary":"

Make 2016 the year that your UIs look beautiful\u00a0on all form factors!\u00a0By using Auto Layouts, you ensure that you app’s UI is responsive and looks great no matter what device it runs on, and also get support for iOS 9’s multitasking feature for free. What is Auto Layout? Auto Layout is a constraints-based layout system […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/23596","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=23596"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/23596\/revisions"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=23596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=23596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=23596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}