CODEWITHSUNDEEP
iosuitabbaruitabbaritem
clocksmith
clocksmith

Reputation: 6266

Changing selected TabBarItem font iOS

I have a TabBar. I am trying to style it so that the titles on the TabBarItems have different fonts for the normal state and the selected state. For normal state I want Helvetica Neue Light and for the selected state I want Helvetica Neue Medium. No matter what I do, I can't seem to get the fonts to be different for these two states. The color changing works fine. Here is what I currently have:

  // Set the tab bar title appearance for normal state.
  [[UITabBarItem appearance] setTitleTextAttributes:@{
     NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue-Light"
                                          size:16],
     NSForegroundColorAttributeName: [CMK8Colors grayColor]
   }
                                           forState:UIControlStateNormal];

  // Set the tab bar title appearance for selected state.
  [[UITabBarItem appearance] setTitleTextAttributes:@{
     NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue-Medium"
                                          size:16],
     NSForegroundColorAttributeName: [CMK8Colors blueColor]
   }
                                           forState:UIControlStateSelected];

Please help.

Upvotes: 10

Views: 5448

Answers (5)

budiDino
budiDino

Reputation: 13527

Swift 5+

Define your normal and selected attributes:

private let attributesNormal: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 12, weight: .regular),
    .foregroundColor: UIColor.black.withAlphaComponent(0.9)]

private let attributesSelected: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 12, weight: .semibold),
    .foregroundColor: UIColor.black]

Set any color for unselectedItemTintColor. Without this the color defined in attributesNormal won't work. Don't ask me why 🤷

tabBar.unselectedItemTintColor = .black

Then inside your UITabBarController override selectedIndex and selectedViewController:

override var selectedIndex: Int {
    didSet {
        guard let vc = viewControllers[selectedIndex] else { return }
        vc.tabBarItem.setTitleTextAttributes(attributesNormal, for: .normal)
    }
}

override var selectedViewController: UIViewController? {
    didSet {
        viewControllers?.forEach {
            let attributes = $0 == selectedViewController ? attributesSelected : attributesNormal
            $0.tabBarItem.setTitleTextAttributes(attributes, for: .normal)
        }
    }
}

Upvotes: 0

Sonia Casas
Sonia Casas

Reputation: 800

@Acey's Answer is almost perfect, but only change the font after your first selection of a tabBarItem, so when the tabBar is created, it will be created with no different font for the selected tabBarItem in that moment. To achieve that i also add a didSet in selectedIndex variable.

Here's the Complete code (Swift 4.2)

final class TabBarController: UITabBarController {

override var selectedIndex: Int {
    didSet {
        guard let selectedViewController = viewControllers?[selectedIndex] else {
            return
        }
        selectedViewController.tabBarItem.setTitleTextAttributes([.font: UIFont.systemFont(ofSize: 11, weight: UIFontWeightHeavy)], for: .normal)
    }
}

override var selectedViewController: UIViewController? {
    didSet {

        guard let viewControllers = viewControllers else {
            return
        }

        for viewController in viewControllers {

            if viewController == selectedViewController {

                let selected: [NSAttributedString.Key: AnyObject] =
                    [.font: UIFont.systemFont(ofSize: 11, weight: UIFontWeightHeavy)]

                viewController.tabBarItem.setTitleTextAttributes(selected, for: .normal)

            } else {

                let normal: [NSAttributedString.Key: AnyObject] =
                    [.font: UIFont.systemFont(ofSize: 11)]

                viewController.tabBarItem.setTitleTextAttributes(normal, for: .normal)

            }
        }
    }
}

}

Upvotes: 8

stoffen
stoffen

Reputation: 569

@Acey´s answer in Swift 3:

    override var selectedViewController: UIViewController? {
    didSet {

        guard let viewControllers = viewControllers else {
            return
        }

        for viewController in viewControllers {

            if viewController == selectedViewController {

                let selected: [String: AnyObject] =
                    [NSFontAttributeName: UIFont.systemFont(ofSize: 11, weight: UIFontWeightHeavy),
                     NSForegroundColorAttributeName: UIColor.red]

                viewController.tabBarItem.setTitleTextAttributes(selected, for: .normal)

            } else {

                let normal: [String: AnyObject] =
                    [NSFontAttributeName: UIFont.systemFont(ofSize: 11),
                     NSForegroundColorAttributeName: UIColor.blue]

                viewController.tabBarItem.setTitleTextAttributes(normal, for: .normal)

            }
        }
    }
}

Upvotes: 6

Acey
Acey

Reputation: 8098

Good news and bad news.

Bad news, It's a little harder than just using the appearance proxy.

Good news It's not that much harder!

Header

#import <UIKit/UIKit.h>

@interface MYTabbyViewController : UITabBarController

@end

Implementation

#import "MYTabbyViewController.h"

@implementation MYTabbyViewController

-(void)setSelectedViewController:(UIViewController *)selectedViewController
{
    [super setSelectedViewController:selectedViewController];

    for (UIViewController *viewController in self.viewControllers) {
        if (viewController == selectedViewController) {
            [viewController.tabBarItem setTitleTextAttributes:@{
                                                    NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue-Medium" size:16],
                                                    NSForegroundColorAttributeName: [UIColor blueColor]
                                                    }
                                         forState:UIControlStateNormal];
        } else {
            [viewController.tabBarItem setTitleTextAttributes:@{
                                                    NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue-Light" size:16],
                                                    NSForegroundColorAttributeName: [UIColor grayColor]
                                                    }
                                         forState:UIControlStateNormal];
        }
    }
}

The last part you will need is to use this subclass instead of the out-of-the-box UITabBarController. If you are using Storyboards, simply select the TabBarController, go to the Identity Inspector (third subtab in the right panel) and change UITabBarController to MYTabBarController or what have you.

But yeah! Bottom line, just update the ViewController tabBarItem!

Upvotes: 12

hackerinheels
hackerinheels

Reputation: 1141

setSelected and setHighlighted does not work for UIBarButtonItems.

Use UIBarButtonItem's 

- (void)setBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics

Here is the documentation - https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/Reference/Reference.html

Alternatively, use UIButton.

UIButton *myButton = [UIButton buttonWithType: UIButtonTypeRoundedRect];
[myButton setTitle:@"Info" forState:UIControlStateNormal];
[myButton setFont:[UIFont fontWithName:<font name> size:<font size>]];

[myButton setTitleColor:<color>;
myButton =  <frame>;
[myButton addTarget:self.webView action:@selector(<action>:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem * barButtonItem = [[UIBarButtonItem alloc]initWithCustomView:myButton];
[[UIBarButtonItem appearance] setTintColor:<color>;
[self.toolbar setItems:[NSArray arrayWithObjects: spaceItem, barButtonItem, nil]];

Upvotes: 1

Related Questions