Custom UIToolbar too close to the home indicator on iPhone X












3















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
Buttons are too close to the home indicator



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



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.










share|improve this question























  • Answered here

    – Jack
    Jan 15 '18 at 5:00













  • How did you resolve this issue? can you help ?

    – Shah
    Jul 17 '18 at 8:49











  • @Shah Instead of using UIToolbar, I ended up creating my own UIView with a horizontal stack view.

    – nambatee
    Jul 17 '18 at 12:59











  • Got it. Thanks a bunch

    – Shah
    Jul 18 '18 at 1:53
















3















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
Buttons are too close to the home indicator



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



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.










share|improve this question























  • Answered here

    – Jack
    Jan 15 '18 at 5:00













  • How did you resolve this issue? can you help ?

    – Shah
    Jul 17 '18 at 8:49











  • @Shah Instead of using UIToolbar, I ended up creating my own UIView with a horizontal stack view.

    – nambatee
    Jul 17 '18 at 12:59











  • Got it. Thanks a bunch

    – Shah
    Jul 18 '18 at 1:53














3












3








3


1






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
Buttons are too close to the home indicator



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



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.










share|improve this question














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
Buttons are too close to the home indicator



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



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.







ios swift iphone-x






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Jan 13 '18 at 2:19









nambateenambatee

366614




366614













  • Answered here

    – Jack
    Jan 15 '18 at 5:00













  • How did you resolve this issue? can you help ?

    – Shah
    Jul 17 '18 at 8:49











  • @Shah Instead of using UIToolbar, I ended up creating my own UIView with a horizontal stack view.

    – nambatee
    Jul 17 '18 at 12:59











  • Got it. Thanks a bunch

    – Shah
    Jul 18 '18 at 1:53



















  • Answered here

    – Jack
    Jan 15 '18 at 5:00













  • How did you resolve this issue? can you help ?

    – Shah
    Jul 17 '18 at 8:49











  • @Shah Instead of using UIToolbar, I ended up creating my own UIView with a horizontal stack view.

    – nambatee
    Jul 17 '18 at 12:59











  • Got it. Thanks a bunch

    – Shah
    Jul 18 '18 at 1:53

















Answered here

– Jack
Jan 15 '18 at 5:00







Answered here

– Jack
Jan 15 '18 at 5:00















How did you resolve this issue? can you help ?

– Shah
Jul 17 '18 at 8:49





How did you resolve this issue? can you help ?

– Shah
Jul 17 '18 at 8:49













@Shah Instead of using UIToolbar, I ended up creating my own UIView with a horizontal stack view.

– nambatee
Jul 17 '18 at 12:59





@Shah Instead of using UIToolbar, I ended up creating my own UIView with a horizontal stack view.

– nambatee
Jul 17 '18 at 12:59













Got it. Thanks a bunch

– Shah
Jul 18 '18 at 1:53





Got it. Thanks a bunch

– Shah
Jul 18 '18 at 1:53












3 Answers
3






active

oldest

votes


















2














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






share|improve this answer


























  • I am hiding the tab bar and showing the toolbar when the user clicks a button. Just like what the Photos app does when you click on "Select". If I constrain the toolbar to the safe area, its bottom will be aligned with the top of the hidden tab bar (which means that there will be a gap of the size of the tab bar, between the toolbar and the bottom of the view).

    – nambatee
    Jan 14 '18 at 4:41











  • The user wants to extend the height of the toolbar while aligning content at the top of the bar. This answer offsets the entire bar up away from the safe area. While this is helpful for other scenarios, this is explicitly the outcome the user did not want.

    – Scott Ahten
    Apr 3 '18 at 20:10



















1














I ran into this problem also. My solution was to use a generic UIView to account for the bottom safeAreaInset and then add the toolbar as a subview of that view.



private func addToolbar(_ toolbar: UIToolbar, toView view: UIView) {
toolbar.frame = CGRect(x: 0,
y: 0,
width: view.frame.size.width,
height: 0)
toolbar.sizeToFit() // This sets the standard height for the toolbar.

// Create a view to contain the toolbar:
let toolbarParent = UIView()
toolbarParent.frame = CGRect(x: 0,
y: view.frame.size.height - toolbar.frame.size.height,
width: toolbar.frame.size.width,
height: toolbar.frame.size.height)

// Adjust the position and height of the toolbar's parent view to account for safe area:
if #available(iOS 11, *) {
toolbarParent.frame.origin.y -= view.safeAreaInsets.bottom
toolbarParent.frame.size.height += view.safeAreaInsets.bottom
}

toolbarParent.addSubview(toolbar)
view.addSubview(toolbarParent)
}





share|improve this answer

































    1














    You shouldn't need to set an explicit height or size to get this to work, simply take advantage of the layoutMarginsGuide and the UIBarPositioningDelegate protocol, which is adopted by UIToolbarDelegate.
    First, layout your toolbar so that it's pinned to the bottom of the view's layoutMarginsGuide.



    let constraints = [
    toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    toolbar.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor)
    ]
    NSLayoutConstraint.activate(constraints)


    This will get the toolbar aligned to the safe area on iOS 11+ devices, but you'll need to do one last thing to get the toolbar to extend its background all the way to the bottom of the view. To get that simply conform to UIToolbarDelegate in your class, set yourself as the toolbar's delegate, implement the function position(for: UIBarPositioning) -> UIBarPosition, and return the value .bottom.
    The default value for UIToolbar's barPosition is bottom, so this last step may not be necessary in most use cases.
    After doing this, you should see your toolbar lay out its items relative to the safe area while extending the background all the way to the bottom of the view, just like you see in Mail and Safari.



    The beauty of using layoutMarginsGuide over safeAreaLayoutGuide in this case is that the layoutMarginsGuide insets the layout margins by the safe area by default. Because you don't directly refer to the safe area, your code is backwards compatible all the way to iOS 9 without having to use availability checks.






    share|improve this answer

























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48236375%2fcustom-uitoolbar-too-close-to-the-home-indicator-on-iphone-x%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      2














      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






      share|improve this answer


























      • I am hiding the tab bar and showing the toolbar when the user clicks a button. Just like what the Photos app does when you click on "Select". If I constrain the toolbar to the safe area, its bottom will be aligned with the top of the hidden tab bar (which means that there will be a gap of the size of the tab bar, between the toolbar and the bottom of the view).

        – nambatee
        Jan 14 '18 at 4:41











      • The user wants to extend the height of the toolbar while aligning content at the top of the bar. This answer offsets the entire bar up away from the safe area. While this is helpful for other scenarios, this is explicitly the outcome the user did not want.

        – Scott Ahten
        Apr 3 '18 at 20:10
















      2














      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






      share|improve this answer


























      • I am hiding the tab bar and showing the toolbar when the user clicks a button. Just like what the Photos app does when you click on "Select". If I constrain the toolbar to the safe area, its bottom will be aligned with the top of the hidden tab bar (which means that there will be a gap of the size of the tab bar, between the toolbar and the bottom of the view).

        – nambatee
        Jan 14 '18 at 4:41











      • The user wants to extend the height of the toolbar while aligning content at the top of the bar. This answer offsets the entire bar up away from the safe area. While this is helpful for other scenarios, this is explicitly the outcome the user did not want.

        – Scott Ahten
        Apr 3 '18 at 20:10














      2












      2








      2







      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






      share|improve this answer















      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







      share|improve this answer














      share|improve this answer



      share|improve this answer








      edited Jan 13 '18 at 3:41

























      answered Jan 13 '18 at 2:51









      Vinoth VinoVinoth Vino

      2,99332536




      2,99332536













      • I am hiding the tab bar and showing the toolbar when the user clicks a button. Just like what the Photos app does when you click on "Select". If I constrain the toolbar to the safe area, its bottom will be aligned with the top of the hidden tab bar (which means that there will be a gap of the size of the tab bar, between the toolbar and the bottom of the view).

        – nambatee
        Jan 14 '18 at 4:41











      • The user wants to extend the height of the toolbar while aligning content at the top of the bar. This answer offsets the entire bar up away from the safe area. While this is helpful for other scenarios, this is explicitly the outcome the user did not want.

        – Scott Ahten
        Apr 3 '18 at 20:10



















      • I am hiding the tab bar and showing the toolbar when the user clicks a button. Just like what the Photos app does when you click on "Select". If I constrain the toolbar to the safe area, its bottom will be aligned with the top of the hidden tab bar (which means that there will be a gap of the size of the tab bar, between the toolbar and the bottom of the view).

        – nambatee
        Jan 14 '18 at 4:41











      • The user wants to extend the height of the toolbar while aligning content at the top of the bar. This answer offsets the entire bar up away from the safe area. While this is helpful for other scenarios, this is explicitly the outcome the user did not want.

        – Scott Ahten
        Apr 3 '18 at 20:10

















      I am hiding the tab bar and showing the toolbar when the user clicks a button. Just like what the Photos app does when you click on "Select". If I constrain the toolbar to the safe area, its bottom will be aligned with the top of the hidden tab bar (which means that there will be a gap of the size of the tab bar, between the toolbar and the bottom of the view).

      – nambatee
      Jan 14 '18 at 4:41





      I am hiding the tab bar and showing the toolbar when the user clicks a button. Just like what the Photos app does when you click on "Select". If I constrain the toolbar to the safe area, its bottom will be aligned with the top of the hidden tab bar (which means that there will be a gap of the size of the tab bar, between the toolbar and the bottom of the view).

      – nambatee
      Jan 14 '18 at 4:41













      The user wants to extend the height of the toolbar while aligning content at the top of the bar. This answer offsets the entire bar up away from the safe area. While this is helpful for other scenarios, this is explicitly the outcome the user did not want.

      – Scott Ahten
      Apr 3 '18 at 20:10





      The user wants to extend the height of the toolbar while aligning content at the top of the bar. This answer offsets the entire bar up away from the safe area. While this is helpful for other scenarios, this is explicitly the outcome the user did not want.

      – Scott Ahten
      Apr 3 '18 at 20:10













      1














      I ran into this problem also. My solution was to use a generic UIView to account for the bottom safeAreaInset and then add the toolbar as a subview of that view.



      private func addToolbar(_ toolbar: UIToolbar, toView view: UIView) {
      toolbar.frame = CGRect(x: 0,
      y: 0,
      width: view.frame.size.width,
      height: 0)
      toolbar.sizeToFit() // This sets the standard height for the toolbar.

      // Create a view to contain the toolbar:
      let toolbarParent = UIView()
      toolbarParent.frame = CGRect(x: 0,
      y: view.frame.size.height - toolbar.frame.size.height,
      width: toolbar.frame.size.width,
      height: toolbar.frame.size.height)

      // Adjust the position and height of the toolbar's parent view to account for safe area:
      if #available(iOS 11, *) {
      toolbarParent.frame.origin.y -= view.safeAreaInsets.bottom
      toolbarParent.frame.size.height += view.safeAreaInsets.bottom
      }

      toolbarParent.addSubview(toolbar)
      view.addSubview(toolbarParent)
      }





      share|improve this answer






























        1














        I ran into this problem also. My solution was to use a generic UIView to account for the bottom safeAreaInset and then add the toolbar as a subview of that view.



        private func addToolbar(_ toolbar: UIToolbar, toView view: UIView) {
        toolbar.frame = CGRect(x: 0,
        y: 0,
        width: view.frame.size.width,
        height: 0)
        toolbar.sizeToFit() // This sets the standard height for the toolbar.

        // Create a view to contain the toolbar:
        let toolbarParent = UIView()
        toolbarParent.frame = CGRect(x: 0,
        y: view.frame.size.height - toolbar.frame.size.height,
        width: toolbar.frame.size.width,
        height: toolbar.frame.size.height)

        // Adjust the position and height of the toolbar's parent view to account for safe area:
        if #available(iOS 11, *) {
        toolbarParent.frame.origin.y -= view.safeAreaInsets.bottom
        toolbarParent.frame.size.height += view.safeAreaInsets.bottom
        }

        toolbarParent.addSubview(toolbar)
        view.addSubview(toolbarParent)
        }





        share|improve this answer




























          1












          1








          1







          I ran into this problem also. My solution was to use a generic UIView to account for the bottom safeAreaInset and then add the toolbar as a subview of that view.



          private func addToolbar(_ toolbar: UIToolbar, toView view: UIView) {
          toolbar.frame = CGRect(x: 0,
          y: 0,
          width: view.frame.size.width,
          height: 0)
          toolbar.sizeToFit() // This sets the standard height for the toolbar.

          // Create a view to contain the toolbar:
          let toolbarParent = UIView()
          toolbarParent.frame = CGRect(x: 0,
          y: view.frame.size.height - toolbar.frame.size.height,
          width: toolbar.frame.size.width,
          height: toolbar.frame.size.height)

          // Adjust the position and height of the toolbar's parent view to account for safe area:
          if #available(iOS 11, *) {
          toolbarParent.frame.origin.y -= view.safeAreaInsets.bottom
          toolbarParent.frame.size.height += view.safeAreaInsets.bottom
          }

          toolbarParent.addSubview(toolbar)
          view.addSubview(toolbarParent)
          }





          share|improve this answer















          I ran into this problem also. My solution was to use a generic UIView to account for the bottom safeAreaInset and then add the toolbar as a subview of that view.



          private func addToolbar(_ toolbar: UIToolbar, toView view: UIView) {
          toolbar.frame = CGRect(x: 0,
          y: 0,
          width: view.frame.size.width,
          height: 0)
          toolbar.sizeToFit() // This sets the standard height for the toolbar.

          // Create a view to contain the toolbar:
          let toolbarParent = UIView()
          toolbarParent.frame = CGRect(x: 0,
          y: view.frame.size.height - toolbar.frame.size.height,
          width: toolbar.frame.size.width,
          height: toolbar.frame.size.height)

          // Adjust the position and height of the toolbar's parent view to account for safe area:
          if #available(iOS 11, *) {
          toolbarParent.frame.origin.y -= view.safeAreaInsets.bottom
          toolbarParent.frame.size.height += view.safeAreaInsets.bottom
          }

          toolbarParent.addSubview(toolbar)
          view.addSubview(toolbarParent)
          }






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Sep 14 '18 at 21:58

























          answered May 30 '18 at 1:41









          Alan KinnamanAlan Kinnaman

          454514




          454514























              1














              You shouldn't need to set an explicit height or size to get this to work, simply take advantage of the layoutMarginsGuide and the UIBarPositioningDelegate protocol, which is adopted by UIToolbarDelegate.
              First, layout your toolbar so that it's pinned to the bottom of the view's layoutMarginsGuide.



              let constraints = [
              toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
              toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
              toolbar.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor)
              ]
              NSLayoutConstraint.activate(constraints)


              This will get the toolbar aligned to the safe area on iOS 11+ devices, but you'll need to do one last thing to get the toolbar to extend its background all the way to the bottom of the view. To get that simply conform to UIToolbarDelegate in your class, set yourself as the toolbar's delegate, implement the function position(for: UIBarPositioning) -> UIBarPosition, and return the value .bottom.
              The default value for UIToolbar's barPosition is bottom, so this last step may not be necessary in most use cases.
              After doing this, you should see your toolbar lay out its items relative to the safe area while extending the background all the way to the bottom of the view, just like you see in Mail and Safari.



              The beauty of using layoutMarginsGuide over safeAreaLayoutGuide in this case is that the layoutMarginsGuide insets the layout margins by the safe area by default. Because you don't directly refer to the safe area, your code is backwards compatible all the way to iOS 9 without having to use availability checks.






              share|improve this answer






























                1














                You shouldn't need to set an explicit height or size to get this to work, simply take advantage of the layoutMarginsGuide and the UIBarPositioningDelegate protocol, which is adopted by UIToolbarDelegate.
                First, layout your toolbar so that it's pinned to the bottom of the view's layoutMarginsGuide.



                let constraints = [
                toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
                toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
                toolbar.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor)
                ]
                NSLayoutConstraint.activate(constraints)


                This will get the toolbar aligned to the safe area on iOS 11+ devices, but you'll need to do one last thing to get the toolbar to extend its background all the way to the bottom of the view. To get that simply conform to UIToolbarDelegate in your class, set yourself as the toolbar's delegate, implement the function position(for: UIBarPositioning) -> UIBarPosition, and return the value .bottom.
                The default value for UIToolbar's barPosition is bottom, so this last step may not be necessary in most use cases.
                After doing this, you should see your toolbar lay out its items relative to the safe area while extending the background all the way to the bottom of the view, just like you see in Mail and Safari.



                The beauty of using layoutMarginsGuide over safeAreaLayoutGuide in this case is that the layoutMarginsGuide insets the layout margins by the safe area by default. Because you don't directly refer to the safe area, your code is backwards compatible all the way to iOS 9 without having to use availability checks.






                share|improve this answer




























                  1












                  1








                  1







                  You shouldn't need to set an explicit height or size to get this to work, simply take advantage of the layoutMarginsGuide and the UIBarPositioningDelegate protocol, which is adopted by UIToolbarDelegate.
                  First, layout your toolbar so that it's pinned to the bottom of the view's layoutMarginsGuide.



                  let constraints = [
                  toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
                  toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
                  toolbar.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor)
                  ]
                  NSLayoutConstraint.activate(constraints)


                  This will get the toolbar aligned to the safe area on iOS 11+ devices, but you'll need to do one last thing to get the toolbar to extend its background all the way to the bottom of the view. To get that simply conform to UIToolbarDelegate in your class, set yourself as the toolbar's delegate, implement the function position(for: UIBarPositioning) -> UIBarPosition, and return the value .bottom.
                  The default value for UIToolbar's barPosition is bottom, so this last step may not be necessary in most use cases.
                  After doing this, you should see your toolbar lay out its items relative to the safe area while extending the background all the way to the bottom of the view, just like you see in Mail and Safari.



                  The beauty of using layoutMarginsGuide over safeAreaLayoutGuide in this case is that the layoutMarginsGuide insets the layout margins by the safe area by default. Because you don't directly refer to the safe area, your code is backwards compatible all the way to iOS 9 without having to use availability checks.






                  share|improve this answer















                  You shouldn't need to set an explicit height or size to get this to work, simply take advantage of the layoutMarginsGuide and the UIBarPositioningDelegate protocol, which is adopted by UIToolbarDelegate.
                  First, layout your toolbar so that it's pinned to the bottom of the view's layoutMarginsGuide.



                  let constraints = [
                  toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
                  toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
                  toolbar.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor)
                  ]
                  NSLayoutConstraint.activate(constraints)


                  This will get the toolbar aligned to the safe area on iOS 11+ devices, but you'll need to do one last thing to get the toolbar to extend its background all the way to the bottom of the view. To get that simply conform to UIToolbarDelegate in your class, set yourself as the toolbar's delegate, implement the function position(for: UIBarPositioning) -> UIBarPosition, and return the value .bottom.
                  The default value for UIToolbar's barPosition is bottom, so this last step may not be necessary in most use cases.
                  After doing this, you should see your toolbar lay out its items relative to the safe area while extending the background all the way to the bottom of the view, just like you see in Mail and Safari.



                  The beauty of using layoutMarginsGuide over safeAreaLayoutGuide in this case is that the layoutMarginsGuide insets the layout margins by the safe area by default. Because you don't directly refer to the safe area, your code is backwards compatible all the way to iOS 9 without having to use availability checks.







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 13 '18 at 19:00

























                  answered Nov 13 '18 at 17:51









                  MattMatt

                  112




                  112






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48236375%2fcustom-uitoolbar-too-close-to-the-home-indicator-on-iphone-x%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Bressuire

                      Vorschmack

                      Quarantine