iOS- How to Hide/Show UITabBarController's tab bar with animation?

Question

I have a question about iOS's UITabBarController's tab bar.

I'm using a UITabBarController to display a few views, but as I want the views to be displayed with as large a screen as possible. Is it possible to hide the tab bar so that it normally doesn't show, until the user touches the screen, then the tab bar will (with animation) show up at the bottom. Then, after a few seconds, if nothing is done, then the tab bar will again go away, so that the view going back to be full screen again?

Borut Tomazin · Answer 1 · 2012-10-15T07:32:11.073

This is how you show it

- (void)showTabBar:(UITabBarController *)tabbarcontroller
{
    tabbarcontroller.tabBar.hidden = NO;
    [UIView animateWithDuration:kAnimationInterval animations:^{
        for (UIView *view in tabbarcontroller.view.subviews) {
            if ([view isKindOfClass:[UITabBar class]]) {
                [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y-49.f, view.frame.size.width, view.frame.size.height)];
            }
            else {
                [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, view.frame.size.height-49.f)];
            }
        }
    } completion:^(BOOL finished) {
        //do smth after animation finishes
    }];
}

... and this is how you hide it

- (void)hideTabBar:(UITabBarController *)tabbarcontroller
{
    [UIView animateWithDuration:kAnimationInterval animations:^{
        for (UIView *view in tabbarcontroller.view.subviews) {
            if ([view isKindOfClass:[UITabBar class]]) {
                [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y+49.f, view.frame.size.width, view.frame.size.height)];
            }
            else {
                [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, view.frame.size.height+49.f)];
            }
        }
    } completion:^(BOOL finished) {
        //do smth after animation finishes
        tabbarcontroller.tabBar.hidden = YES;
    }];
}

Thanks, this answer helped me. :) I also set the tab bar `hidden` property to `YES` in the completion block. It's useful for determining whether or not you need to show the tab bar when a view appears. — James, Oct 12 '12 at 12:40
Your original code was already very helpful, but since you decided to update it, for `-showTabBar:` the `hidden` property should be set to `NO` before the animation block (rather than in the completion block). Otherwise, the effect will look very strange. — James, Oct 13 '12 at 09:53

score 2 · Answer 2 · answered Sep 16 '14 at 15:23

With the accepted answer, on iOS 7 when you hide the tab bar and you show it again the size is wrong. This code gives a better result:

- (void) toggleTabBar: (UITabBar *)tabBar view: (UIView*) view {

    tabBar.hidden = NO;

    [UIView animateWithDuration:0.5 animations:^{
            if (hiddenTabBar) {
                tabBar.center = CGPointMake(tabBar.center.x, self.view.window.bounds.size.height-tabBar.bounds.size.height/2);
            }
            else {
                tabBar.center = CGPointMake(tabBar.center.x, self.view.window.bounds.size.height+tabBar.bounds.size.height);
            }

        } completion:^(BOOL finished) {
            hiddenTabBar = !hiddenTabBar;
            tabBar.hidden = hiddenTabBar;
        }];
}

score 1 · Answer 3 · answered Apr 04 '11 at 20:04

Don't think that will work on Apple's UIGuidelines. The views you're using are drawn above the the tab bar, so if you fade it away, nothing will be there.

You could possibly make a small view with buttons in place of the tab bar that does what you want.

iOS- How to Hide/Show UITabBarController's tab bar with animation?

3 Answers3

Linked

Related