26

I have got a View Controller embedded in a Navigation Controller with prefers large titles option set to true; inside the View Controller there’s a Scroll View.

I want to make the nav bar shrink when scrolling.

How could I achieve this?

Xcode 9, Swift 4, iOS 11

4
  • Do you mean to hide or normal size? Commented Oct 12, 2017 at 14:30
  • @user3589771 I mean normal size Commented Oct 12, 2017 at 14:37
  • I don't know. But check this before try with UIView animation and undo larger title? Commented Oct 12, 2017 at 14:53
  • @user3589771 That only works for table view controllers Commented Oct 12, 2017 at 15:03

12 Answers 12

88

I have not achieved this using a UIScrollView but I achieved it with other ViewControllers using a UITableView as first view.

If the tableView is not the first view, the large title fails to hide automatically. You most likely need to make sure your tableView is the first element in the main view’s subviews array.

enter image description here

I hope that this solves your problem.

7
  • I do not consider it a problem. In my App I wanted to keep the navigation bar always big (Not hide on scroll).
    – Markus
    Commented May 30, 2018 at 8:19
  • 1
    OP specifically asked for a solution not using UITableViewController Commented May 17, 2019 at 23:03
  • 2
    If you are building a view programmatically, you have to add the table/ scrollview as a subview first. If you use "bringSubviewToFront" you'll lose the large title transition as well. Commented Apr 2, 2020 at 14:06
  • @TristanNewman what if I need that view on the back? I mean I need it as constraint in safe area but in the back of table view? because I want to create a view that is in the back of table view but also in the back of large title too.
    – Dylan
    Commented Sep 7, 2020 at 5:03
  • @TristanNewman Is there any way to use a scroll view inside another view? eg: viewController -> my_custome_view -> scrollView
    – Maneesh M
    Commented Nov 2, 2020 at 14:36
8

Have you tried something like this? It converts the large title display mode when the content is scrolled up.

class P1ViewController: UIViewController, UIScrollViewDelegate
{
    var canTransitionToLarge = false
    var canTransitionToSmall = true    

    func scrollViewDidScroll(_ scrollView: UIScrollView)
    {
        if canTransitionToLarge && scrollView.contentOffset.y <= 0 {
            UIView.animate(withDuration: 0.5) {
                self.navigationItem.largeTitleDisplayMode = .always
            }
            canTransitionToLarge = false
            canTransitionToSmall = true
        }
        else if canTransitionToSmall && scrollView.contentOffset.y > 0 {
            UIView.animate(withDuration: 0.5) {
                self.navigationItem.largeTitleDisplayMode = .never
            }
            canTransitionToLarge = true
            canTransitionToSmall = false
        }
    }
}
3
  • This works, but it's not that smooth, doesn't feel as native as with tableviewcontrollers Commented Oct 14, 2017 at 17:41
  • 1
    This helped; but I went for the other suggestion of nesting my modal UITableViewController in a UINavigationController. This allowed me to both: (1) display a UINavigationBar and (2) display large titles (automatically adjusting to scroll gestures) with navigationController?.navigationBar.prefersLargeTitles = true. Commented May 18, 2019 at 19:02
  • If you prefer a standard UIViewController with a nested UINavigationBar and UITextView for scrolling content, you should consider using additional UIScrollViewDelegate methods like scrollViewWillBeginDragging(_:), scrollViewDidScroll(_:), and scrollViewDidScrollToTop(_:) to update largeTitleDisplayMode more often. Keep in mind, UITextViewDelegate inherits from UIScrollViewDelegate so you have access to all of those superclass methods. Remember to set the delegate in your view controller with an outlet from the UITextView using textView.delegate = self in viewDidLoad() Commented May 18, 2019 at 19:25
6

Setting prefersLargeTitles in code did work for me to make the NavBar title shrink and grow as you scroll. I did notice if you set the property through InterfaceBuilder, the shrinking feature didn't work.

IB Property Inspector

Instead set in code like

    self.navigationController?.navigationBar.prefersLargeTitles = true
2
  • Could you show how your storyboard elements hierarchy? Commented Oct 20, 2017 at 0:16
  • this doesn't work if tableview is not below safe area in view hierarchy. Commented Jan 2, 2020 at 12:22
5

This way is working for me. I followed these steps:

  1. Moving the TableView to top of the list (under safe area) in view controller scene.
  2. Making FirstView and Loaded by FirstViewContoller.

The screenshot of the solution

2

I used dsk1306 solutions, see above. But in my case I had a WebView in the UIViewController with the large title.

So I had to set the UIWebView ScrollView delegate:

self.webView.scrollView.delegate = self

and

extension MyViewController: UIScrollViewDelegate {

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    if #available(iOS 11.0, *) {
        UIView.animate(withDuration: 0.5, animations: {
            self.navigationController?.navigationBar.prefersLargeTitles = (velocity.y < 0)
        })
    }
}

}
2

I had the similar problem, is was because of many UIScrollView-based view inside view controller and I was scrolling not first in hierarchy. Once it's only one it works fine with UIScrollView, WKWebView or UITextView without any line of code.

1
  • This worked for me too. I was adding a background view before the UIScrollView. Thanks!
    – Kqtr
    Commented Nov 10, 2021 at 15:51
1

I've used something that is similar to Kamil Szostakowski's answer for view with UICollectionView.

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    UIView.animate(withDuration: 0.5, animations: {
        self.navigationController?.navigationBar.prefersLargeTitles = (velocity.y < 0)
    })
}

It may be not so smooth but I haven't found better option yet.

1

In case someone needs to have some view on top, like a menu, and then a UITableView/UICollectionView, and the large title is not hiding when scrolling, like in this "awesome" picture I made:

You will need to set up all the required constraints for the UIView & for your UITableView/UICollectionView, but the most vital part is:

make sure your UITableView/UICollectionView is the first subview, and then the UIView or any other views are behind.

Here is an example of that:

0

Try something like this:

    extendedLayoutIncludesOpaqueBars = true
    scrollView.translatesAutoresizingMaskIntoConstraints = false       
    view.addSubview(scrollView)
    NSLayoutConstraint.activate([
        scrollView.topAnchor.constraint(equalTo: view.topAnchor),
        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor),
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor)
        ])
0

I tested with storyboard approach, it is working. Make sure to set the scrollView & it's subviews Constraints.

Here with the test sample XCode project for references: https://github.com/DazChong/LargeTitleShrinkOnScrollView

3
  • @HabibAli, before your downvote, have you tested with latest iOS 11.2? I tested on various devices it's indeed working by fresh git clone.
    – DazChong
    Commented Jan 13, 2018 at 4:02
  • @HabibAli and it even working for iOS 11.0.1, since Apple do not longer allow download of iOS 11.0 simulators. Please update your system to the latest before judge.
    – DazChong
    Commented Jan 13, 2018 at 4:11
  • 1
    it is not allowing me to upvote this, unless you edit your answer. Please edit your answer and tell peoples to use latest xcode with 11.2 simulators
    – Habib Ali
    Commented Feb 5, 2018 at 18:10
0

If u have problem collapse root navigationBar from presented VC's scrollView, can try this: Add UIScrollView to RootVC. Important - UIScrollView must be root view(at index 0). In presentedVC we can use scrollViewDidScroll and set offset on our root UIScrollView. see here with gif and code RootVC view hierarchy: screenshot (sorry for link, not enough reputation)

in presentedVC try this

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if #available(iOS 11.0, *) {
            let offset = scrollView.contentOffset
            rootVC.scrollView.contentOffset = offset
        }
}
-1

You need to:

  1. Pin scroll top view to super view top

  2. Add

override func viewDidLoad() {
    super.viewDidLoad()

    scrollView?.alwaysBounceVertical = true
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.