Shrink large title when scrolling (not UITableViewController) iOS 11

Question

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

I don't know. But [check this before](https://medium.com/@PavelGnatyuk/large-title-and-search-in-ios-11-514d5e020cee) try with `UIView` animation and undo larger title? — Mathi Arasan, Oct 12 '17 at 14:53

score 86 · Answer 1 · edited Apr 02 '20 at 17:02

86

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.

I hope that this solves your problem.

edited Apr 02 '20 at 17:02

Tristan Newman

357
1
4
13

answered Dec 27 '17 at 12:13

93sauu

3,770
3
27
43

I do not consider it a problem. In my App I wanted to keep the navigation bar always big (Not hide on scroll). – Markus May 30 '18 at 08:19
1

OP specifically asked for a solution **not** using UITableViewController – Andrew Kirna May 17 '19 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. – Tristan Newman Apr 02 '20 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 Sep 07 '20 at 05:03
@TristanNewman Is there any way to use a scroll view inside another view? eg: viewController -> my_custome_view -> scrollView – Maneesh M Nov 02 '20 at 14:36
Well this isnt working to hide Large title when my tableview is first View. I addition I have given top constraint for safearea from different View which is not first View . – Kudos Jul 02 '21 at 07:22
Well this works only when you enable `bounce on scroll` for tableview – Kudos Jul 02 '21 at 08:00

score 8 · Answer 2 · answered Oct 12 '17 at 15:37

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

answered Oct 12 '17 at 15:37

Kamil Szostakowski

2,153
13
19

This works, but it's not that smooth, doesn't feel as native as with tableviewcontrollers – Jonathan Solorzano Oct 14 '17 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`. – Andrew Kirna May 18 '19 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()` – Andrew Kirna May 18 '19 at 19:25

score 6 · Answer 3 · edited Dec 11 '17 at 07:03

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.

Instead set in code like

    self.navigationController?.navigationBar.prefersLargeTitles = true

edited Dec 11 '17 at 07:03

Maddiee

288
2
11

answered Oct 19 '17 at 14:51

billm

124
1

Could you show how your storyboard elements hierarchy? – Jonathan Solorzano Oct 20 '17 at 00:16
this doesn't work if tableview is not below safe area in view hierarchy. – Dhaval Bhimani Jan 02 '20 at 12:22

score 5 · Answer 4 · edited Oct 08 '21 at 00:18

5

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

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

The screenshot of the solution

edited Oct 08 '21 at 00:18

pkamb

33,281
23
160
191

answered Feb 12 '18 at 20:01

score 2 · Answer 5 · answered Nov 09 '17 at 18:23

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

}

score 2 · Answer 6 · answered Feb 27 '18 at 13:03

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.

answered Feb 27 '18 at 13:03

avdyushin

1,906
17
21

This worked for me too. I was adding a background view before the UIScrollView. Thanks! – Kqtr Nov 10 '21 at 15:51

score 1 · Answer 7 · answered Oct 26 '17 at 15:06

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.

score 1 · Answer 8 · answered Aug 19 '20 at 07:25

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:

score 0 · Answer 9 · answered Dec 19 '17 at 11:11

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)
        ])

score 0 · Answer 10 · answered Jan 10 '18 at 03:14

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

answered Jan 10 '18 at 03:14

DazChong

3,513
27
23

@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 Jan 13 '18 at 04: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 Jan 13 '18 at 04: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 Feb 05 '18 at 18:10

vanab · Answer 11 · 2018-03-05T06:24:46.997

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

score -1 · Answer 12 · answered Apr 24 '19 at 17:56

-1

You need to:

Pin scroll top view to super view top
Add

override func viewDidLoad() {
    super.viewDidLoad()

    scrollView?.alwaysBounceVertical = true
  }

answered Apr 24 '19 at 17:56

talsharonts

267
1
9

Shrink large title when scrolling (not UITableViewController) iOS 11

12 Answers12

Linked