Swift & Navigation：导航栏在滚动视图时更改其背景颜色答案

【问题标题】：Swift & Navigation : Navigation Bar changes its background color when scroll the viewSwift & Navigation：导航栏在滚动视图时更改其背景颜色
【发布时间】：2021-11-11 07:29:25
【问题描述】：

我在导航控制器中嵌入了 2 个视图控制器，如下图所示。

每次我滚动浏览我的表格项时，导航背景颜色都会随着状态栏背景颜色不断变化。

如何以编程方式设置导航栏和状态栏的背景颜色？

代码：

import UIKit

class TestViewController: UIViewController, UIGestureRecognizerDelegate {

    @IBOutlet weak var tableView: UITableView!
    
    let faqList : [FAQ] = [
        FAQ(title: "Test 1", content: "Answer 1"),
        FAQ(title: "Test 2", content: "Answer 2"),
        FAQ(title: "Test 3", content: "Answer 3"),
        FAQ(title: "Test 4", content: "Answer 4"),
        FAQ(title: "Test 5", content: "Answer 5"),
        FAQ(title: "Test 6", content: "Answer 6"),
        FAQ(title: "Test 7", content: "Answer 7"),
        FAQ(title: "Test 8", content: "Answer 8"),
        FAQ(title: "Test 9", content: "Answer 9"),
        FAQ(title: "Test 10", content: "Answer 10"),
        FAQ(title: "Test 11", content: "Answer 11"),
        FAQ(title: "Test 12", content: "Answer 12"),
        FAQ(title: "Test 13", content: "Answer 13"),
        FAQ(title: "Test 14", content: "Answer 14"),
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self

        tableView.backgroundColor = UIColor(named: "BackgroundColor")
        tableView.register(UINib(nibName: "ButtonTableViewCell", bundle: nil), forCellReuseIdentifier: "ButtonCell")
        self.navigationController?.navigationBar.backgroundColor = .blue
    }
}

extension TestViewController: UITableViewDelegate {
    
}

extension TestViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return faqList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ButtonCell", for: indexPath) as! ButtonTableViewCell
        let buttonCell = faqList[indexPath.row]
        cell.titleLabel.text = buttonCell.title
        cell.trailingIconBackground.isHidden = true

        cell.buttonView.backgroundColor = .brown
        cell.buttonView.layer.cornerRadius = 10
        cell.buttonView.layer.masksToBounds = true

        cell.selectionStyle = UITableViewCell.SelectionStyle.none
        
        return cell
    }
}

【问题讨论】：

你使用的是 Xcode 13.0+ 吗？
是的！我正在使用 Xcode 15+
我有相反的问题。你是怎么解决的？

标签： ios swift navigation

【解决方案1】：

只需使用下面的代码。我修复了同样的问题：

// Below code will fix Navigation bar issue fixed for iOS 15.0
        if #available(iOS 15, *) {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            self.navigationController?.navigationBar.isTranslucent = true  // pass "true" for fixing iOS 15.0 black bg issue
            self.navigationController?.navigationBar.tintColor = UIColor.white // We need to set tintcolor for iOS 15.0
            appearance.shadowColor = .clear    //removing navigationbar 1 px bottom border.
            UINavigationBar.appearance().standardAppearance = appearance
            UINavigationBar.appearance().scrollEdgeAppearance = appearance
        }

【讨论】：

我为什么要放这个？在我所有的视图控制器中？
你的意思是你应该把这个放在哪里？只需将它放在您的 BaseVC 中，它是您所有 VC 的超类，这样您只需编写一次此代码。

【解决方案2】：

对于您的导航栏，您会找到“外观” 检查“标准”和“滚动边缘” 然后您会在检查器中找到多个“背景”属性，在“标准外观”部分下更改背景，在“滚动边缘外观”部分下更改另一个背景，然后它应该可以正常工作

【讨论】：

我会在这里给你一些爱......这对我有用......它让我感到惊讶，你必须“恰到好处”地达到你想要的效果。例如，不透明和半透明有什么区别？如果您只选择了 1 个怎么办？两个都选了？都没选？这样的难题......再次感谢。

【解决方案3】：

尝试改变导航栏的半透明属性。

self.navigationController?.navigationBar.isTranslucent = false

【讨论】：

我也是这样做的，现在导航栏和状态栏的背景都变白了。
... omg... 我现在就去找它

【解决方案4】：

在 IOS 15 中，UINavigationBar 使用scrollEdgeAppearance，默认情况下具有透明背景色，并在您滚动查看时触发。你需要为此设置一个特殊的外观

   let appearance = UINavigationBarAppearance()
   appearance.backgroundColor = .blue
  navigationController?.navigationBar.scrollEdgeAppearance = appearance

【讨论】：

但如果我这样做，我将无法自定义我的后退按钮（无法更改图标或文本）。现在我们可以用UIBarButtonItem 替换它。有了它，我们可以返回，但不能向后滑动，除非我们实现 interactivePopGestureRecognizer，这可能必须在每个页面中完成。
您可以自定义您的后退按钮或文本，但是如果您想启用带有滑动操作的弹出视图控制器，您需要将此委托添加到当前视图控制器

【解决方案5】：

将此粘贴到 AppDelegate，如果您也有标签栏，则粘贴 tabbarappearance 也可以。

if #available(iOS 15, *) {
                let navigationBarAppearance = UINavigationBarAppearance()
                navigationBarAppearance.configureWithOpaqueBackground()
                navigationBarAppearance.titleTextAttributes = [
                    NSAttributedString.Key.foregroundColor : UIColor.white
                ]
                navigationBarAppearance.backgroundColor = UIColor.blue
                UINavigationBar.appearance().standardAppearance = navigationBarAppearance
                UINavigationBar.appearance().compactAppearance = navigationBarAppearance
                UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance
            
            let tabBarApperance = UITabBarAppearance()
            tabBarApperance.configureWithOpaqueBackground()
            tabBarApperance.backgroundColor = UIColor.blue
            UITabBar.appearance().scrollEdgeAppearance = tabBarApperance
            UITabBar.appearance().standardAppearance = tabBarApperance
        }

【讨论】：