CODEWITHSUNDEEP
iphoneiosobjective-cios7
Priyatham51
Priyatham51

Reputation: 1884

How to change tab bar item text color

enter image description here

How can I change the color of "More.." text in tabbar to match with its icon color. (Right now Performance is selected in the tab bar)

I tried to set TitleTextAttributes. 

[moreItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"HelveticaLTStd-Roman" size:10.0f], NSFontAttributeName,  [UIColor yellowColor],NSForegroundColorAttributeName , nil]

But it the text color is always set to yellow. even when the item is selected. Like this enter image description here

I am trying set to white when selected and when unselected it should match with icon color. Thanks.. Any suggestions will be really helpful.

Upvotes: 20

Views: 46440

Answers (13)

Tibin Thomas
Tibin Thomas

Reputation: 1475

You could set the tintcolor and unselectedItemTintColor of UITabBar to change it's appearance.

self.tabBar.tintColor = // Your colour
self.tabBar.unselectedItemTintColor = // Your unselected item colour

Upvotes: 1

Nosov Pavel
Nosov Pavel

Reputation: 1571

Nowadays if your app supports version of iOS less than 13, you should set this colours different ways:

if #available(iOS 13, *) {
    let appearance = UITabBarAppearance()
    appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: .red]
    tabBar.standardAppearance = appearance
} else {
    UITabBarItem.appearance().setTitleTextAttributes(UIColor.red, for: UIControl.State.selected)
}

In code example I set red text color for selected states of UITabBarItem, you may also need to change text color for normal state.

Upvotes: 2

Baran
Baran

Reputation: 2810

Swift 5.1 + iOS 12.4 & iOS 13: 

/// Subclass of `UITabBarController` that is used to set certain text colors for tab bar items.
class TabBarController: UITabBarController {

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        if let items = tabBar.items {
            // Setting the title text color of all tab bar items:
            for item in items {
                item.setTitleTextAttributes([.foregroundColor: UIColor.black], for: .selected)
                item.setTitleTextAttributes([.foregroundColor: UIColor.lightGray], for: .normal)
            }
        }
    }
}

Upvotes: 11

Maruta
Maruta

Reputation: 1091

This worked for me on Swift 5.

In AppDelegate :

 UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor : UIColor.red], for: .selected)

Upvotes: -1

Bruno Paulino
Bruno Paulino

Reputation: 5770

Swift 4:

UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.foregroundColor : UIColor.white], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.foregroundColor : UIColor.red], for: .selected)

Upvotes: 3

Zღk
Zღk

Reputation: 884

This works correctly..

 [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                        [UIColor redColor], NSForegroundColorAttributeName,
                                                       nil] forState:UIControlStateSelected];

    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       [UIColor blackColor], NSForegroundColorAttributeName,
                                                       nil] forState:UIControlStateNormal];

Upvotes: 0

HannahCarney
HannahCarney

Reputation: 3631

Code free way to do this:

If you are just using iOS 10 then you may change the Image Tint in your Tab Bar

enter image description here

If you are also supporting iOS 9 and lower, then you must also add tintColor to your user definer runtime attributes in each tab bar item

enter image description here

if you also wish to change your icon color make sure the correct color image is in your assest folder and change Render as to Original Image

enter image description here

Upvotes: 9

LHIOUI
LHIOUI

Reputation: 3337

Swift version of @skywinder answer : 

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName:UIColor.whiteColor()], forState: .Normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName:UIColor.whiteColor()], forState: .Selected)

Upvotes: 2

Mudith Chathuranga Silva
Mudith Chathuranga Silva

Reputation: 7434

This is the swift version :-

        for item in self.mainTabBar.items! {

          let unselectedItem: NSDictionary = [NSForegroundColorAttributeName: UIColor.whiteColor()]
          let selectedItem: NSDictionary = [NSForegroundColorAttributeName: UIColor.whiteColor()]
          item.setTitleTextAttributes(unselectedItem as? [String : AnyObject], forState: .Normal)
          item.setTitleTextAttributes(selectedItem as? [String : AnyObject], forState: .Selected)

        }

Or you can simply change in Appdelegate :-

 func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.blueColor()], forState: .Selected)
    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.blackColor()], forState: .Normal)
    // Override point for customization after application launch.
    return true
}

Upvotes: 6

PeiweiChen
PeiweiChen

Reputation: 413

This is easy , simply subclass UITabBarItem and assign it to be the class of your tab bar item in either storyboard or code. The below works perfectly for me.

import UIKit

class PPTabBarItem: UITabBarItem {
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    override init() {
        super.init()
        commonInit()
    }

    func commonInit() {
        self.setTitleTextAttributes([NSFontAttributeName: UIFont.systemFontOfSize(13), NSForegroundColorAttributeName:UIColor.blackColor()], forState: UIControlState.Normal)

        self.setTitleTextAttributes([NSFontAttributeName: UIFont.systemFontOfSize(13), NSForegroundColorAttributeName:UIColor.yellowColor()], forState: UIControlState.Selected)
    }
}

skywinder's solution is good but it triggers global scope.

Upvotes: 1

Paul King
Paul King

Reputation: 2001

For a swift solution, let type inference be your friend:

override func viewWillAppear(animated: Bool) {
  for item in self.tabBar.items! {
    let unselectedItem = [NSForegroundColorAttributeName: UIColor.blackColor()]
    let selectedItem = [NSForegroundColorAttributeName: UIColor.whiteColor()]

    item.setTitleTextAttributes(unselectedItem, forState: .Normal)
    item.setTitleTextAttributes(selectedItem, forState: .Selected)
  }
}

Upvotes: 2

skywinder
skywinder

Reputation: 21426

The accepted answer's code not work for me.

Here is code, that works:

    [[UITabBarItem appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName : [UIColor yellowColor] }
                                             forState:UIControlStateNormal];
    [[UITabBarItem appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName : [UIColor whiteColor] }
                                             forState:UIControlStateSelected];

Upvotes: 53

Priyatham51
Priyatham51

Reputation: 1884

I found the answer for my own question.

We can set perforamceItem setTitleTextAttributes: for two different states.

  • forState:UIControlStateNormal
  • forState:UIControlStateHighlighted

I added the following code 

 [performanceItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"HelveticaLTStd-Roman" size:10.0f], NSFontAttributeName,  [UIColor yellowColor], NSForegroundColorAttributeName,nil] forState:UIControlStateNormal];

[performanceItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"HelveticaLTStd-Roman" size:10.0f], NSFontAttributeName,  [UIColor whiteColor], NSForegroundColorAttributeName,nil] forState:UIControlStateHighlighted];

I need to replace the yellow color with the color of my ICONS. This is how they are looking now.

When More is selected

When More is selected

When Performance is Selected

When Performance is Selected

Upvotes: 18

Related Questions