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
    }

Answer 1

NavigationBar have a titleView object where the title is. You can customize a label to go there however you want and make navigationBar.titleView = yourLabel or make a custom UIView all the same.

Answer 2

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