Xcode 14 导航栏（NavigationBar）和工具栏（Toolbar）样式异常解决方案

见解分享

2024-01-07 19:43:39

Xcode 14：修复导航栏和工具栏样式异常

作为一名 iOS 开发者，你可能已经注意到，Xcode 14 引发了一些导航栏和工具栏样式异常，使你的应用程序界面看起来怪异或不专业。别担心！本文将深入探究这些异常背后的原因，并为你提供可靠的解决方案，让你恢复优雅而一致的界面。

异常的根源：标准外观的幽灵

Xcode 14 中的导航栏和工具栏异常是由“标准”外观（Appearance）的引入力造成的。该外观下，导航栏和工具栏的默认样式发生了变化，与之前的 Xcode 版本大相径庭。这导致了透明度问题、标题和按钮颜色异常，破坏了用户体验。

解决方案：驯服标准外观

为了驯服标准外观的异常行为，我们需要采取针对性的策略：

1. 导航栏透明的救赎

要消除导航栏的透明度问题，禁用“标准”外观即可：

前往“项目设置”（Project Settings）
在“外观”（Appearance）选项卡中，将“外观”（Appearance）切换为“自定义”（Custom）

2. 工具栏透明的终结者

同样，要解决工具栏的透明度问题，禁用“标准”外观并设置背景颜色：

前往“项目设置”（Project Settings）
在“外观”（Appearance）选项卡中，将“外观”（Appearance）切换为“自定义”（Custom）
在“工具栏”（Toolbar）选项卡中，为“背景色”（Background Color）设置一个颜色值

3. 导航栏标题颜色的调色板

如果导航栏标题的颜色发生了变化，原因可能是 Xcode 14 的默认主题。自定义标题颜色即可修复此问题：

前往“项目设置”（Project Settings）
在“外观”（Appearance）选项卡中，将“外观”（Appearance）切换为“自定义”（Custom）
在“导航栏”（NavigationBar）选项卡中，为“标题文本”（Title Text）设置一个颜色值

4. 工具栏按钮颜色的变色龙

与导航栏标题类似，工具栏按钮颜色的异常也是由默认主题造成的。通过自定义按钮颜色即可解决：

前往“项目设置”（Project Settings）
在“外观”（Appearance）选项卡中，将“外观”（Appearance）切换为“自定义”（Custom）
在“工具栏”（Toolbar）选项卡中，为“按钮颜色”（Button Color）设置一个颜色值

示例代码：重现昔日辉煌

以下是 Swift 中自定义导航栏和工具栏样式的示例代码：

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 禁用标准外观
        self.navigationController?.navigationBar.standardAppearance = nil
        self.navigationController?.navigationBar.scrollEdgeAppearance = nil
        self.navigationController?.navigationBar.compactAppearance = nil

        // 设置背景色
        self.navigationController?.navigationBar.barTintColor = UIColor.blue

        // 设置标题颜色
        self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
        
        // 设置工具栏背景色
        self.toolbar.barTintColor = UIColor.red
        
        // 设置按钮颜色
        self.toolbar.tintColor = UIColor.white
    }
}