read

iPhone X introduced The Notch, The Home Indicator, Safe Area, and a different resolution form factor..

UI design is much affected.

This post is a guide walking through various aspect and how it affects development.

Let’s start with the biggest change in the phone.

The Notch

I like maxrudberg’s mentality towards The Notch:

Eventually, they will get rid of the notch. It could be 2, 5, or even 10 years, but it’s a stop gap, not a permanent design solution. In the meantime, treat it like the elephant in the room. We all know it’s there, but for the most part, you should design as if it’s not.

Apple’s Music app and etc uses Card style, and that is against their guideline towards the top notch space.

So, don’t always follow guidelines.

The Home Indicator

Unlike The Notch, the home indicator is a software element. It is a UI on the screen, at the bottom.

To allow auto hide (after user not touching screen) for a view controller:

override func prefersHomeIndicatorAutoHidden() -> Bool {
    return true
}

But note the comment in the doc:

The system takes your preference into account, but returning YES is not a guarantee that an indicator will be hidden.

Nav bar

iOS automatically fills a nav bar background for the extra space at the top.

Use black and it blends with the Notch.

Use transparent and extend your content view beyond.

Status Bar when you have Nav Bar

There is an undocumented behaviour:

If you want to hide the status bar on iPhone X, you should also hide the navigation bar, otherwise you should leave both visible. This is the behavior that UINavigationController implements.

If you implemented prefersStatusBarHidden or childViewControllerForStatusBarHidden, they will NOT work as intended, if you have the navigation bar shown.

Status bar will always be shown, if navigation bar is shown.

You may only control the color of the status bar.

This method is weird, but yes it works.

This extension to UINavigationController is the cleanest solution (another alternative is subclass it).

extension UINavigationController {
    override open var childViewControllerForStatusBarStyle: UIViewController? {
        return self.topViewController
    }
}

Table View

UITableView should still layout edge to edge (NOT to safe area).

Instead, the content inset should be mark safe via insetsContentViewsToSafeArea (new in iOS 11).

if #available(iOS 11.0, *) {
    tableView.insetsContentViewsToSafeArea = true
}

Scroll View

contentInsetAdjustmentBehavior provides more control on how safe area modifies the content inset.

Search Controller

iOS seems to be not adjusting correctly for search controller. Fixed with:

tableView.contentInsetAdjustmentBehavior = .never

Search controller is a difficult topic, and with iPhone X the recommended way is to set the search bar in the nav bar.

Storyboard

If you use storyboard, in File Inspector, check Use Safe Area Layout Guides, and interface builder will replace the old top bottom layout guides with the new safe area.

After which, it is up to you to make changes depending on your UI.

Some pointers:

• For table view, don’t Clip to Bounds (under Attributes Inspector)
• For cutom bottom tool bar, you can provide a background for the void occupied by Home Indicator

There are more guides. Apple official guide, and many more. Designcode.io summed up well, with many valuable resources for design. Sketch file & device mockups.