Swift 2.2 How to change background color of tab bar controller

Question

I've been trying to change the background of the tab bar, and have read many posts here in ObjC, many of them quite old. But I didn't find any for Swift, which is what I'm using.

I finally figured out how to do it from code, so the tab bar colors can be changed with each theme color change. Here are the references that I used:

  override func viewWillAppear(animated: Bool) {
    // set tab bar background color, including the More tab
    self.tabBarController?.tabBar.backgroundColor = UIColor.blueColor()
  }

I put this code in the view controller for the first tab that appears when the app starts up, so that it gets run "first." It works fine as far as I can tell, even when I have 8 tabs and use the More... tab.

And I bound the same code to buttons in various tabs, so I can change the tab bar color from anywhere in my code.

But I confess that as a newbie, I'm not sure that's the best location to change the tab bar color. If this is the wrong place, please correct me.

I post this code here since it would have saved me a few hours, and I hope that it can save someone else some (swift) time.

Solution 1

This is a fine way to change the color of a UITabBar. If you want to avoid setting the color in every viewController that is embedded inside of your UITabBarController, you could also create a subclass of UITabBarController and set it there. This way no matter what page comes up first, the color will be set.

To create a subclass of UITabBarController, just go to file > new > file > cocoa touch class...Then setup your file like in this photo

Now in your storyboard, set the custom class on your tabBarController

Finally, in your file you created MyTabBarController (or whatever you called it):

class MyTabBarController: UITabBarController {

override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)

    self.tabBar.barTintColor = .blueColor()
}
...

Solution 2

Xcode 9

Storyboard

It possible to set background color directly in view controller (currently in TabBarViewController), for this you need to define Key Path. Don't forget to remove background color on nested view, otherwise it will overlap superview's background color.

Comments

[Kevin]

Thanks Jeff, I can see how the subclass method would work. You're saying that I should bind my normal storyboard TabBarController object to a custom MyTabBarController code, where I set the colors. So when the TBC gets loaded, the colors are enforced. (I have no code bound to that controller right now.) That seems like an elegant way to do it, thank you. Could I do the same thing to change colors in a NavBar -- bind the storyboard nav bar to a subclass of UINavigationBar, etc?

[Kevin]

PS. But didn't I read somewhere that someone said the Apple guidelines doc said, "TabBarControllers are not meant to be subclassed"? Would doing so block me from app store acceptance? PPS. Your idea worked like a charm. Thanks

[Jeff Lewis]

I am not aware of any official Apple guidelines against subclassing UITabBarController. I have several apps in the app store that have used this in their implementation. If you read someone saying not to do this, they are most likely just saying that you shouldn't make major modifications in the subclass (like changing the size of the tabBar, or something of that nature)

[Kevin]

Using your exact syntax, the idea works. But in a separate problem, now I see that when I click the More... tab, the colors disappear. I read somewhere here on SO that the More... tab uses a second tab controller/tab bar/table view, so any colors I put on the main tab bar will not carry across to the More... tab bar. Maybe it's easier to just leave it gray, like Apple wants it.

[Jeff Lewis]

Admittedly, I have never implemented a tabBar with a More tab on it, so I am not sure how that works. Have you tried just setting the color of the tabBar under barTint in the storyboard?

[Kevin]

Jeff thanks for taking the time to help me out. I don't want to change the colors in the storyboard, because I want to switch color themes in the app settings as it runs. I think a workaround for me is to put a real tab on the last position, that switches to my own "More..." tabs implementation, with manual segues and navigation. More work, but at least the tab colors won't change. Could you please comment on the "right" way to change colors on a NavBar? I've been struggling with that for days. See my recent post on SO (can't put a link in comments).

[Kevin]

I tried using .tabBar.barTintColor instead of .background color. That worked better, because it solved two problems. First, the bar itself is translucent, so the background color gets washed out by the translucency. (I don't know the syntax to set trans=false (but that didn't help on nav bars at all.) Using barTintColor avoids the translucent issue. Second, using .barTintColor solves the More... tabs problem -- the tint color is carried across to the More... tab bar automatically. So with your kind help, I feel like the tab coloring problem is solved for now. Thanks again.

[Jeff Lewis]

Awesome, glad that I could help