So far we’ve been working with a specific screen area to implement our app components and it looks fantastic! Let’s be honest, we cheated a little bit. We only tested it using one device size and never rotated it.
If you are not afraid to hurt your ego, test it out in a different size simulator or try to rotate the device (simulator). Here's how it may look like:
Not pretty! :'(
Oh, well, that's just for the moment. We'll correct that shortly! :zorro:
In this chapter we’ll explore what layout parameters we have to deal with.
Discovering the layout parameters
There're a number of layout parameters we must consider:
Screen size - the dimensions of visible area of the device screens we choose to support.
Orientation - one of the 4 positions we chose to support in our app:
2 portrait - original with camera at the top and the other - upside down.
and 2 landscape - rotated 90 degrees clockwise and counter-clockwise from the original portrait orientation.
Safe area - visible area that is always visible, which means excluding areas that occasionally maybe hidden. This circumstance was introduced with iPhone X.
Let’s see how this parameters affect our presentation and what we can and should do about it!
There are a number of devices available in both families - iPhone & iPad. All of them are have different screen sizes.
In order to navigate all the variations easily, Xcode lists all the different possibilities referring to then by a representative device name.
What's representative device?
For example, we have iPhone 7 and iPhone 8. They are different models, however of the exact same size, so that the representative device of that size is iPhone 8. By stating that our design works for iPhone 8, we imply that it also works for iPhone 7.
Let's take a look at our storyboard design:
To expose the rest of the sizes click on the 'View as' area on the bottom panel:
Those highlighted in blue are currently displayed in storyboard preview.
The variations we got here:
iPad Pro 12.9"
iPad Pro 10.5"
iPad Pro 9.7"
iPhone 8 Plus
Click through the different sizes and observe how it impacts the original design. To display multiple variations at once, we can switch to Preview mode. Switch to a split view in Xcode and on the right panel select preview on the menu at the top:
You'll see the current size is placed in preview, click a plus icon in the bottom left corner of the preview part and add any of the available options:
If we add them all, we'll be able to quickly asses out designs at a glance (skip the split views and iPhone 4s):
Evidently, users who have a device other than iPhone 8, will not be pleased with the appearance of our app. :'(
There're 4 orientations to consider. Since there are no hardware buttons that allow any interaction within an app, for the most applications it's sufficient to consider two layouts - portrait and landscape.
To test orientations for each device we've got dedicated toggles on the bottom panel in the storyboard:
Now let's rotate our preview options to landscape (to switch between portrait and landscape views, roll over a view and click the rotation icon at the bottom):
With landscape orientation, our app is not only not good looking but also unusable on iPhones - part of the UI is not visible. Even iPhone 8 users will one disappointed with our application. :'(
Safe area was introduces with iPhone X that implements edge to edge screen with rounded corners with a notch at the top and no home button (and bottom panel altogether):
The app layout should, in fact display content on the full screen (including the space beyond safe area), however that content should not be critical for user interactions.
In this course we'll stay within safe area. :ange:
And, one more parameter - Adaptation
There's a special UI element available on iPads - Split View (or Master-Detail view), managed by Split View Controller. It becomes visible on the preview panel when one of the iPads is selected:
A representative example of an app that incorporates split view is an iOS Mail app - you can view it on iPad simulator or your Mac (It won't be an iOS version, however, the layout is very similar).
We will not be working with this parameter in this course.
So, how do we deal with all this?
Managing layout in iOS
There are two key approaches to manage layout in iOS:
Auto Layout - this method requires defining constraints with various parameters to accommodate the conditions of each layout component.
Size Classes - this is a newer and more general method that allows generalizing the layout and lets the operating system fit the general concept of the appearance depending on a size class that is in effect at each moment.
Layout can be created in Interface Builder or programmatically.
Let's roll up our sleeves! :zorro:
The following layout parameters must be considered and accommodated:
Screen size - physical size of the touch screen
Safe area - the area of the screen that is always visible to the user
Orientation - 2 portrait and 2 landscape.
The key approaches to manage layout are in iOS are:
using Auto Layout
using Size Classes
The layout can be defined:
Using Interface Builder