某些视图上的导航栏大标题问题

Question

我正在开发一个 iOS 应用程序，我使用 TabBar 控制器创建了一些视图，并且我想在一些视图上使用大型导航栏。

我在 TabBar 控制器上有三个 VC：

• FeedVC
• ChatsVC
• ProfilesVC

我将在 (FeedVC) 上使用普通导航栏，我将在 (ChatsVC、ProfilesVC) 上使用大型导航栏。

问题是当我从 FeedVC 中点击 ChatsVC 时，它会显示正常的 NavigationBar，直到我向下滚动，但是当我从 ProfilesVC 中点击 ChatsVC 时会显示大。

这是一段录制的视频： Video uploaded to my CDN

我在 FeedVC 上使用的代码：

    override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    self.tabBarController?.navigationController?.navigationBar.prefersLargeTitles = false
    self.tabBarController?.title = "Feed"
}

override func viewDidDisappear(_ animated: Bool) {
    self.tabBarController?.navigationController?.navigationBar.prefersLargeTitles = true
}

Answer 1

以编程方式，像这样配置您的标签栏控制器并隐藏标签栏导航栏：

class TabBarCobtroller: UIViewController {

let yourTabBar = UITabBarController()

override func viewDidLoad() {
    super.viewDidLoad()
    
    yourTabBar.tabBarController?.tabBar.isHidden = true // hide the navigation bar of the tab bar
    yourTabBar.tabBar.tintColor = UIColor.black
    createTabBarController()
}

func createTabBarController() {
    
    let firstVc = FirstVCController()
    firstVc.tabBarItem = UITabBarItem.init(title: "Home", image: UIImage(systemName: "house.fill"), tag: 1)
    
    let secondVc = SecondVcController()
    secondVc.tabBarItem = UITabBarItem.init(title: "Chats", image: UIImage(systemName: "heart.fill"), tag: 1)
    
    let thirdVc = ThirdViewController()
    thirdVc.tabBarItem = UITabBarItem.init(title: "Profile", image: UIImage(systemName: "person.fill"), tag: 1)
    
    let controllerArray = [firstVc, secondVc, thirdVc]
    yourTabBar.viewControllers = controllerArray.map{ UINavigationController.init(rootViewController: $0)}
    
    self.view.addSubview(yourTabBar.view)
 }
}

现在为自定义导航栏添加这个扩展：

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

之后，在您的 FeedVC 中配置 viewWillAppear 您的自定义导航栏，该控制器具有正常标题：

coverride func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    configureNavigationBar(largeTitleColor: .white, backgoundColor: .red, tintColor: .white, title: "FeedVC", preferredLargeTitle: false)
}

对于带有大标题的chatsVC：

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    configureNavigationBar(largeTitleColor: .white, backgoundColor: .red, tintColor: .white, title: "ChatsVC", preferredLargeTitle: true)
}

对于带有大标题的个人资料：

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    configureNavigationBar(largeTitleColor: .white, backgoundColor: .mediumBlue, tintColor: .white, title: "ProfilesVC", preferredLargeTitle: true)
}

现在您可以控制栏了，只需编辑该行：

configureNavigationBar(largeTitleColor: .yourColor, backgoundColor: .yourColor, tintColor: .yourColor, title: "YourVCName", preferredLargeTitle: true) // true if you want large title or falsa if you want normal title...

这是结果：