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?

Archimage

Possible duplicate of Imitate iOS 7 Facebook hide/show expanding/contracting Navigation Bar. Please scroll through the answers. There are Swift answers in there. – Travax

Answer 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.

Wintertide

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

@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). – Wintertide

@Wintertide 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 ! – Bobbitt

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. – Lorenza

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 – Sutler

@Sutler May help. Read again the bottom Note in my answer. – Wintertide

@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 :-) – Sutler

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

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

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

@Wintertide It will not work in the case when you take UINavigationBar in class – Mogilev

Answer 2

Easily to do this:

navigationController?.hidesBarsOnSwipe = true

Amygdalate

Using only this approach the navigation bar disappears forever – Englut

@Englut 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. – Rogelioroger

Answer 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)
   }
}

Extine

Answer 4

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

Hardwick

Answer 5

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

https://github.com/andreamazz/AMScrollingNavbar

It's updated for Swift 3

Archimage

Answer 6

Swift 5 Xcode 10.3

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    navigationController?.hidesBarsOnSwipe = true
  }
override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.hidesBarsOnSwipe = false
  }

Individualism

Answer 7

Here is very good option for that

Easily hide and show a view controller's navigationBar/tabBar as a user scrolls https://github.com/tristanhimmelman/HidingNavigationBar

import HidingNavigationBar

class MyViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    var hidingNavBarManager: HidingNavigationBarManager?
    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        hidingNavBarManager = HidingNavigationBarManager(viewController: self, scrollView: tableView)
    }

    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)

        hidingNavBarManager?.viewWillAppear(animated)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        hidingNavBarManager?.viewDidLayoutSubviews()
    }

    override func viewWillDisappear(animated: Bool) {
        super.viewWillDisappear(animated)

        hidingNavBarManager?.viewWillDisappear(animated)
    }

    //// TableView datasoure and delegate

    func scrollViewShouldScrollToTop(scrollView: UIScrollView) -> Bool {
        hidingNavBarManager?.shouldScrollToTop()

        return true
    }

    ...
}

Burkhart

Answer 8

Swift UI

extension UINavigationController {
    override open func viewDidLoad() {
        super.viewDidLoad()
    hidesBarsOnSwipe = true
    // other customizations
    navigationBar.tintColor = .white
 }
}

Semeiology

Answer 9

I implemented this in my scrollview, as I was using components other than UITableView or UICollectionView, not sure if it works for you, but it's working perfectly for me:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let totalTop = (UIApplication.shared.statusBarFrame.size.height ?? 0) + (self.navigationController?.navigationBar.frame.height ?? 0)
    let shouldHideNavBar = scrollView.contentOffset.y > -(totalTop - 20) // 20 is an arbitrary number I added to compensate for some of scrolling
    navigationController?.setNavigationBarHidden(shouldHideNavBar, animated: true)
}

Weathersby

Answer 10

You can use these lines of code :

- (void)scrollViewDidScroll: (UIScrollView *)scroll {
    // UITableView only moves in one direction, y axis
    CGFloat currentOffset = scroll.contentOffset.y;
    CGFloat maximumOffset = scroll.contentSize.height - scroll.frame.size.height;

    // Change 10.0 to adjust the distance from bottom
    if (maximumOffset - currentOffset <= 10.0) {
        self.navigationController?.hidden = YES;
    }
    else{
        self.navigationController?.hidden = NO;
    }
}

Communion

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

please use scrollViewWillEndDragging delegate method – Involucel