Changing Tab Bar Font in Swift

Changing tab bar font in Swift

The UITextAttributeFont was deprecated in iOS 7. You should use the NS variant instead:

import UIKit

let appearance = UITabBarItem.appearance()
let attributes = [NSFontAttributeName:UIFont(name: "American Typewriter", size: 20)]
appearance.setTitleTextAttributes(attributes, forState: .Normal)

swift change tab bar title font

You can change it via the appearance proxy:

let font: UIFont = ...
UITabBarItem.appearance().setTitleTextAttributes([NSFontAttributeName: font], forState: .Normal)

Swift 4:

UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.font: font], for: .normal)

You should put this in your app delegate in func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool

Changing tab bar item image and text color iOS

From UITabBarItem class docs:

By default, the actual unselected and selected images are
automatically created from the alpha values in the source images. To
prevent system coloring, provide images with
UIImageRenderingModeAlwaysOriginal.

The clue is not whether you use UIImageRenderingModeAlwaysOriginal, the important thing is when to use it.

To prevent the grey color for unselected items, you will just need to prevent the system colouring for the unselected image. Here is how to do this:

var firstViewController:UIViewController = UIViewController()
// The following statement is what you need
var customTabBarItem:UITabBarItem = UITabBarItem(title: nil, image: UIImage(named: "YOUR_IMAGE_NAME")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), selectedImage: UIImage(named: "YOUR_IMAGE_NAME"))
firstViewController.tabBarItem = customTabBarItem

As you can see, I asked iOS to apply the original color (white, yellow, red, whatever) of the image ONLY for the UNSELECTED state, and leave the image as it is for the SELECTED state.

Also, you may need to add a tint color for the tab bar in order to apply a different color for the SELECTED state (instead of the default iOS blue color). As per your screenshot above, you are applying white color for the selected state:

self.tabBar.tintColor = UIColor.whiteColor()

EDIT:

Can i only display text in tab bar item and change the style and position

First select the tab bar item in storyboard, than in Attributes Inspector set System Item and Title Position to Custom, so you will be able to change the position of the title by setting values to Horizontal and Vertical boxes.

Finally, to change the font, in your viewDidLoad(), include:

UITabBarItem.appearance().setTitleTextAttributes([NSFontAttributeName: UIFont(name: "Avenir-BlackOblique", size:20)!, NSForegroundColorAttributeName: UIColor.blue], for: .normal)

NSFontAttributeName allow you to change the font style and NSForegroundColorAttributeName allow you to change the font color.

Trouble changing UITabBarItem font

Fetch the items from tabBar and loop through them to set the titleTextAttributes, i.e.

override func viewDidLoad() {
    if let items = self.tabBar.items {
        items.forEach {
            $0.setTitleTextAttributes([
                .font: UIFont.systemFont(ofSize: 10.0, weight: .bold),
                .foregroundColor: UIColor.red
            ], for: .normal)
        }
    }
}

---

Related Topics