Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IOS 8 Tab Bar Item Background Colour

Tags:

I've been trying to find the solution to this for the last week, and I have had no luck after trying every possible solution I could find or think of. Every solution I found and have attempted has either not worked, or been outdated.

I have 5 UITabBarItem's in a UITabBar placed within UITabBarController. I want to change the background color of the UITabBarItem when it is selected, and of course have it change back when the selected item changes.

I am using Swift, and iOS SDK 8.3 in Xcode 6.3.1. If you can only answer in Objective-C that is fine too, any answer will help! Thank you all in advance, I really appreciate it!

EDIT: Here is a visual example of what I would want it to do.

Different Background Color

like image 875
user2985289 Avatar asked May 04 '15 22:05

user2985289


People also ask

How do I change the background color of a 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 change the background color of a tab bar in Swift?

backgroundColor = UIColor(red:1, green:0, blue:0, alpha:1) / UITabBar. appearance(). tintColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1) // New!! func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {...}


1 Answers

In your tabBarController, you can set the default UITabBar tintColor, barTintColor, selectionIndicatorImage (cheating a bit here) and renderingMode of the images, see comments below:

    class MyTabBarController: UITabBarController, UINavigationControllerDelegate {
      ...
      override func viewDidLoad() {
        ...
        // Sets the default color of the icon of the selected UITabBarItem and Title
        UITabBar.appearance().tintColor = UIColor.redColor()

        // Sets the default color of the background of the UITabBar
        UITabBar.appearance().barTintColor = UIColor.blackColor()

        // Sets the background color of the selected UITabBarItem (using and plain colored UIImage with the width = 1/5 of the tabBar (if you have 5 items) and the height of the tabBar)
        UITabBar.appearance().selectionIndicatorImage = UIImage().makeImageWithColorAndSize(UIColor.blueColor(), size: CGSizeMake(tabBar.frame.width/5, tabBar.frame.height))

        // Uses the original colors for your images, so they aren't not rendered as grey automatically.
        for item in self.tabBar.items as! [UITabBarItem] {
          if let image = item.image {
            item.image = image.imageWithRenderingMode(.AlwaysOriginal)
          }
        }
      }
      ...
    }

And you will want to extend the UIImage class to make the plain colored image with the size you need:

extension UIImage {
  func makeImageWithColorAndSize(color: UIColor, size: CGSize) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(CGRectMake(0, 0, size.width, size.height))
    var image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
  }
}
like image 111
Gwendle Avatar answered Nov 10 '22 01:11

Gwendle