How to hide tab bar when dragging like Safari app?

Question

I want to know how to implement an animation which hiding the tab bar when dragging downward, like Safari app on iOS 7. Any information from you will be appreciated.

Similar question: Show/hide UIToolbar, "match finger movement", precisely as in for example iOS7 Safari.

Answer 1

Something like this should work. I don't know if this gives exactly the same look as the Safari app, but it's close:

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (nonatomic) CGRect originalFrame;
@end

@implementation ViewController

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width, 1000);
    self.originalFrame = self.tabBarController.tabBar.frame;
}


-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
    UITabBar *tb = self.tabBarController.tabBar;
    NSInteger yOffset = scrollView.contentOffset.y;
    if (yOffset > 0) {
        tb.frame = CGRectMake(tb.frame.origin.x, self.originalFrame.origin.y + yOffset, tb.frame.size.width, tb.frame.size.height);
    }
   if (yOffset < 1) tb.frame = self.originalFrame;
}

Answer 2

You can use a variable to keep the lastContentOffset value. The key idea is tab bar origin.y is ranging between CGRectGetMaxY(screenRect) and CGRectGetMaxY(screenRect) - CGRectGetHeight(tabBarRect).

It works well in my project.

@interface ViewController ()
    @property (nonatomic, assign) CGFloat lastContentOffsetY;
@end

@implementation ViewController
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (!self.tabBarController) {
      return;
    }

  BOOL isStatusBarHidden = [UIApplication sharedApplication].isStatusBarHidden;
  CGFloat kStatusBarHeight = [UIApplication sharedApplication].statusBarFrame.size.height;

if (scrollView.contentOffset.y > (scrollView.contentSize.height - scrollView.frame.size.height)
    || (scrollView.contentOffset.y < (isStatsuBarHidden ? 0 : -kStatusBarHeight))) {
    // bottom & top bouncing - don't need to update
    return;
}

CGFloat offset = scrollView.contentOffset.y - self.lastContentOffsetY;
CGRect tabBarRect = self.tabBarController.tabBar.frame;
CGRect screenRect = [UIScreen mainScreen].bounds;

if (CGRectGetMaxY(tabBarRect) == CGRectGetMaxY(screenRect) + CGRectGetHeight(tabBarRect)) {
    //view could only scroll downward
    if (offset < 0) {
        tabBarRect.origin.y += offset;
    }
} else if (CGRectGetMaxY(tabBarRect) == CGRectGetMaxY(screenRect)) {
    //view could only scroll upward
    if (offset > 0) {
        tabBarRect.origin.y += offset;
    }
} else {
    //view could scroll upward & downward
    tabBarRect.origin.y += offset;
}

//safty reset handling
if (CGRectGetMaxY(tabBarRect) > CGRectGetMaxY(screenRect) + CGRectGetHeight(tabBarRect)) {
    tabBarRect.origin.y = CGRectGetMaxY(screenRect);
} else if (CGRectGetMaxY(tabBarRect) < CGRectGetMaxY(screenRect)) {
    tabBarRect.origin.y = CGRectGetMaxY(screenRect) - CGRectGetHeight(tabBarRect); // over bouncing, set it back
}

self.tabBarController.tabBar.frame = tabBarRect;
self.lastContentOffsetY = scrollView.contentOffset.y;
}