更改UITabBar的色调/背景色


87

UINavigationBar和UISearchBar都具有tintColor属性,该属性使您可以更改这两个项目的色彩(令人惊讶的是,我知道)。我想对我的应用程序中的UITabBar做同样的事情,但是现在找到了将其从默认黑色更改的方法。有任何想法吗?


这些是很好的答案。如果允许自动旋转,则将子视图的autoresizingMask设置为具有灵活的边距和大小会很有帮助,否则新背景将不会随着选项卡栏调整大小。
2010年

Answers:


47

通过子类化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

1
这是一个奇怪的解决方案,因为它只是在选项卡栏的顶部放置了一个半透明的棕色矩形。问题在于所有按钮都变成了棕色,而不仅仅是背景。但是,这似乎是迄今为止任何人都提出的最佳选择。
约拿(Jonah),2009年

这是私有API吗?如果我在应用程序中使用了此功能,我会被拒绝吗?
Frank

那里似乎没有任何私人电话
Anthony Main

tabbar属性过去是不可访问的。
康尼比尔

这将修改
标签栏

105

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;

3
不。正如我指出的那样,他们是为iOS 5,你总是可以针对特定版本的条件编译语句:cocoawithlove.com/2010/07/...
imnk

谢谢,这很有帮助:)从来没有听说过这种事情。
Veeru

对于iOS 7,如果要更改背景颜色,请使用[UITabBar外观] setBarTintColor
Zeezer 2014年

34

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

因此,如果您具有合适的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];

}

1
如果要使用背景图片使其美观,请参见:duivesteyn.net/2010/01/16/iphone-custom-tabbar-background-image
oberbaum 2010年

1
我认为它应该是:[[self tabBar] insertSubview:v atIndex:0];
Vibhor Goyal,2010年

我知道答案很旧,但对我有用。因为我需要自定义图像而不是颜色,所以我将您的答案与此条上的色调
-UITabBar


7

没有简单的方法可以执行此操作,基本上,您需要继承UITabBar的子类并实现自定义绘图以执行所需的操作。要达到此效果,需要做很多工作,但这可能是值得的。我建议向Apple提交错误,以将其添加到将来的iPhone SDK中。


4
先生,您有没有用苹果填补虫子?
Sagar R. Kothari,2009年

7

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

tabBarcontroller是什么,它是符合UITabarDelegate的控制器,您能解释一下plz吗?
iCoder

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

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

[[UITabBar appearance] setBarStyle:UIBarStyleBlack];

条形样式在视图内容和标签栏之间放置了细微的分隔符。


5

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


5

对我来说,更改Tabbar的颜色非常简单,例如:

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


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

试试这个!!!


工作正常!+1。
YSR粉丝

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

2

仅用于背景颜色

Tabbarcontroller.tabBar.barTintColor=[UIColor redcolour];

或在App Delegate中

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

1

现有答案中有一些好主意,许多工作略有不同,您选择的内容还取决于您要定位的设备以及要实现的外观。 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)];
}

在哪里selectedunselectedUIImage您所选择的对象。如果您希望它们是纯色,我发现的最简单的解决方案是UIView使用所需的颜色创建一个,backgroundColor然后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为清晰,然后将文本添加到第(2)部分的selectedunselected图片中即可。



0

另一个解决方案(这是一种技巧)是将tabBarController上的Alpha设置为0.01,以使其实际上不可见但仍可单击。然后在MainWindow笔尖的底部设置一个ImageView控件,并将自定义标签栏图像放在alpha'ed tabBarCOntroller下方。当TabbarController切换视图时,然后交换图像,更改颜色或突出显示。

但是,您将失去“ ...更多”并自定义功能。


0

嗨,我正在使用iOS SDK 4,我仅用两行代码就可以解决此问题,就像这样

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

希望这可以帮助!


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

0

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)

0

使用外观从Swift 3 AppDelegate执行以下操作:

UITabBar.appearance().barTintColor = your_color

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.