Chapter 6. Adaptive layout

From the iPhone 4S to the iPad Pro, vastly different device resolutions are available that your app needs to look good in. After adding landscape and portrait to the mix, plus all the different multitasking windows that your app can find itself in, it’s a headache to think about designing different fixed app layouts for all the different combinations and permutations.

There must be an easier way. How can the interface of an app look great regardless of its environment?

Over the years, Apple has introduced several different approaches for setting up a layout that adapts to its environment. In this chapter, we’ll look at various solutions and how to choose between them.

6.1. The problems

Before we look at the solutions, let’s look closer at the problems we’re facing.

Device resolutions

Once upon a time, there was one iPhone, and everyone was happy. Pixels were the same as points, and developers knew the resolution of the screen they were developing for. Fast-forward to today, and there are multiple devices on the market, let alone in people’s hands, and multiple point resolutions that an app needs to look great on (see figure 6.1).

Device orientation

6.2. Auto layout

6.3. Autoresizing

6.4. Manual adaptive layout

6.5. Choosing an approach

6.6. Summary