IOS Tab Bar height issue on iPhone X

Question

I have tried many solutions including This Solution. So Please read full question before flagging it as duplicate. For iPhone X I have use Safe Area guide to support iPhone X design. Everything is fine except for Tab Bar I have double check on its safe area constraints but still after running it's items got scattered.

But please not that on height of tab bar is constant and correct only items in it are disturb.

Here is image of my story board please not its constraints and its adjustment.

As per my knowledge everything is everything is right... but for sure I am missing something, please check and any suggestion will be a great help. But please not I have tried almost every way which is mentioned on stack or first few links of google.

Here is my code which I am using to populate items' images.

UIColor *color = [UIColor colorWithRed:192.0f/255.0f green:41.0f/255.0f blue:66.0f/255.0f alpha:1.0f];

NSDictionary *textColors = [NSDictionary dictionaryWithObjectsAndKeys:color, NSForegroundColorAttributeName, nil];

for(UITabBarItem *tab in self.tabBar.items)
{
    [tab setTitleTextAttributes:textColors forState:UIControlStateNormal];
    [tab setTitleTextAttributes:textColors forState:UIControlStateSelected];
}
self.tabBar.itemPositioning = UITabBarItemPositioningAutomatic;

[self.tabBar.items[0] setImage:[[UIImage imageNamed:@"search_icon"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[self.tabBar.items[1] setImage:[[UIImage imageNamed:@"user_icon"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[self.tabBar.items[2] setImage:[[UIImage imageNamed:@"call_icon"]
    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[self.tabBar.items[3] setImage:[[UIImage imageNamed:@"services_icon"]
    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

score 1 · Accepted Answer · answered Feb 01 '18 at 13:05

at first I tried almost every possible solution but that didn't work at all, but then at the end somehow I added some negative margin with bottom. Let's say "-1" and then everything started working like charm. I also tried setting positive margin just for experiment. But that didn't work, I concluded only negative number works. This must be an issue in UIKit. Set bottom constraint with safe area as any negative number will solve this issue.

check its bottom constraint.

score 0 · Answer 2 · answered Feb 01 '18 at 12:02

0

Try using the method recommended in the documentation to set the items.

To configure tab bar items directly, use the setItems:animated: method of the tab bar itself.

- (void)setItems:(NSArray<UITabBarItem *> *)items animated:(BOOL)animated;

Do something like this.

UIIImage *image0 = [UIImage imageNamed:@"search_icon"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UITabBarItem *item0 = [[UITabBarItem alloc] initWithTitle:self.tabBar.items[0].title image:image0 tag:0];
// And so on or in a loop
NSArray<UITabBarItem *> *items = @[ item0, ]; // Add all items here
[self.tabBar setItems:items animated:NO];

Read more here

https://developer.apple.com/documentation/uikit/uitabbar?language=objc

answered Feb 01 '18 at 12:02

LGP

4,135
1
22
34

Strange. Does it work if configured through Storyboard only? – LGP Feb 01 '18 at 12:42
Can you try uncheck `Safe area relative margins` for the tabBar? If that doesn't work, try also to uncheck `Preserve superviews margins`. – LGP Feb 01 '18 at 12:49
sure ..let me do that – Najam Feb 01 '18 at 12:53
2

dude you won't believe what works for me ..... I set bottom constraint as -1 for safe Area and it works ..... I also tried +1,0 but it didn't only -1 and onward any number in negative works fine – Najam Feb 01 '18 at 12:57

Serhii Stakhiv · Answer 3 · 2018-08-27T16:15:15.937

0

Just put your UITabBar inside a UIView!

This is working for me.

edited Aug 27 '18 at 16:15

answered Aug 27 '18 at 09:47

Serhii Stakhiv

936
7
11

Gaurav Sharma · Answer 4 · 2019-08-31T04:23:28.937

This will definitely work.

override func viewDidLoad() { super.viewDidLoad()

    let numberOfItems = CGFloat(tabBArView.items!.count)
    let tabBarItemSize = CGSize(width: tabBArView.frame.width / numberOfItems, height: 48)

     tabBArView.selectionIndicatorImage =  UIImage.imageWithColor(color: UIColor.orange, size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)
    tabBArView.frame.size.width = self.view.frame.width + 4
    tabBArView.frame.origin.x = -2

extension UIImage {

class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
    let rect: CGRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return image
}

IOS Tab Bar height issue on iPhone X

4 Answers4