Auto Layout and Size Classes enable apps to gracefully conform to varied screen sizes and orientations. It future proofs your apps, so they render correctly in new contexts. Unfortunately, these technologies are also a continued source of frustration for many developers learning Apple’s iOS platform. Some even give up on them entirely, by choosing to stick with struts and springs, or by defining their layouts programmatically. Ignoring it is quickly becoming a less viable option for developers wanting to produce polished user interfaces that look great on the latest devices.
iPad multitasking, introduced with iOS 9, is a good example of a feature that is reliant on Auto Layout and Size Classes. They are needed to properly conform an app to the size constraints of a split screen. In many cases, apps effectively leveraging Auto Layout are ready to work in a multitasking environment. Enabling multitasking for apps using manual layouts often produces ugly results.
I resisted Auto Layout for a time because it was a struggle to create even basic layouts using it. Eventually, I identified the mistakes that caused me endless grief and I developed tactics that achieved the desired results. With these practices, I’ve since found Auto Layout to be a faster and more expressive method for building user interfaces. By sharing my tactics, I hope others may avoid hours of frustration and learn to appreciate Auto Layout and Size Classes for the powerful design tools they are.
Segment Your Interfaces into Proportional Regions
Before working with the Interface Builder, it is useful to sketch out an interface on paper or in a wireframe tool. This helps in determining which content should be emphasized most on each screen. The most important content will generally take up the most screen space, allowing you to arrange your content into proportional regions by their relative importance. Implementing a proportional layout is easily accomplished using basic constraints.
Such constraints are created by setting the width or height of a view to the match the corresponding dimension of the super view and changing the constraint’s multiplier to a fractional value. For example, setting the multiplier to 0.5 guarantees a dimension will always be half the size of the parent’s corresponding dimension.
A layout can often be expressed several different ways using constraints. Strive to implement your interfaces using the fewest constraints possible. Using fewer constraints reduces complexity, making debugging easier and leaving less to go wrong.
Create Base Value Constraints
The overall number of constraints a layout requires can be kept minimal by defining constraints applicable to multiple sizes classes. This is because similar constraints won’t need to be established for each context. These constraints take advantage of the Base Value classes that include “Any”. “Any” is a wild card that enables a constraint for both Regular and Compact displays. “Any x Any” is the most general setting. Constraints created under this context are enabled for all Size Classes.
When designing your layout, take note of view relationships that are consistent across devices and screen orientations. Consistent relationships are great candidates for base value constraints.
Design for Final Value Classes
When creating your layout, it is tempting to try and make it look perfect for all Size Classes, including Base Value classes. There is no point in doing this because only the Final Values map to actual devices. New developers sometimes fall into the trap of trying to make the default “Any x Any” mode look good, without realizing their actions are actually breaking their interfaces for the classes that matter.
Use the Preview Assistant
A lack of immediate feedback from the Interface Builder is another source of frustration. To see the impact of your changes, you either need to tell it to adjust the views to match your constraints, or run the app in the simulator. Both options are tedious, but there is a better way.
When editing storyboards or .xib files in Interface Builder, a Preview pane is available from the Assistant Editor. The Preview pane displays your layout as it will appear on various devices and automatically updates as you make changes. This feature makes it much easier to experiment and see how each change impacts the layout’s appearance.
Don’t Adjust View Location or Size
Before Auto Layout, views were manually arranged by explicitly setting each view’s location and size. When using Auto Layout, the developer defines constraints to have it arrange the views for them. Interface Builder does nothing to discourage developers from manually setting these values, so it is common for novices to still tweak them. This ultimately leads to confusion and frustration because Auto Layout overrides these values and inevitably fails to produce their desired results.
Don’t Rely on Suggested Constraints
Interface Builder has features to generate constraints for you, but in practice this is not that helpful. While the “Add Missing Constraints” and “Reset Suggested Constraints” work as advertised, they fail to work in the way many beginners think. They mistakenly believe that generated constraints are optimal and will result in an interface that renders properly on all devices. In reality, your interface won’t look right in most contexts.
A lot of assumptions are built into the constraints that Interface Builder creates for your layout. It has no way of discerning between assumptions that are reasonable and ones that don’t make sense. At best, generated constraints are a starting point for your layout implementation.
Don’t Over Use Constants
At a recent meetup, a developer shared his neat little app. During his presentation, he spoke about how he wrestled Auto Layout into submission by using numerous constraints to force each view’s placement and size based on hard coded constants. While this approach did produce the desired result, it is not a good practice.
The advantage of using Auto Layout is that it will dynamically adjust your interface to display optimally across all devices. It can do this because well-constructed constraints allow for flexibility in the arrangement of views. If there are too many constraints that are set using constants, the end result is equivalent to using a manual layout, but with a lot more effort.
Visit the links below for more in depth information about working with Auto Layout and Size Classes. I found them quite helpful.