Home Custom UIToolbar too close to the home indicator on iPhone X
Reply: 1

Custom UIToolbar too close to the home indicator on iPhone X

nambatee Published in 2018-01-13 02:19:16Z

I have a custom UIToolbar that I'm showing when the tab bar is hidden. The toolbar buttons are too close to the home indicator on 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]

Buttons are too close to the 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 safe area but I'd rather move the buttons. I'm using plain UIBarButtonItem with flexible space in between.

Vinoth Vino
Vinoth Vino Reply to 2018-01-13 03:41:59Z

In iOS 11, Apple is deprecating the top and bottom layout guides and being replaced with a single safe area layout guide. So use Safe Area Layout Guides to move the view above from the home indicator.

Using Storyboard :

  • Go to Storyboard and in the Interface Builder Document section
  • Tick the Use Safe Area Layout Guides check box
  • Then change the Bottom Constraint to be relative to the Safe Area

Now the views are aligned above the Home Indicator.

OR By way of Coding,

   toolbar.translatesAutoresizingMaskIntoConstraints = false

        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 Relative to the Safe Area

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.375101 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO