更改 UITabBar 的色调/背景颜色

Question

UINavigationBar 和 UISearchBar 都有一个 TintColor 属性，允许您更改这两个项目的色调颜色（我知道令人惊讶）。 我想对应用程序中的 UITabBar 执行相同的操作，但现在找到了将其更改为默认黑色的方法。 有任何想法吗？

Answer 1

我已经能够通过子类化 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

Answer 2

我对最终答案有一个附录。 虽然基本方案是正确的，但使用部分透明颜色的技巧可以改进。 我认为这只是为了让默认渐变显示出来。 哦，还有，TabBar 的高度是 49 像素而不是 48，至少在 OS 3 中是这样。

因此，如果您有一个适当的带有渐变的 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];

}

Answer 3

当您只使用 addSubview 时，您的按钮将失去可点击性，因此不要

[[self tabBar] addSubview:v];

使用：

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

Answer 4

没有简单的方法可以做到这一点，您基本上需要子类化 UITabBar 并实现自定义绘图来完成您想要的操作。 为了达到这样的效果，需要做很多工作，但可能是值得的。 我建议向 Apple 提交错误，以便将其添加到未来的 iPhone SDK 中。

Answer 5

以下是对此的完美解决方案。 这对于我的 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];
}

Answer 6

在 iOS 7 上：

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

我还建议首先根据您的视觉需求进行设置：

[[UITabBar appearance] setBarStyle:UIBarStyleBlack];

栏样式在您的视图内容和选项卡栏之间放置了一个微妙的分隔符。

Answer 7

[[self tabBar] insertSubview:v atIndex:0];
非常适合我。

Answer 8

对我来说，更改选项卡栏的颜色非常简单，例如：-

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


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

试试这个！

Answer 9

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

Answer 10

仅用于背景颜色

Tabbarcontroller.tabBar.barTintColor=[UIColor redcolour];

或应用程序委托中的

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

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

对于 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];
}

iOS 10 以上：

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

Answer 11

现有答案中有一些好的想法，许多想法略有不同，您的选择还取决于您的目标设备以及您想要实现的外观。 UITabBar 在自定义其外观时是出了名的不直观，但这里还有一些技巧可能会有所帮助：

1)。 如果您想去掉光泽覆盖层以获得更平坦的外观，请执行以下操作：

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

2)。 要将自定义图像设置到 tabBar 按钮，请执行以下操作：

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

其中 selected 和 unselected 是您选择的 UIImage 对象。 如果您希望它们是纯色，我发现的最简单的解决方案是创建一个具有所需 backgroundColor 的 UIView ，然后将其渲染为 UIImage 在 QuartzCore 的帮助下。 我在 UIView 的类别中使用以下方法来获取包含视图内容的 UIImage：

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

3) 最后，您可能想要自定义按钮标题的样式。 做：

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];
}

这可以让你做一些调整，但仍然相当有限。 特别是，您无法自由修改文本在按钮内的放置位置，并且无法为选定/未选定的按钮使用不同的颜色。 如果您想做更具体的文本布局，只需将 UITextAttributeTextColor 设置为清晰，并将文本添加到部分 (code>selected 和 unselected 图像中 ( 2）。

Answer 12

[v setBackgroundColor ColorwithRed: Green: Blue: ];

Answer 13

另一个解决方案（这是一个 hack）是将 tabBarController 上的 alpha 设置为 0.01，以便它实际上不可见但仍然可点击。 然后在 MainWindow 笔尖底部设置一个 ImageView 控件，并将您的自定义选项卡栏图像设置在 alpha'ed tabBarCOntroller 下方。 然后，当选项卡控制器切换视图时，交换图像、更改颜色或突出显示。

但是，您会失去“...更多”和自定义功能。

Answer 14

您好，我正在使用 iOS SDK 4，我只需两行代码就可以解决这个问题，就像这样

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

希望这会有所帮助！

Answer 15

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];
}

Answer 16

Swift 3.0 答案：（来自 Vaibhav Gaikwad）

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

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)
        }
}

仅用于更改文本颜色：

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

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

Answer 17

Swift 3 使用 AppDelegate 中的外观执行以下操作：

UITabBar.appearance().barTintColor = your_color

Answer 18

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

您可以使用外观代理来定位应用程序中 UITabBar 的每个实例。

对于 iOS 5 + 6：

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

对于 iOS 7 及更高版本，请使用以下内容：

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

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

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