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

问题描述

我正在开发一个iOS应用,我使用TabBar Controller创建了一些视图,并且想在某些视图上使用大导航栏。

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

解决方法

以编程方式,像这样配置标签栏控制器并隐藏tabBar导航栏:

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

现在为自定义navBar添加此扩展名:

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中在viewWill中进行配置显示此控制器的带有常规标题的自定义导航栏:

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,title: "ChatsVC",preferredLargeTitle: true)
}

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

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    configureNavigationBar(largeTitleColor: .white,backgoundColor: .mediumBlue,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...

这是结果:

enter image description here