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

Developer Tools & Services General
VladMaiuga OP
Created
Replies 6
Boosts 0
Views 3k
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:

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:

Answered by VladMaiuga in 700845022

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

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

Picture with detailed view:

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.

Replies  6
Boosts 0
Views  3k
Participants  2
Claude31 OP

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
VladMaiuga OP

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.
Claude31 OP

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:
VladMaiuga OP

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

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

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

Picture with detailed view:

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.
VladMaiuga OP

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?