Swift & 導航：導航欄在滾動視圖時更改其背景顏色

Question

我在導航 Controller 中嵌入了 2 個 ViewController，如下圖所示。

每次滾動瀏覽我的表格項目時，導航背景顏色都會隨着狀態欄背景顏色不斷變化。

如何以編程方式設置導航欄和狀態欄的背景顏色？

代碼：

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

Answer 1

將此粘貼到 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
        }

Answer 2

只需使用下面的代碼。 我修復了同樣的問題：

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

Answer 3

對於您的導航欄，您會發現“外觀”檢查“標准”和“滾動邊緣”然后您會在檢查器中找到多個“背景”屬性，在“標准外觀”部分下更改背景，在“滾動”部分下更改另一個邊緣外觀”部分，那么它應該可以正常工作

Answer 4

在 IOS 15 中， UINavigationBar 使用scrollEdgeAppearance默認情況下具有透明背景色，並在您滾動查看時觸發。 你需要為此設置一個特殊的外觀

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

Answer 5

只需將其復制並粘貼到您的AppDelegate.swift文件中。

UINavigationBar.appearance().barTintColor = .white
UITabBar.appearance().barTintColor = .white

此外，您可以將 colors 更改為自定義的。 它會完美地工作。

Answer 6

檢查所有外觀並將所有外觀的背景顏色更改為您喜歡的顏色。

Answer 7

嘗試更改導航欄的半透明屬性。

self.navigationController?.navigationBar.isTranslucent = false

Answer 8

在您的基本視圖控制器中嘗試此代碼。

這是一個透明的導航欄。

    ///Fix navigation bar color change issue in ios 15
    if #available(iOS 15.0, *) {
        let navigationBarAppearance = UINavigationBarAppearance()
        navigationBarAppearance.configureWithTransparentBackground()
        UINavigationBar.appearance().standardAppearance = navigationBarAppearance
        UINavigationBar.appearance().compactAppearance = navigationBarAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance
    }

Answer 9

只需簡單地將空圖像添加到導航欄背景，如下所示：

 navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
 navigationController?.navigationBar.shadowImage = UIImage()

Answer 10

在一個有同樣問題的項目上，我也為 TabBar 應用了一個解決方案。 在使用情節提要的情況下。

在每個檢查員中，取消選中外觀框。

設置條形色調和可能的背景的自定義顏色。

Answer 11

Go 從 storyboard 到主導航欄，然后顯示“屬性檢查器”，從外觀選項列表中，勾選“標准”並取消勾選其他（緊湊，滾動邊緣..）

然后會出現一組新的選項組，名為“標准外觀”，將“背景”選項編輯為所需的顏色。