Get Tab Bar Items to load as coloured pictures and not greyed out pictures

Question

Created Jan ’22

Replies 6

Boosts 0

Views 2.9k

Participants 2

Morning ya'll. I've designed a tab bar and managed to customise it with custom tab bar items but i can't figure out how you get the tab bar items to load in their original picture color when view is loaded. My code looks like this:




class GamePage: UIViewController {



    override func viewDidLoad() {

        super.viewDidLoad()

        tabBarItem.image = tabBarItem.image?.withRenderingMode(.alwaysOriginal)

                 tabBarItem.selectedImage = tabBarItem.selectedImage?.withRenderingMode(.alwaysOriginal)

        

    }

which gives this outcome:

Screenshot 2022-01-09 at 01.02.19.png

after clicking on the tab bar items i get the desired effect, but what i want is when the app launches and the first view is loaded to have the tab bar items in color like so:

Screenshot 2022-01-09 at 01.02.52.png

Boost

Answer 1

Claude31 OP

Jan ’22

You should find answer here: forbid gray color when unselected:

https://stackoverflow.com/questions/31117069/changing-tab-bar-item-image-and-text-color-ios

Add the changes at the end of viewDidLoad

0

Answer 2

VladMaiuga OP

Jan ’22

Thank you for your answer Claude31, but if you look at my code it does what is suggested on stackoverflow but in a more succint form. It does fix the problem for the first view aka in my app Home, but the rest, because they haven't been loaded yet stay greyed out.

0

Answer 3

Claude31 OP

Jan ’22

UPDATED.

How to do it programatically that's still a mystery, but if I find a solution I'll place it here.

I tested this and it works.

I subclassed UITabBarController.

In viewDidLoad, I set the tabBarItems (here with system icons).

They are no more dimmed when unselected:

class TabBarViewController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        
        if let bookViewController = self.viewControllers?[0] {
            let customTabBarItem = UITabBarItem(title: "Pencil", image: UIImage(systemName: "pencil.tip.crop.circle")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal), selectedImage: UIImage(systemName: "pencil.tip.crop.circle"))
            bookViewController.tabBarItem = customTabBarItem
        }
        
        if let bookViewController = self.viewControllers?[1] {
            let customTabBarItem = UITabBarItem(title: "Share", image: UIImage(systemName: "shareplay.slash")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal), selectedImage: UIImage(systemName: "shareplay.slash"))
            bookViewController.tabBarItem = customTabBarItem
        }

        if let bookViewController = self.viewControllers?[2] {
            let customTabBarItem = UITabBarItem(title: "Books", image: UIImage(systemName: "book")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal), selectedImage: UIImage(systemName: "book"))
            bookViewController.tabBarItem = customTabBarItem
        }

        // Nothing for item 3, on purpose to see difference
    }
    
}

Here is the TabBar at launch:

Note the difference for Person tab.

Here is IB definition in this example:

2

Answer 4

VladMaiuga OP

Jan ’22

Sorry Claude, that piece of code doesn't affect the Xcode default behaviour.

0

Answer 5

VladMaiuga OP

Jan ’22

Accepted Answer

Guys my solution got answered on Stackoverflow and it goes like this so we have a copy here for posterity:

got to assets folder in Xcode
select the images to be have their properties changed
in the inspector on the right side change the Render As value to original

Picture with detailed view:

Screenshot 2022-01-09 at 12.08.16.png

How to do it programatically that's still a mystery, but if I find a solution I'll place it here.

PS: if somebody has the programatic solution please post here and don't consider this thread closed yet.

3

Answer 6

VladMaiuga OP

Jan ’22

CLAUDE YOUR UPDATED PROGRAMATIC SOLUTION WORKS PERFECTLY, YOU'RE A GENIUS!

PS: the only note I want to make for others, is if you have custom images as tab bar icons you access them with imageLiteralResourceName like so:

if let handMassage = tabBarController!.viewControllers?[1] {

            let customTabBarItem = UITabBarItem(title: "Hand Massage", image: UIImage(imageLiteralResourceName: "Hand Massage Logo").withRenderingMode(UIImage.RenderingMode.alwaysOriginal), selectedImage: UIImage(imageLiteralResourceName: "Hand Massage Logo"))

            handMassage.tabBarItem = customTabBarItem

        }

also depending on your art board setup you may need to access the view controller via tabBarController!.viewControllers?

2