Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tab Bar Button color in Swift 3?

In Swift 2 I used a User Defined Runtime Attribute in Storyboard with a key path of tintColor to change the tab bar item icon colors. However, it looks like tintColor was removed with Swift 3. How can I change the selected color of the tab bar items in a tab bar controller in Swift 3?

Thanks!

EDIT: Attached screenshot

enter image description here

like image 283
winston Avatar asked Sep 08 '16 23:09

winston


People also ask

How do I change the color of my tab bar?

To change tab bar background color in Flutter, first, create a getter to return the TabBar widget and then wrap the TabBar widget inside the PreferredSize -> Material widget. Inside the Material add the color property and set the color of your choice.

How do I create a custom tab bar in Swift?

Implement a view controller that can hold some other view controllers. Show one of those view controllers. Show a tab bar at the bottom of the screen over the shown view controller. Switch between the various view controllers when the user taps on a tab bar button.

How do I add an image to the tab bar in iOS?

iOS UITabBarController Changing Tab Bar Item Title and Icon For a custom icon, add the required images to the assets folder and set the 'System Item' from earlier to 'custom'. Now, set the icon to be shown when the tab is selected from the 'selected image' drop down and the default tab icon from the 'image' drop down.


1 Answers

Use tabBarItem.setTitleTextAttributes to change text color of individual bar items.
Put this in viewDidLoad method of each tab:

self.tabBarItem.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.red()], for:.selected)

To change the icon and text tint color together a simple solution is to change the tabBar tint color in viewWillAppear method of each tab:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    self.tabBarController?.tabBar.tintColor = UIColor.red()
}

Another solution to change the image tint color is to create an extension for UIImage and use it to change the selected image with custom tint:

extension UIImage {
    func tabBarImageWithCustomTint(tintColor: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        let context: CGContext = UIGraphicsGetCurrentContext()!

        context.translate(x: 0, y: self.size.height)
        context.scale(x: 1.0, y: -1.0)
        context.setBlendMode(CGBlendMode.normal)
        let rect: CGRect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)

        context.clipToMask(rect, mask: self.cgImage!)

        tintColor.setFill()
        context.fill(rect)

        var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()

        newImage = newImage.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        return newImage
    }
}

Use this code to change the selected image:

self.tabBarItem.selectedImage = self.tabBarItem.selectedImage?.tabBarImageWithCustomTint(tintColor: UIColor.red())
like image 136
Sam_M Avatar answered Sep 18 '22 10:09

Sam_M