Move navigation bar to center when tab bar scrolled-CodePudding

I want to create navigation bar like in contacts application on iPhone, seems like default solution but I can't find any code examples. What I want to do is to move my navigation bar from the left to center and change font size when user scrolls tab bar. Please see screenshots:

CodePudding user response：

Large title and title of navigation bar

class BaseNavigationController: UINavigationController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        if #available(iOS 15.0, *) {
            let scrollAppearance = UINavigationBarAppearance()
            scrollAppearance.shadowColor = .white
            scrollAppearance.backgroundColor = .white
            let navigationBarAppearance = UINavigationBarAppearance()
            navigationBarAppearance.configureWithDefaultBackground()
            navigationBarAppearance.backgroundColor = .white
            navigationBarAppearance.largeTitleTextAttributes = [
                NSAttributedString.Key.font: UIFont.systemFont(ofSize: 26),
                NSAttributedString.Key.foregroundColor: UIColor.black
            ]
            navigationBarAppearance.titleTextAttributes = [
                NSAttributedString.Key.font: UIFont.systemFont(ofSize: 17),
                NSAttributedString.Key.foregroundColor: UIColor.black
            ]
            UINavigationBar.appearance().backIndicatorImage = UIImage(named: "back-arrow")
            UINavigationBar.appearance().standardAppearance = navigationBarAppearance
            UINavigationBar.appearance().compactAppearance = navigationBarAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = scrollAppearance
            navigationBar.tintColor = .black
            navigationBar.prefersLargeTitles = true
            navigationBar.isTranslucent = false
            navigationItem.largeTitleDisplayMode = .automatic
        } else {
            navigationBar.largeTitleTextAttributes = [
                NSAttributedString.Key.font: UIFont.systemFont(ofSize: 26),
                NSAttributedString.Key.foregroundColor: UIColor.black
            ]
            navigationBar.titleTextAttributes = [
                NSAttributedString.Key.font: UIFont.systemFont(ofSize: 17),
                NSAttributedString.Key.foregroundColor: UIColor.black
            ]
            navigationBar.tintColor = .black
            navigationBar.prefersLargeTitles = true
            navigationBar.isTranslucent = false
            navigationItem.largeTitleDisplayMode = .automatic
            navigationBar.barTintColor = .white
        }
        
    }
    
}

this line is responsible for showing this large left title in navigation bar

 navigationItem.largeTitleDisplayMode = .automatic

this is the font for largeTitle and small center title

 navigationBarAppearance.largeTitleTextAttributes = [
                NSAttributedString.Key.font: UIFont.systemFont(ofSize: 26),
                NSAttributedString.Key.foregroundColor: UIColor.black
            ]
            navigationBarAppearance.titleTextAttributes = [
                NSAttributedString.Key.font: UIFont.systemFont(ofSize: 17),
                NSAttributedString.Key.foregroundColor: UIColor.black
            ]

how to use it

let vc = ViewController()

let embeddedNav = BaseNavigationController(rootViewController: vc)

present(embeddedNav,animate:true)

set the title in view did load method of vc

navigationItem.title = "Some title"

CodePudding user response：

Solution:

override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        configureNavigationBar(largeTitleColor: .black, backgoundColor: .spWhite, tintColor: .white, title: "Your Title", preferredLargeTitle: true)
    }

extension UIViewController {
func configureNavigationBar(largeTitleColor: UIColor, backgoundColor: UIColor, tintColor: UIColor, title: String, preferredLargeTitle: Bool) {
    if #available(iOS 13.0, *) {
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.configureWithOpaqueBackground()
        navBarAppearance.largeTitleTextAttributes = [.foregroundColor: largeTitleColor]
        navBarAppearance.titleTextAttributes = [.foregroundColor: largeTitleColor]
        navBarAppearance.backgroundColor = backgoundColor

        navigationController?.navigationBar.standardAppearance = navBarAppearance
        navigationController?.navigationBar.compactAppearance = navBarAppearance
        navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance

        navigationController?.navigationBar.prefersLargeTitles = preferredLargeTitle
        navigationItem.largeTitleDisplayMode = .always
        navigationController?.navigationBar.isTranslucent = false
        navigationController?.navigationBar.tintColor = tintColor
        navigationItem.title = title

    } else {
        // Fallback on earlier versions
        navigationController?.navigationBar.barTintColor = backgoundColor
        navigationController?.navigationBar.tintColor = tintColor
        navigationController?.navigationBar.isTranslucent = false
        navigationItem.title = title
    }
}
}