Hi all,
I’ve been trying to pin down why the initial ViewController in my TBVC is coloured differently to the rest. I suspect a view is covering the second two tabs or something, but but I haven’t been able to pin it down. All three look exactly the same in the storyboard. Any ideas on where I could look? I’m using UIKit, not SwiftUI.
Here’s a picture of the first and second and tab. The first is what I want across all of them. There are only three tabs all up.
What you are seeing seems to be the standard way a TabBar appears nowadays. If there is content in the item1 View that fills the entire screen, such as a list of data, then you get the greyed out bar at the bottom. If any of the other selected Tab views do not currently have content that extends beyond the bottom of the View then the greyed out bar becomes clear.
Hey thanks. The funny thing is that none of them have content that extends beyond the bottom of the view. I’ll play around a bit and see what I can work out. I’ll try filling the screen with a transparent view.
What code do you have specified in each of the 3 ViewController other than the basic:
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
As an exercise, I created a Tabbed App in UIKit with 3 tabs as per this screenshot.
The second and third View Controllers have no code other than the default code with a backgroundColor added so you know you have selected a different Tab.
The FirstViewController has the following code:
import UIKit
class ViewControllerOne: UIViewController, UITableViewDelegate, UITableViewDataSource {
@IBOutlet weak var tableView: UITableView!
var tableData: [String] {
var arr = [String]()
for i in 1...50 {
arr.append("Row \(i)")
}
return arr
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
tableView.delegate = self
tableView.dataSource = self
tableView.backgroundColor = .systemBlue
tableView.layer.opacity = 0.5
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return tableData.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if let cell = tableView.dequeueReusableCell(withIdentifier: "Cell") {
let item = tableData[indexPath.row]
cell.textLabel?.text = item
cell.detailTextLabel?.text = "Just some random text \(indexPath.row + 1)"
cell.backgroundColor = .systemBlue
cell.layer.opacity = 0.5
return cell
}
return UITableViewCell()
}
}
which is a simple tableView with 50 rows of data via the computed variable tableData and some color just to show the effect when scrolling the data to the end.
When the App is run on the simulator the first tab is visible and you can see that the tabBar color is white since there is more data below.
When the data is scrolled up so that the last row is visible the tabBar background changes to the view.backgroundColor (systemBlue with an opacity of 0.5)
There is a way to stop the TabBar from being translucent but that might not suit you. In SceneDelegate, add the code:
UITabBar.appearance().isTranslucent = false
just after the
guard let _ = (scene as? UIWindowScene) else { return }
The tabBar background will default to black so you could add the following lines of code below the above which gives the tabBar a consistent color.
UITabBar.appearance().unselectedItemTintColor = .systemGray
UITabBar.appearance().backgroundColor = .systemGray6
See how you go.
Thanks heaps. That is my issue. I have 2 ViewControllers item1, item2, and a TableViewController, item3. I have a tableView in item1 and that’s the culprit. Your code in the Scene method will suit me, it’s an easy way to get a uniform look across the tabbar, but interestingly it didn’t fully fix the problem. It’s better, but still not quite right. When the tablview scrolls down there is still a change in the shading, although much less pronounced. I’m thinking that using a different colour in the tableview will probably fix it.