iOS 10 - How to create custom Navigation bar large title

Question

My app deployment target version is iOS 10. and I added navigation bar large title in my app. it is working as per need in above iOS 10. if I try to test this in iOS 10 it is not working. So I am trying to create custom Navigation bar large tile for iOS 10 as well. but i don't know how to achieve this. please guide me. Thanks Advance

    if #available(iOS 11.0, *) {
         navigationController?.navigationBar.prefersLargeTitles = true
    } else { 
         // need to add here as well
    }

see this for help : How to increase the height of navigation bar in Xcode? — Anbu.Karthik
@Anbu.Karthik yes we can achieve large title this way. but i need to scroll as well. if collection view scroll need to move navigation-bar tile in center. Thanks — Raj
One thing to consider is that users on iOS 10 are not used to seeing large titles in apps. I personally like to keep the look and feel of an app appropriate to the iOS version it is on. So you may not want to attempt to have large titles on iOS 10. — rmaddy
I don't understand why you want to change the look. If I may, why is your deployment target iOS 10? The large navigation bar titles, I think, came in iOS 12. — ojassethi
@ojassethi A quick look at the documentation for UINavigationBar shows that all of the APIs related to large titles was added in iOS iOS 11, not 12. — rmaddy

Zeynal Zeynal · Accepted Answer · 2021-05-25T05:50:27

In case somebody needs this. Here is how I did it. For me, this is better than the default, because it supports whatever customization you may want from large title (ex. multiline)

In my case my layout looks like this. You can have however you want, but make sure title is not inside of the table view / scroll view.

view

view
- large title label
- view (this view will stick on top)
view
- table view
- view
view

In this case, I have scrollViewDidScroll delegate, which checks the scrollView content offset to change the titleLabels top constraint. For me top constraint is 16. Change it to whatever you want to have

 extension YourViewController: UITableViewDelegate {
    public func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let titleHeight = titleLabel.bounds.height
        if (scrollView.contentOffset.y <= 0) {
            // Title is fully visible - table view is at the top
            titleLabelTopConstraint.constant = 16
            isLargeTitleHidden = false
        } else if (scrollView.contentOffset.y > (titleHeight + 16)){
            // Title is not visible at all. Table view is at an unknown position but it is not top
            titleLabelTopConstraint.constant = -titleHeight
            isLargeTitleHidden = true
        } else {
            // Title is kind of visible. Not fully hidden or shown.
            titleLabelTopConstraint.constant = -scrollView.contentOffset.y + 16
            isLargeTitleHidden = false
        }
    } }

I also have the isLargeTitleHidden to update the nav

var isLargeTitleHidden: Bool = false {
    didSet{
        if (oldValue != isLargeTitleHidden){
            updateNavBar()
        }
    }
}
func updateNavBar(){
    let fadeTextAnimation = CATransition()
    fadeTextAnimation.duration = 0.2
    fadeTextAnimation.type = CATransitionType.fade

    navigationController?.navigationBar.layer.add(fadeTextAnimation, forKey: "fadeText")
    
    if isLargeTitleHidden {
        navigationItem.title = titleLabel.text
    } else {
        navigationItem.title = ""
    }
}

iOS 10 - How to create custom Navigation bar large title

3 Answers