How to hide the navigation bar and toolbar as scroll down? Swift (like myBridge app)

Question

I want to hide a toolbar and nav bar as I scroll down a page. And return it as I scroll up. How is this possible?

How would I go about detecting the drag? Do I use pan gesture or is this down with the scrollview?

Solution 1

Try this simple approach: Tested in Swift 3

    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

    if(velocity.y>0) {
        //Code will work without the animation block.I am using animation block incase if you want to set any delay to it.
        UIView.animate(withDuration: 2.5, delay: 0, options: UIViewAnimationOptions(), animations: { 
            self.navigationController?.setNavigationBarHidden(true, animated: true) 
            self.navigationController?.setToolbarHidden(true, animated: true)
            print("Hide")
        }, completion: nil)

    } else {
        UIView.animate(withDuration: 2.5, delay: 0, options: UIViewAnimationOptions(), animations: { 
            self.navigationController?.setNavigationBarHidden(false, animated: true)
            self.navigationController?.setToolbarHidden(false, animated: true)
            print("Unhide")
        }, completion: nil)    
      }
   }

Output: Updated

Note: If you passing any data from this VC to another VC that embedded with navigationController.You may need to unhide the NavigationBar.

Solution 2

Easily to do this:

navigationController?.hidesBarsOnSwipe = true

Solution 3

In my opinion the proper way to handle navigation bar in Tableview as follows. This would applicable if we have section header in Tableview.

func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
   if scrollView.panGestureRecognizer.translation(in: scrollView).y < 0 {
      navigationController?.setNavigationBarHidden(true, animated: true)

   } else {
      navigationController?.setNavigationBarHidden(false, animated: true)
   }
}

Solution 4

you can try self.navigationController?.hidesBarsOnTap = true in viewDidAppear also you can use hide on swipe.

Solution 5

Thanks everyone, the way I went with was using AMScrollingController.

https://github.com/andreamazz/AMScrollingNavbar

It's updated for Swift 3

View more solutions

Comments

[rmaddy]

The question is tagged Swift, not Objective-C. Please post answers in the appropriate language.

[Mago Nicolas Palacios]

Hi, this worked to hide it and unhide it, But how did you do to have the yellow part below the status bar?

[Joe]

@MagoNicolasPalacios normally when you hide navigationBar.statusbar background goes transparent.I settled viewController background colour to yellow and tableview contentInset top padding to statusBar frame height(20px down).

[Slobodan Antonijević]

Noob question I know. But where and how do you call this func? I mean where does velocity and targetContentOffset come from? Also, you place a Scroll View as the parent container, and table view inside of it?

[GoodSp33d]

@SlobodanAntonijević thats your scrollView delegate.

[GoodSp33d]

@Joe Worked perfectly for me ! I shortened it to self.navigationController?.setNavigationBarHidden(velocity.y > 0, animated: true) as I had only nav bars to take care of !

[odvan]

Good solution, however if you have long list and put finger to stop scroll navbar appears. A put "if else" clause where velocity.y < 0 - covers this case. Also I can't find how to fix a bug when tapping statusBar and scrollToTop activated - scrollViewWillEndDragging doesn't detect it.

[BatyrCan]

I have edited some code, @RichardTelford, you can control that

[Kappe]

Using only this approach the navigation bar disappears forever

[Lance Samaria]

@odvan what you described about the long list and finger issue is happening to me. What did you post in your "else if" clause? I tried self.navigationController?.setNavigationBarHidden(true, animated: false) but it's still showing the nav bar when I touch a cell

[Lance Samaria]

@Joe odvan's comment happened to me. i tried velocity.y>=0 but it did the exact opposite, once I put a finger to stop the scroll it hid the nav bar

[Jonathan Cabrera]

@Kappe Make sure that the top constraint of your scroll view or table view is the Superview and not the Safe Area or Top Layout Guide. That should fix it.

[midhun p]

please use scrollViewWillEndDragging delegate method

[3000]

This works for me if I completely remove self.navigationController?.setToolbarHidden(false, animated: true): in case I don't, when I go back from the detail view to the master, my layout gets completely messed up for unknown reasons

[Joe]

@3000 May help. Read again the bottom Note in my answer.

[3000]

@Joe: I did it in the viewWillAppear of the master VC but it didn't work. Maybe I should try on the back button tap. Another thing I must say: in my project, I did not want to hide the toolbar but the code doesn't hide it, for some unknown reason :-)

[3000]

@Joe: the toolbar thing didn' work because I had a tabBar, not a toolbar (in fact, if I reference the tab bar it works) :-)

[Joe]

@3000 Toolbar is a subclass if tabBarController. Check the documentation. The code you looking for is something similar to “self.tabBarController?.setTabbarHidden(true, animated=true)”.

[3000]

@Joe: in fact, I tried it before posting (setTabbarHidden doesn't exist, there's a boolean value isHidden you can use) :-)

[Nij]

@Joe It will not work in the case when you take UINavigationBar in class

[Soorej Babu]

It helped.. I don't care it is answered under swift "tag". If its really care, why don't question those swift answers under every objective c "tags"??? Why?

[Niraj]

@Joe how to do when I have added UINavigationBar on view controller from storyboard itself?

[fs_tigre]

I changed the method I was using to this and works great, it's simple and less code. Thanks

[Eman]

this was even nicer, works perfectly for what I needed.

[Zash__]

works perfectly, should be accepted answer

[famfamfam]

then how to show it again??