CODEWITHSUNDEEP
iosuitoolbarios-autolayoutiphone-xsafearealayoutguide
Mark
Mark

Reputation: 6977

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

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

Upvotes: 3

Views: 1615

Answers (3)

nishith Singh
nishith Singh

Reputation: 2998

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

Upvotes: 1

Pravin
Pravin

Reputation: 51

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.

Upvotes: 0

Bhavik Modi
Bhavik Modi

Reputation: 1565

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

Upvotes: 0

Related Questions