How to change background color for tab in tvOS 13?

Question

TvOS 13. I have a UITabBarController with tabs. And can customize almost everything except this obvious thing: focused tab's background. It's always white. Guide tells

Specify tints for selected and unselected items

I tried:

view.backgroundColor = .purple
tabBar.tintColor = .yellow
tabBar.barTintColor = .red
tabBar.unselectedItemTintColor = .brown
tabBar.backgroundColor = .green
tabBar.backgroundImage = UIColor.blue.toImage()
tabBar.shadowImage = UIColor.orange.toImage()
tabBar.selectionIndicatorImage = UIColor.burgundy.toImage()

Nothing helped.

I found a workaround (not perfect). I would write it if somebody needs. — Nike Kov, Oct 10 '19 at 11:10
I found a different way in the end (the intended way), posted it in the answers section — davidv, Oct 22 '19 at 08:26

score 5 · Answer 1 · answered Oct 22 '19 at 08:24

5

After playing a bit with various properties of UITabBar and UITabBarController, I finally figured it out.

The property to change focused items background color is selectionIndicatorTintColor of UITabBarAppearance (documentation).

Since it is available on tvOS >= 13.0, you will have to wrap the assignment like this:

if #available(tvOS 13.0, *) {
    tabBar.standardAppearance.selectionIndicatorTintColor = .white
}

answered Oct 22 '19 at 08:24

davidv

373
5
14

Thanks but is there a way to change the color of the selected, but unfocused, tabBarItem too? Like the extra dark blue at the top image. – PhoenixB Apr 07 '20 at 22:17

Nike Kov · Accepted Answer · 2019-11-05T14:03:52.263

For @davidv and other folks, here is my solution:

extension UIView {
    func subviews<T:UIView>(ofType type: T.Type) -> [T] {
        var result = self.subviews.compactMap { $0 as? T }
        for sub in self.subviews {
            result.append(contentsOf: sub.subviews(ofType: type))
        }
        return result
    }
}

extension UIViewController {
    override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
        // перекраска кнопки
        let allSubviews = tabBar.subviews(ofType: UIView.self)
        let whiteSubviews = allSubviews.filter { $0.backgroundColor == .white }
        for s in whiteSubviews {
            s.backgroundColor = .gold
        }
    }
}

UPDATE:

For coloring text:

item.setTitleTextAttributes([NSAttributedString.Key.font: font, NSAttributedString.Key.foregroundColor: colorSelected], for: [.focused])
item.setTitleTextAttributes([NSAttributedString.Key.font: font, NSAttributedString.Key.foregroundColor: colorSelected], for: [.highlighted])
item.setTitleTextAttributes([NSAttributedString.Key.font: font, NSAttributedString.Key.foregroundColor: colorUnselected], for: [.normal])

For coloring background:

tabBar.standardAppearance.selectionIndicatorTintColor = .gold

score 0 · Answer 3 · answered Nov 06 '19 at 15:09

I accomplish this through a UITabBar extension. The view that is displayed on focus contains a UIMotionEffect so we check against that to find it.

@available(tvOS 13.0, *)
extension UITabBar {

    var focusBackgroundView: UIView? {
        let allSubviews: [UIView] = subviews.flatMap { [$0] + $0.subviews as [UIView] }
        return allSubviews.first{ !$0.motionEffects.isEmpty }
    }

}

Usage:

myTabBar.focusBackgroundView.backgroundColor = .red

How to change background color for tab in tvOS 13?

3 Answers3

Linked