Have button in UIToolbar cover full height below iPhone X Home Indicator

Question

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:

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

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:

Answer 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

Answer 2

您必须通过为每个按钮设置“高度限制”并根据设备状况增加/减少约束来应对各种限制。

Answer 3

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.