iOS Adaptive Layouts

iOS eco-system has grown to support a plethora of iOS devices in the market. They all are different in shapes and dimensions which present a unique challenge for app developers to optimize apps for different size and context. But how can we do that? The answer is Adaptivity.

Why Adaptivity?

With adaptivity, we can layout interface specially formatted for the environment. If the environment has limited space, we might want to display the most important and simplified piece of information. On the other hand, if the environment has ample amount of space, then we can layout our apps to display sufficient content.

One of the tools that Xcode provides is AutoLayout. For small adaptivity conditions (same layout across all orientations) AutoLayout works fine. But for different layout across different device size and orientation, another tool should be used i.e. Trait Collection.

Size Class

A size class is a specification of a display’s width or height that can be used to describe a family of devices and orientations. All widths and heights fall into one of two size classes — compact or regular.

iOS Devices Size Classes

One should be aware of size classes while designing an adaptive layout.

Enough talk?🙊 Let’s get started

Download the starter project here

Make sure you have the right tools when you start building your first adaptive layout.🔧

Example project works fine in both of the orientations. What we want is to improve our layout for landscape mode. We can use size classes to leverage this. Open Main.storyboard file and check for yourself

Inside document outline select Username Stack View

Perform following steps:

1. Click (+) add customization → Attribute Inspector > Axis
2. Select Height: Compact, Width: Any

Adding Customization for iOS Landscape

3. Select Horizontal for our size class

Remember hC represents size class for iPhone Device in landscape mode which implies compact height for any width. 🏋

Repeat the same procedure for Password Stack View.

Now we can add some spacing between the text fields by changing spacing of Fields Stack View.

Fields Stack View

Last but not least, set following options for Buttons Stack View:

Buttons Stack View

Hurrah!! We have successfully optimized our layout for landscape mode. 🎉

Optimized Login Layout For Landscape Mode

What’s Next? 🤔

Trait collection provides huge control for developers to build highly optimized user interface for any iOS device available. Using this tool we can completely replace the interface without even writing a single line of code.

Download Complete Project

Feedback and get in touch on twitter @khfarooq Thanks for reading! 🤹