How to implement hiding the UITabBar to display an UIToolbar on iOS 11 and iPhone X

Question

I'm trying to do an UI similar to the Photos app, where when you enter in a selection mode that hides the tab bar to display a toolbar.

I have my view controller in a UINavigationController and the navigation controller in a UITabBarController.

I had other strategies before but I'm struggling to get this working on the iPhone X and its bottom safe margins.

did you try these links 1. https://stackoverflow.com/questions/20935228/how-to-hide-tab-bar-with-animation-in-ios 2. https://stackoverflow.com/questions/2257178/how-to-hide-uitabbarcontroller-programmatically 3. https://stackoverflow.com/questions/5543582/ios-how-to-hide-show-uitabbarcontrollers-tab-bar-with-animation 4. https://stackoverflow.com/questions/27008737/how-do-i-hide-show-tabbar-when-tapped-using-swift-in-ios8 — Gagan_iOS, Sep 28 '17 at 17:14
@Gagan_iOS They don't address how UITabBarController changes the safe area on iOS 11. — Marco Pompei, Sep 28 '17 at 17:44

score 0 · Answer 1 · answered Oct 10 '17 at 20:59

If I'm making the correct assumptions based on your description of the Photos App, I think you may be confused as to what the app is doing behind the scenes when going from Photos App TabBar to Photos App Toolbar.

These are two different ViewControllers, the second only shows the toolbar and sets hidesBottomBarWhenPushed = true in the init. You can use the NavigationController's supplied toolbar by setting the setToolbarItems(toolbarItems: [UIBarButtonItem]?, animated: Bool) in your second ViewController. This properly sizes the toolbar in the view to account for the bottom control on the iPhoneX.

If you must manage toolbar and TabBar visibility in the same ViewController, based on my testing, you'll need to add/manage the toolbar manually within a UIView container to get the proper size on all devices. So the view hierarchy would be ViewController.view -> toolbarContainer View -> Toolbar.

This is the mode I mean: https://imgur.com/a/DA5Ip. I ended up figuring it out with Apple's Code-Level Support, it isn't simply adding as a subview. I'll post here later. — Marco Pompei, Oct 11 '17 at 17:46
@MarcoPompei So what is the solution you figured out with Apple Support? — Micky, Jun 16 '22 at 09:07

score 0 · Answer 2 · answered Mar 20 '18 at 04:43

for iPhone X, the tab bar height is different than iPhone 8, you need to track

static CGFloat tabBarMaxHeight = 0;

- (void)setToolbarHidden:(BOOL)hidden {
    [self.navigationController setToolbarHidden:hidden animated:NO];
    CGRect frame = self.tabBarController.tabBar.frame;
    tabBarMaxHeight = MAX(tabBarMaxHeight, CGRectGetHeight(frame));
    frame.size.height = hidden ? tabBarMaxHeight : 0;
    self.tabBarController.tabBar.frame = frame;
    self.tabBarController.tabBar.hidden = !hidden;

    //! reset tab bar item title to prevent text style compacted
    for (UITabBarItem *obj in self.tabBarController.tabBar.items) {
         NSString *title = obj.title;
         obj.title = @"";
         obj.title = title;
    }
 }

How to implement hiding the UITabBar to display an UIToolbar on iOS 11 and iPhone X

2 Answers2