iOS/Swift - Hide/Show UITabBarController when scrolling down/up

Related searches

I'm quite new to iOS development. Right now i'm trying to hide my tabbar when I scroll down and when scrolling up the tabbar should appear. I would like to have this animated in the same way like the navigation bar. For the navigation bar I simply clicked the option in the Attributes Inspector. I saw some examples for the toolbar, but I cant adopt it the tabbar.

self.tabBarController?.tabBar.hidden = true just hides my tabbar, but its not animated like the navigation controller.

This is code that i'm actually using in a production app.

It's in Swift and it also updates UITabBar.hidden var.

func scrollViewWillBeginDragging(scrollView: UIScrollView) {
    if scrollView.panGestureRecognizer.translation(in: scrollView).y < 0{
        changeTabBar(hidden: true, animated: true)
    }
    else{
        changeTabBar(hidden: false, animated: true)
    }
}

You can also use the other callback method:

func scrollViewDidScroll(scrollView: UIScrollView) {
    ...
}

but if you choose so, then you must handle multiple calls to the helper method that actually hides the tabBar.

And then you need to add this method that animates the hide/show of the tabBar.

func changeTabBar(hidden:Bool, animated: Bool){
    var tabBar = self.tabBarController?.tabBar
    if tabBar!.hidden == hidden{ return }
    let frame = tabBar?.frame
    let offset = (hidden ? (frame?.size.height)! : -(frame?.size.height)!)
    let duration:NSTimeInterval = (animated ? 0.5 : 0.0)
    tabBar?.hidden = false
    if frame != nil
    {
        UIView.animateWithDuration(duration,
            animations: {tabBar!.frame = CGRectOffset(frame!, 0, offset)},
            completion: {
                println($0)
                if $0 {tabBar?.hidden = hidden}
        })
    }
}

Update Swift 4

func changeTabBar(hidden:Bool, animated: Bool){
    guard let tabBar = self.tabBarController?.tabBar else { return; }
    if tabBar.isHidden == hidden{ return }
    let frame = tabBar.frame
    let offset = hidden ? frame.size.height : -frame.size.height
    let duration:TimeInterval = (animated ? 0.5 : 0.0)
    tabBar.isHidden = false

    UIView.animate(withDuration: duration, animations: {
        tabBar.frame = frame.offsetBy(dx: 0, dy: offset)
    }, completion: { (true) in
        tabBar.isHidden = hidden
    })
}

hide/show tabBar when scrolling � GitHub, I'm quite new to iOS development. Right now i'm trying to hide my tabbar when I scroll down and when scrolling up the tabbar should appear. I would like to� For some reason, that is beyond my imagination, there is no public API for hiding the UITabBar of a UITabBarController on iOS. Sure there’s the .hidesBottomBarWhenPushed. But I never get that to work the way I expect it to. And furthermore, it does not help when I want to hide the bar after a push, or at any arbitrary point in time. So I wrote up this little extension on UITabBarController

Building on Ariel's answer, I have updated the code for Swift3. This worked great on my collection views.

override func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if scrollView.panGestureRecognizer.translation(in: scrollView).y < 0 {
            changeTabBar(hidden: true, animated: true)
        }else{
            changeTabBar(hidden: false, animated: true)
        }

    }

func changeTabBar(hidden:Bool, animated: Bool){
        let tabBar = self.tabBarController?.tabBar
        if tabBar!.isHidden == hidden{ return }
        let frame = tabBar?.frame
        let offset = (hidden ? (frame?.size.height)! : -(frame?.size.height)!)
        let duration:TimeInterval = (animated ? 0.5 : 0.0)
        tabBar?.isHidden = false
        if frame != nil
        {
            UIView.animate(withDuration: duration,
                                       animations: {tabBar!.frame = frame!.offsetBy(dx: 0, dy: offset)},
                                       completion: {
                                        print($0)
                                        if $0 {tabBar?.isHidden = hidden}
            })
        }
    }

uiscrollview - iOS/Swift, hide/show tabBar when scrolling. ToggleTabBarOnScrolling.swift func toggleTabBar(hidden: Bool) {. if let tabBar = self.tabBarController?.tabBar completion: { animated in Sign in to comment or sign up to join this conversation on GitHub. A tab bar is often used to switch between different, but comparable view controllers. In the above example, the first tab represents the Home User Interface (UI). The next tab, a magnifying glass icon, enables the user to search in the app. Assuming that this app displays Instagram-like social media posts, the Search UI is used to search posts.

This answer is a slight modification to Ariel answer which adds animation while user scrolls.

extension ViewController:UIScrollViewDelegate{
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView.panGestureRecognizer.translation(in: scrollView).y < 0{
            //scrolling down
            changeTabBar(hidden: true, animated: true)
        }
        else{
            //scrolling up
            changeTabBar(hidden: false, animated: true)
        }
    }

    func changeTabBar(hidden:Bool, animated: Bool){
        let tabBar = self.tabBarController?.tabBar
        let offset = (hidden ? UIScreen.main.bounds.size.height : UIScreen.main.bounds.size.height - (tabBar?.frame.size.height)! )
        if offset == tabBar?.frame.origin.y {return}
        print("changing origin y position")
        let duration:TimeInterval = (animated ? 0.5 : 0.0)
        UIView.animate(withDuration: duration,
                       animations: {tabBar!.frame.origin.y = offset},
                       completion:nil)
    }
}

How to hide the tab bar when a view controller is shown, I'm quite new to iOS development. Right now i'm trying to hide my tabbar when I scroll down and when scrolling up the tabbar should appear. I would like to� Got some emails regarding how to create a UITabBarController programmatically so I’d thought I’ll show everyone as It’s pretty beneficial to know how to do it aside from doing it on Storyboard.

You can control UITabBar precisly by setting up your class as delegate for scrollView and implementing scrolling in scrollViewDidScroll: method.

Here is an example how I do it my application. You can probably easily modify that for your needs. Some helper function to get UITabBar included.

#define LIMIT(__VALUE__, __MIN__, __MAX__) MAX(__MIN__, MIN(__MAX__, __VALUE__))

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat scrollOffset = scrollView.contentOffset.y;
    CGFloat scrollDiff = scrollOffset - self.previousScrollViewYOffset;
    CGFloat scrollHeight = scrollView.frame.size.height;
    CGFloat scrollContentSizeHeight = scrollView.contentSize.height + scrollView.contentInset.bottom;
    CGFloat scrollOffsetGlobal = scrollOffset + scrollView.contentInset.top;
    [self updateUITabBarY:[self UITabBarView].frame.origin.y + scrollDiff];
    self.previousScrollViewYOffset = scrollOffset;
}

- (UITabBar*) UITabBarView
{
    for(UIView *view in self.tabBarController.view.subviews)
    {
        if([view isKindOfClass:[UITabBar class]])
        {
            return (UITabBar*) view;
        }
    }

    return nil;
}

- (void) updateUITabBarY:(CGFloat) y
{
    UITabBar* tabBar = [self UITabBarView];
    if(tabBar)
    {
        CGRect frame = tabBar.frame;
        frame.origin.y  = LIMIT(y, [self UITabBarMiny], [self UITabBarMaxY]);
        tabBar.frame = frame;
    }
}

- (CGFloat) UITabBarMiny
{
    return [UIScreen mainScreen].bounds.size.height - [self UITabBarView].frame.size.height - [[UIApplication sharedApplication] statusBarFrame].size.height + 20.0f;
}

- (CGFloat) UITabBarMaxY
{
    return [UIScreen mainScreen].bounds.size.height;
}

iOS/Swift - Hide/Show UITabBarController when scrolling down/up. I'm quite new to iOS development. Right now i'm trying to hide my tabbar when I scroll down� iOS/Swift - Hide/Show UITabBarController when scrolling down/up I'm quite new to iOS development. Right now i'm trying to hide my tabbar when I scroll down and when scrolling up the tabbar should appear.

According to @Ariel Hernández Amador answer for black screen after hiding Tabbar just use this line of code in your ViewDidLoad(). Working Superbly...I have posted this here as I am unable to comment over there.

viewDidLoad()
{
if #available(iOS 11.0, *) {
            self.myScroll.contentInsetAdjustmentBehavior = .never
        }
}

Here myScroll is the Scrollview I am using in my VC. Just replace it with your VC.

If you're using UITabBarController to display a tab strip at the bottom of your user interface, the default behavior for iOS is to display the tabs at� In This Tutorial Developing a "Lesson #2 | How To Change Navigation Bar Type Scroll Up In Swift" App for iOS 11 using Swift 4 Xcode 9. In this video, I replicate a navigation bar animation

I'd like to add in the effect of hiding my UITabBarController when a user starts to scroll a table, and then if they start to scroll back towards the top, it reappears. This site uses cookies for analytics, personalized content and ads.

Runtime Requirements. iOS 8.0 or later; Swift 3.0 or later; Xcode 8.0 or later; Future Improvements. Refactoring. 💪 Enable to use like UITabBarController. Enable to implement only using code.

Hide and Show the Navigation Bar and Tab Bar in Swift Feel free to scroll directly down to the problem resolution section. Self-taught iOS-developer. I write mostly about Swift features

Comments
  • Thanks for your reply, i'll try to implement it later in my project
  • Works great. This is exactly what i was looking for. Thanks.
  • Great answer. Thanks
  • I found scrollViewWillEndDragging to be smoother for the user
  • It hides the tabBar and shows the view below the tabBar, it's show you a black area, because the tableViewController is not covering that area.
  • Thanks for ur answer. I'll try the swift answer first.
  • Sry I added missing macro for you - it just limits first parameter to a certain range - (value, MIN, MAX)
  • For me, this solution was not working, but then I found some constraints issue on my end, I have given bottom view's bottom constraint with respect to safe area then, I changed it to superView and it worked for me.(stackoverflow.com/a/55216583/7516788)