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
1#
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]
view.addSubview(toolbar)

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
2#
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

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