How do I change background color of UITabItem when item is selected

问题

I would like a different background color when the user selects a tab bar item than when it is unselected.

回答1:

Put this in the Appdelegate.m in application didFinishLaunchingWithOptions

UIImage *whiteBackground = [UIImage imageNamed:@"whiteBackground"];
[[UITabBar appearance] setSelectionIndicatorImage:whiteBackground];

回答2:

if you use a storyboard or xibs, click "Tab Bar" and add "selectedImageTintColor" path into the Key Path Attributes tag. Like this :

回答3:

UPDATE: As of iOS 7.1 this technique no longer works (if the user taps the same tab twice in succession, the background colour is cleared).

UITabBarItem is a subclass of UIBarItem, everything is more painful because UIBarItem doesn't subclass UIView; however, UITabBarItem contains one. What follows manipulates that view, and therefore might be rejected if submitted to the AppStore.

1) Subclass UITabBarItem

Create a subclass of UITabBarItem and add a new selected property to its header, like so:

@interface ALDTabBarItem : UITabBarItem
@property (nonatomic, assign, getter = isSelected) BOOL selected;
@end

UITabBarItems have a view property, but it isn't exposed. We can extend the class to access it, and then create a custom setter on the selected property to change the background colour, like so:

#import "ALDTabBarItem.h"

@interface ALDTabBarItem (ALD)
@property (nonatomic, strong) UIView *view;
@end

@implementation ALDTabBarItem

- (void)setSelected:(BOOL)selected
{
    if(selected)
        self.view.backgroundColor = [UIColor redColor];
    else
        self.view.backgroundColor = [UIColor clearColor];
} 

@end

2) Update your UITabBarController delegate

Add the following code to the delegate of your UITabBarController, which sets the selected states of the UITabBar:

- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
{
    for(ALDTabBarItem *myItem in tabBar.items)
        myItem.selected = (myItem == item);
}

回答4:

In Swift

UITabBar.appearance().selectionIndicatorImage = UIImage(named: "tabSelected")

with an image tabSelected@2x.png of size 98x98 pixels

回答5:

Follow this Steps:

Create SubClass of UITabBarController
Go to viewDidAppear of UITabBarController subclass

Now Find the size of TabBarItem,

UITabBar *tabBar = self.tabBar;
CGSize imgSize = CGSizeMake(tabBar.frame.size.width/tabBar.items.count,tabBar.frame.size.height);

Now Create the image with that size,

//Create Image
UIGraphicsBeginImageContextWithOptions(imgSize, NO, 0);
UIBezierPath* p =
[UIBezierPath bezierPathWithRect:CGRectMake(0,0,imgSize.width,imgSize.height)];
[[UIColor blueColor] setFill];
[p fill];
UIImage* finalImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Now, Assign this image to TabBar's SelectionIndicatorImage
```
[tabBar setSelectionIndicatorImage:finalImg];
```

Swift 4 Version:

let imgSize = CGSize(width: tabBar.frame.size.width / CGFloat(tabBar.items!.count),
                     height: tabBar.frame.size.height)
UIGraphicsBeginImageContextWithOptions(imgSize, false, 0)
let p = UIBezierPath(rect: CGRect(x: 0, y: 0, width: imgSize.width,
                                  height: imgSize.height))
UIColor.blue.setFill()
p.fill()
let finalImg = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
UITabBar.appearance().selectionIndicatorImage = finalImg

回答6:

My answer is similar to @Mehul Thakkar but it is in Swift 4 and to improve on his answer I would say that if you place the code in viewDidAppear as he suggests users will see the change happening which is not good user experience.

So create the custom class for your tabbar controller and in viewDidLoad place the following code:

let singleTabWidth: CGFloat = self.tabBar.frame.size.width / CGFloat((self.tabBar.items?.count)!)
let singleTabSize = CGSize(width:singleTabWidth , height: self.tabBar.frame.size.height)

let selectedTabBackgroundImage: UIImage = self.imageWithColor(color: .white, size: singleTabSize)
self.tabBar.selectionIndicatorImage = selectedTabBackgroundImage

The imageWithColor function is below for you:

//image with color and size
    func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        context!.setFillColor(color.cgColor)
        context!.fill(rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image!
    }

Hope this helps someone.

回答7:

Please refer below URL's.

Changing Tint / Background color of UITabBar

How To Change Tab bar color in Xcode

hope this will help you..

try this to change tabbar item color but it only work in ios5.

if ([UITabBar instancesRespondToSelector:@selector(setSelectedImageTintColor:)])
{
    [tabBarController.tabBar setSelectedImageTintColor:[UIColor redColor]];
}

回答8:

You can use tintcolor.

[[UITabBar appearance] setSelectedImageTintColor:[UIColor redColor]];

In AppDelegate.m, put the following code after // Override point for customization after application launch.

回答9:

Put this in your AppDelegate.m file:

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
            // Override point for customization after application launch.

            [UITabBar appearance].selectionIndicatorImage = [UIImage imageNamed:@"activeTabBackgroundImage"];


            return YES;
        }