• 10 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 7/4/19

Discover layout parameters

Log in or subscribe for free to enjoy all this course has to offer!

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:

Oops...
Oops...

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!

Screen size

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:

Storyboard original design - iPhone 8
Storyboard original design - iPhone 8

To expose the rest of the sizes click on the 'View as' area on the bottom panel:

Storyboard design sizes
Storyboard design sizes

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

  • iPhone X

  • iPhone 8

  • iPhone SE

  • iPhone 4s

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:

Storyboard preview
Storyboard preview

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:

Preview device options
Preview device 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):

Xcode device sizes preview
Xcode device sizes preview

Evidently, users who have a device other than iPhone 8, will not be pleased with the appearance of our app. :'(

Orientations

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:

Xcode orientation panel
Xcode orientation panel

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):

Landscape preview
Landscape preview

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

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):

Safe area
Safe area

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:

Xcode preview - adaptation
Xcode preview - adaptation 

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.

Indeed!
Indeed!

Let's roll up our sleeves! :zorro:

Let's Recap!

  • 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

    • Programmatically

Example of certificate of achievement
Example of certificate of achievement