改变UITabBar的色调/背景颜色

The UINavigationBar and UISearchBar both have a tintColor property that allows you to change the tint color (surprising, I know) of both of those items. I want to do the same thing to the UITabBar in my application, but have found now way to change it from the default black color. Any ideas?

UINavigationBar和UISearchBar都有一个tcolor属性，允许您更改这两项的tint颜色(令人惊讶，我知道)。我想对我的应用程序中的UITabBar做同样的事情，但是现在我找到了将它从默认的黑色改为黑色的方法。什么好主意吗?

18 个解决方案

#1

I have been able to make it work by subclassing a UITabBarController and using private classes:

我可以通过子类化UITabBarController并使用私有类来实现:

@interface UITabBarController (private)
- (UITabBar *)tabBar;
@end

@implementation CustomUITabBarController


- (void)viewDidLoad {
    [super viewDidLoad];

    CGRect frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width, 48);
    UIView *v = [[UIView alloc] initWithFrame:frame];
    [v setBackgroundColor:kMainColor];
    [v setAlpha:0.5];
    [[self tabBar] addSubview:v];
    [v release];

}
@end

#2

104

iOS 5 has added some new appearance methods for customising the look of most UI elements.

iOS 5增加了一些新的外观方法来定制大多数UI元素的外观。

You can target every instance of a UITabBar in your app by using the appearance proxy.

通过使用外观代理，您可以针对应用程序中的每个UITabBar实例。

For iOS 5 + 6:

iOS 5 + 6:

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

For iOS 7 and above, please use the following:

对于ios7及以上版本，请使用以下软件:

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

Using the appearance proxy will change any tab bar instance throughout the app. For a specific instance, use one of the new properties on that class:

使用外观代理将在整个应用程序中更改任何选项卡栏实例。对于特定的实例，使用该类上的一个新属性:

UIColor *tintColor; // iOS 5+6
UIColor *barTintColor; // iOS 7+
UIColor *selectedImageTintColor;
UIImage *backgroundImage;
UIImage *selectionIndicatorImage;

#3

I have an addendum to the final answer. While the essential scheme is correct, the trick of using a partially transparent color can be improved upon. I assume that it's only for letting the default gradient to show through. Oh, also, the height of the TabBar is 49 pixels rather than 48, at least in OS 3.

我有最后答案的附录。虽然基本方案是正确的，但是使用部分透明的颜色的技巧可以得到改进。我假设它只是为了让默认梯度显示出来。同样，TabBar的高度是49像素，而不是48像素，至少在OS 3中是这样。

So, if you have a appropriate 1 x 49 image with a gradient, this is the version of viewDidLoad you should use:

所以，如果你有一个合适的1 x 49图像和一个梯度，这是你应该使用的viewDidLoad版本:

- (void)viewDidLoad {

    [super viewDidLoad]; 

    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *v = [[UIView alloc] initWithFrame:frame];
    UIImage *i = [UIImage imageNamed:@"GO-21-TabBarColorx49.png"];
    UIColor *c = [[UIColor alloc] initWithPatternImage:i];
    v.backgroundColor = c;
    [c release];
    [[self tabBar] addSubview:v];
    [v release];

}

#4

When you just use addSubview your buttons will lose clickability, so instead of

当你使用addSubview时，你的按钮会失去点击能力，所以不是。

[[self tabBar] addSubview:v];

use:

使用:

[[self tabBar] insertSubview:v atIndex:0];

#5

Following is the perfect solution for this. This works fine with me for iOS5 and iOS4.

下面是一个完美的解决方案。这对iOS5和iOS4都很好。

//---- For providing background image to tabbar
UITabBar *tabBar = [tabBarController tabBar]; 

if ([tabBar respondsToSelector:@selector(setBackgroundImage:)]) {
    // ios 5 code here
    [tabBar setBackgroundImage:[UIImage imageNamed:@"image.png"]];
} 
else {
    // ios 4 code here
    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *tabbg_view = [[UIView alloc] initWithFrame:frame];
    UIImage *tabbag_image = [UIImage imageNamed:@"image.png"];
    UIColor *tabbg_color = [[UIColor alloc] initWithPatternImage:tabbag_image];
    tabbg_view.backgroundColor = tabbg_color;
    [tabBar insertSubview:tabbg_view atIndex:0];
}

#6

On iOS 7:

在iOS 7:

[[UITabBar appearance] setBarTintColor:[UIColor colorWithRed:(38.0/255.0) green:(38.0/255.0) blue:(38.0/255.0) alpha:1.0]];

I also recommend setting first depending on your visual desires:

我也建议根据你的视觉需求先设定:

[[UITabBar appearance] setBarStyle:UIBarStyleBlack];

The bar style puts a subtle separator between your view content and your tab bar.

bar样式在视图内容和标签栏之间设置了一个微妙的分隔符。

#7

There is no simple way to do this, you basically need to subclass UITabBar and implement custom drawing to do what you want. It is quite a bit of work for the effect, but it may be worth it. I recommend filing a bug with Apple to get it added to a future iPhone SDK.

没有简单的方法可以做到这一点，您基本上需要子类化UITabBar并实现自定义绘图来完成您想要的工作。这是相当大的工作量，但可能是值得的。我建议向苹果提交一个bug，以便将它添加到未来的iPhone SDK中。

#8

[[self tabBar] insertSubview:v atIndex:0]; works perfectly for me.

[[自我tabBar]insertSubview:v atIndex:0];完全适合我。

#9

for me its very simple to change the color of Tabbar like :-

对我来说，改变标签的颜色很简单:-

[self.TabBarController.tabBar setTintColor:[UIColor colorWithRed:0.1294 green:0.5686 blue:0.8353 alpha:1.0]];


[self.TabBarController.tabBar setTintColor:[UIColor "YOUR COLOR"];

Try this!!!

试试这个! ! !

#10

 [[UITabBar appearance] setTintColor:[UIColor redColor]];
 [[UITabBar appearance] setBarTintColor:[UIColor yellowColor]];

#11

for just background color

的背景颜色

Tabbarcontroller.tabBar.barTintColor=[UIColor redcolour];

or this in App Delegate

或者在App委托中

[[UITabBar appearance] setBackgroundColor:[UIColor blackColor]];

for changing color of unselect icons of tabbar

用于改变选项卡栏的未选择图标的颜色

For iOS 10:

iOS 10:

// this code need to be placed on home page of tabbar    
for(UITabBarItem *item in self.tabBarController.tabBar.items) {
    item.image = [item.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}

Above iOS 10:

在iOS 10:

// this need to be in appdelegate didFinishLaunchingWithOptions
[[UITabBar appearance] setUnselectedItemTintColor:[UIColor blackColor]];

#12

There are some good ideas in the existing answers, many work slightly differently and what you choose will also depend on which devices you target and what kind of look you're aiming to achieve. UITabBar is notoriously unintuitive when it come to customizing its appearance, but here are a few more tricks that may help:

在现有的答案中，有一些不错的想法，其中很多的工作方式略有不同，你选择什么也取决于你的目标设备和你想要达到的外观。UITabBar是出了名的不直观，当它定制它的外观时，但是这里有一些技巧可以帮助:

1). If you're looking to get rid of the glossy overlay for a more flat look do:

1).如果你想摆脱光滑的覆盖物，让自己看起来更平整，你可以这样做:

tabBar.backgroundColor = [UIColor darkGrayColor]; // this will be your background
[tabBar.subviews[0] removeFromSuperview]; // this gets rid of gloss

2). To set custom images to the tabBar buttons do something like:

2).将自定义图像设置为tabBar按钮，如:

for (UITabBarItem *item in tabBar.items){
    [item setFinishedSelectedImage:selected withFinishedUnselectedImage:unselected];
    [item setImageInsets:UIEdgeInsetsMake(6, 0, -6, 0)];
}

Where selected and unselected are UIImage objects of your choice. If you'd like them to be a flat colour, the simplest solution I found is to create a UIView with the desired backgroundColor and then just render it into a UIImage with the help of QuartzCore. I use the following method in a category on UIView to get a UIImage with the view's contents:

选择和未选择的是您选择的UIImage对象。如果你想让它们是平的颜色，我找到的最简单的解决方案是创建一个具有所需背景色的UIView，然后在QuartzCore的帮助下将它渲染成UIImage。我在UIView的category中使用下面的方法来获得一个带有视图内容的UIImage:

- (UIImage *)getImage {
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, [[UIScreen mainScreen]scale]);
    [[self layer] renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return viewImage;
}

3) Finally, you may want to customize the styling of the buttons' titles. Do:

最后，您可能需要定制按钮标题的样式。做的事:

for (UITabBarItem *item in tabBar.items){
    [item setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                [UIColor redColor], UITextAttributeTextColor,
                [UIColor whiteColor], UITextAttributeTextShadowColor,
                [NSValue valueWithUIOffset:UIOffsetMake(0, 1)], UITextAttributeTextShadowOffset,
                [UIFont boldSystemFontOfSize:18], UITextAttributeFont,
            nil] forState:UIControlStateNormal];
}

This lets you do some adjustments, but still quite limited. Particularly, you cannot freely modify where the text is placed within the button, and cannot have different colours for selected/unselected buttons. If you want to do more specific text layout, just set UITextAttributeTextColor to be clear and add your text into the selected and unselected images from part (2).

这让您可以做一些调整，但仍然非常有限。特别是，您不能*地修改文本放置在按钮中的位置，也不能为选定的/未选定的按钮设置不同的颜色。如果您想要进行更具体的文本布局，只需将UITextAttributeTextColor设置为clear，并将文本添加到第(2)部分中选中和未选中的图像中。

#13

[v setBackgroundColor ColorwithRed: Green: Blue: ];

#14

Another solution (which is a hack) is to set the alpha on the tabBarController to 0.01 so that it is virtually invisible yet still clickable. Then set a an ImageView control on the bottom of the MainWindow nib with your custom tabbar image underneath the alpha'ed tabBarCOntroller. Then swap the images, change colors or hightlight when the tabbarcontroller switches views.

另一个解决方案(这是一个技巧)是将tabBarController的alpha设置为0.01，这样它实际上是不可见的，但仍然可以单击。然后在主窗口nib的底部设置一个ImageView控件，并在alpha'ed tabBarCOntroller下面设置自定义的tabbar图像。然后交换图像，在tabbarcontroller切换视图时更改颜色或强光。

However, you lose the '...more' and customize functionality.

然而，你失去了……更多的和定制功能。

#15

Hi There am using iOS SDK 4 and i was able to solve this issue with just two lines of code and it's goes like this

大家好，我正在使用iOS SDK 4，我只用两行代码就解决了这个问题

tBar.backgroundColor = [UIColor clearColor];
tBar.backgroundImage = [UIImage imageNamed:@"your-png-image.png"];

Hope this helps!

希望这可以帮助!

#16

if ([tabBar respondsToSelector:@selector(setBackgroundImage:)]) {
    // ios 5 code here
    [tabBar setBackgroundImage:[UIImage imageNamed:@"image.png"]];
} 
else {
    // ios 4 code here
    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *tabbg_view = [[UIView alloc] initWithFrame:frame];
    UIImage *tabbag_image = [UIImage imageNamed:@"image.png"];
    UIColor *tabbg_color = [[UIColor alloc] initWithPatternImage:tabbag_image];
    tabbg_view.backgroundColor = tabbg_color;
    [tabBar insertSubview:tabbg_view atIndex:0];
}

#17

Swift 3.0 answer: (from Vaibhav Gaikwad)

Swift 3.0回答:(来自Vaibhav Gaikwad)

For changing color of unselect icons of tabbar:

改变选项卡的未选择图标的颜色:

if #available(iOS 10.0, *) {
        UITabBar.appearance().unselectedItemTintColor = UIColor.white
    } else {
        // Fallback on earlier versions
        for item in self.tabBar.items! {
            item.image = item.image?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        }
}

For changing text color only:

只适用于更改文字颜色:

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.white], for: .normal)

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.red, for: .selected)

#18

Swift 3 using appearance from your AppDelegate do the following:

使用AppDelegate的外观进行以下操作:

UITabBar.appearance().barTintColor = your_color

UITabBar.appearance()。barTintColor = your_color

#1