Custom UIToolbar too close to home indicator on iPhone X

Question

I have a custom UIToolbar that I show when the tab bar is hidden. The toolbar buttons are too close to the home indicator on the iPhone X:

 let toolbar = UIToolbar() let height = tabBarController?.tabBar.frame.height toolbar.frame = CGRect(x: 0, y: view.bounds.height - height, width: view.bounds.width, height: height) toolbar.autoresizingMask = [.flexibleWidth, .flexibleTopMargin] view.addSubview(toolbar) 

Buttons too close to home indicator

This is what I want it to look like (Mail app) ^

Since this is a custom view, I know that I can change the y position and move it to start at the bottom of the safe area, but I would rather move the buttons. I use a simple UIBarButtonItem with flexible space in between.

Answer 1

In iOS 11 Apple deprecates the top and bottom layout guides and is replaced by one safe area layout guide . Therefore, use the Safe Area Layout Guides to move the top view from the home indicator.

Using Storyboard:

• Go to Storyboard and in Interface Builder Document section
• Check Use Safe Area Layout Guides
• Then change the Bottom Constraint value relative to Safe Area

Now the views are aligned over the Home Indicator .

OR OK Coding

  toolbar.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ toolbar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor), toolbar.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor), toolbar.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor), toolbar.heightAnchor.constraint(equalToConstant: 50) ]) 

See this article for Positioning content in a relatively secure area.