Swift & Navigation : Navigation Bar changes its background color when scroll the view

Viewed 7138

I have 2 ViewControllers embedded in a Navigation Controller shown in the picture below.

enter image description here

Every time I scroll through my table item, the navigation background color keeps changing along with the status bar background color.

How do I set the backgroundColor of my navigation bar and status bar programmatically?

enter image description here enter image description here

Code:

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

Paste this to AppDelegate and if you have tab bar also then paste tabbarappearance also it will work.

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
        }

Just use below code. I fixed same issue:

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

For your navigation bar, you will find "Appearance" check both "Standard" and "Scroll edge" Then you will find multiple "Background" attributes in the inspector, change both Backgroungs one under "Standard appearance" section and the other under "Scroll edge appearance" section then it should work properly

Just simply add empty image to the navigationBar background like below:

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

In IOS 15, UINavigationBar uses scrollEdgeAppearance which has a transparent backgroundcolor by default and its triggered when you scroll to view . you need to set a spesific apperance for this like

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

Try change translucent property of navigation bar.

self.navigationController?.navigationBar.isTranslucent = false

Try this code in your base view controller.

This is a transparent navigation bar.

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

On a project with the same problem, I applied a solution also for the TabBar. In the case of using storyboards.

In each inspector uncheck the boxes for Appearances.

Set the custom color for Bar Tint and possibly Background.

Go to the main navigation bar from the storyboard, then show "the attributes inspector", from the appearance options list, tick "standard" and untick others (compact, scroll edge..)

Then a new set of options will appear group named "Standard Appearance", edit the "background" option to the desired color.

enter image description here

Related