3

I have a UIToolbar at the bottom of the screen that contains three buttons, all with different background colors. I use Auto Layout and constrained the toolbar to the bottom layout guide (I have to support iOS 8, so no Safe Area Layout Guides) so that the toolbar shows correctly above the iPhone X Home Indicator.

My problem is that I want the buttons to cover the full height of the toolbar and draw below the Home Indicator. I currently have this:

Current

Note the white space below the Home Indicator.

I'd like that space to be covered by the button background color (labels ,of course, have to remain above the Home Indicator):

Ideal

I have to support devices all the way down to iOS 8, landscape and portrait mode.

Edit:

When I constrain the toolbar to the bottom of the superview, it sits too low and the buttons are covered by the Home Indicator:

Aligned to bottom

Mark
  • 6,647
  • 1
  • 45
  • 88
  • You can probably use the same approach as seen here: https://stackoverflow.com/a/56171264/6257435 – DonMag May 20 '19 at 14:22
  • Yes, that will work, thank! If you post the link as answer I'll accept it (I can't mark it as duplicate). – Mark May 21 '19 at 14:26
  • Are you using an actual `UIToolBar`? Or do you just need the 3 buttons along the bottom of the view? – DonMag May 21 '19 at 15:14
  • I'm using an actual `UIToolbar`. I was able to figure out a workaround by using plain `UIView`s, but ideally I'd like to use a UIToolbar. – Mark May 22 '19 at 05:54

3 Answers3

1

If you are using auto layout then you need to add the bottom constraint to superview not safe area then it should work.

If you are using frames then probably you can tweak height a little bit to get the desired result.

Edit:

And if you want to support devices below iOS 11 you probably can use the below hack to check the device type and give tab bar height accordingly, but you will have to give constraints in code.

if #available(iOS 11.0, *) {
    if UIApplication.shared.windows[0].safeAreaInsets.bottom > 0{
        //The device is a notch device and you need to give extra height to accommodate the bottom button and tab (Make sure your labels are attached to the top so they are properly placed over the bottom line)
    }else{
        //The device is not a notch device and is iPhone 8 or less so you can have regular tab bar height
    }
} else {
    //You probably do not have to worry about increased tab bar height and you can give regular tab bar height
}

This might not be the best solution but you will be able to tackle your current problem for now. Hope this helps

nishith Singh
  • 2,968
  • 1
  • 15
  • 25
  • Thanks for your suggestion. If I constrain to the superview.bottom, the Home Indicator sits above the buttons. I think constraining to the bottom layout guide (no safe area in iOS 8), is the right way. I only need to figure out how to expand the buttons. – Mark May 17 '19 at 11:21
  • @Mark I have updated my answer. you can try it out and check if it works for you – nishith Singh May 17 '19 at 12:31
  • Thanks for the update. Re "device is a notch device and you need to give extra height": the height of the UIToolbar is managed by the system. I'd like to find a way for the toolbar items to stretch vertically across the full height of the toolbar. – Mark May 17 '19 at 13:55
0

You have to play with constraints by setting Height Constraint to each buttons and increase / decrease based on device condition.

Bhavik Modi
  • 1,517
  • 14
  • 29
  • Thanks for your answer. The height of the buttons is already constrained to equal the height of the toolbar. The problem is that the toolbar has a content view that contains the buttons, which starts above the Home Indicator. The content view is smaller than the actual toolbar (which goes below the Home Indicator). – Mark May 17 '19 at 11:23
  • @Mark For that you have to set constraints to bottom with SuperView instead of safe area. – Bhavik Modi May 17 '19 at 11:26
0

I think this will work for you.

  1. You need to set your toolbar button constraint to safe area.
  2. Then you need one other view whice contain only three colored view without any text. and set following constraint for this view. -> Vertical space constraint to toolbar -> leading, trailing and bottom constraint to superview.

So, in Nouch devices this dummy view become expanded and in other device it's height get zero automatically.

No Device specific coding required.

Pravin
  • 51
  • 4