Changing colour of navigation bar

I am trying to change the background colour of the navigation bar but am having trouble:

let colourRGBs: [[CGFloat]] = [[247, 247, 247], [38, 123, 238], [93, 204, 3]]
let colourTitles: [String] = ["Default", "Blue", "Green"]

override func viewDidLoad()
super.viewDidLoad()

// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false

// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem


override func didReceiveMemoryWarning()
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.


// MARK: - Table view data source

override func numberOfSections(in tableView: UITableView) -> Int
// #warning Incomplete implementation, return the number of sections
return 1


override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
// #warning Incomplete implementation, return the number of rows
return colourTitles.count



override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
let cell = tableView.dequeueReusableCell(withIdentifier: "PickNavBarColourCell", for: indexPath) as! PickNavBarColourCell
let RGB = colourRGBs[indexPath.row]
cell.backgroundColor = UIColor(red: RGB[0]/255.0, green: RGB[1]/255.0, blue: RGB[2]/255.0, alpha: 1.0)
cell.configureCell(text: colourTitles[indexPath.row])
if indexPath.row == passOnNavBarColour.colour
cell.accessoryType = UITableViewCellAccessoryType.checkmark

else
cell.accessoryType = UITableViewCellAccessoryType.none


return cell


override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
UserDefaults.standard.set(indexPath.row, forKey: "NavBarColour")
passOnNavBarColour.colour = indexPath.row
tableView.reloadData()
let RGB = colourRGBs[indexPath.row]
self.navigationController?.navigationBar.backgroundColor = UIColor(red: RGB[0]/255.0, green: RGB[1]/255.0, blue: RGB[2]/255.0, alpha: 1.0)


override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
return 44



When I do this for blue for example, this is the result:

It is a lot fainter than it should be.

I have tried the following code with:

self.navigationController?.navigationBar.isTranslucent = false


which I run before setting the cells background colour

self.navigationController?.navigationBar.backgroundColor = UIColor(red: RGB[0]/255.0, green: RGB[1]/255.0, blue: RGB[2]/255.0, alpha: 1.0)


however this results in no colour change whatsoever.

How do I resolve this?

3 Answers
3

Use navigationBar.barTintColor

navigationBar.barTintColor

From Apple's Document: https://developer.apple.com/documentation/uikit/uinavigationbar/#1654191

You can specify a custom tint color for a navigation bar background using the barTintColor property. Setting this property overrides the default color inferred from the bar style. As with all UIView subclasses, you can control the color of the interactive elements within navigation bars, including button images and titles, using the tintColor property.

Could not change navigationBar.backgroundColor, because it is hidden by a few views.
You can see the view hierarchy by a break point.

navigationBar.backgroundColor

You can add this simple line in didFinishLaunchingWithOptions in AppDelegate

didFinishLaunchingWithOptions

AppDelegate

UINavigationBar.appearance().barTintColor = UIColor.blue


Navigation Bar:

navigationController?.navigationBar.barTintColor = UIColor.green


Replace greenColor with whatever UIColor you want, you can use an RGB too if you prefer.

Navigation Bar Text:

navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.orange]


Replace orangeColor with whatever color you like.

Tab Bar:

tabBarController?.tabBar.barTintColor = UIColor.brown


Tab Bar Text:

tabBarController?.tabBar.tintColor = UIColor.yellow


On the last two, replace brownColor and yellowColor with the color of your choice.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.