Can't get translucent navigation bar on tableviewcontroller. Works fine with view controller and tableview

Question

I've got a gradient background that I want to show through both the navigation bar and the tab bar. I have them set to "translucent black". If I create a ViewController and put a TableView on it, this works perfectly. However, I can't get it to work properly with a TableViewController. The tab bar works fine, but the navigation bar ends up black. If I turn off "Adjust Scroll View Insets", then the navigation bar looks the way I want it, but the top half of the first table view row gets cut off (see examples). The gradient is on the background view. The background colour of the tableview is clear.

Is there any way to get the same effect on a TableViewController? Do I need to somehow make the heading or first row of the tableview be the background that goes under the nav bar?

ViewController with TableView added:

TableViewController with "Adjust Scroll View Insets" ON:

TableViewController with "Adjust Scroll View Insets" OFF:

Answer 1

After doing a test I think you'd need:

1. Adjusts Scroll View Insets ON
2. Extend Edges - Under Top Bars ON

No. 1 allow the UITableView to cover the entire screen (including under the navigation bar) and No. 2 adds a space at the top of the UITableView content so that the content is not hidden under the navigation bar.

Answer 2

I ran into a similar issue trying to set a full screen background on a static table view controller with a clear navigation bar. I solved it by using a backgroundView on my tableView instead of setting backgroundColor. For example:

myTableView.backgroundView = UIImageView(image: UIImage(named: "backgroundImg.png")) 

I set my navigation bar to clear, but you could style that however you like:

navigationController?.navigationBar.backgroundColor = UIColor.clear

I also had to set Extend Edges - Under Top Bars ON