UITabBar 中的自定义颜色答案

【问题标题】：Custom colors in UITabBarUITabBar 中的自定义颜色
【发布时间】：2010-10-15 02:18:36
【问题描述】：

是否可以在 UITabBar 中使用自定义颜色和背景图像？我知道 Apple 希望每个人都使用相同的蓝色和灰色标签栏，但有什么方法可以自定义吗？

其次，即使我要创建自己的类似于 TabBar 的视图控制器以及自定义图像，这会违反 Apple 的人机界面指南吗？

【问题讨论】：

可能重复：stackoverflow.com/questions/1355480/…
下面有一些警告，这些方法在 Apple 的规则方面有些风险……您能确认其中任何一种方法已成功获得 AppStore 的批准吗？

标签： iphone objective-c

【解决方案1】：

我在Silent Mac Design 找到了答案。

我是这样实现的：

首先创建一个UITabBarContoller的子类

// CustomUITabBarController.h

#import <UIKit/UIKit.h>

@interface CustomUITabBarController: UITabBarController {
  IBOutlet UITabBar *tabBar1;
}

@property(nonatomic, retain) UITabBar *tabBar1;

@end

// CustomUITabBarController.m

#import "CustomUITabBarController.h"

@implementation CustomUITabBarController

@synthesize tabBar1;

- (void)viewDidLoad {
  [super viewDidLoad];

  CGRect frame = CGRectMake(0.0, 0, self.view.bounds.size.width, 48);

  UIView *v = [[UIView alloc] initWithFrame:frame];

  [v setBackgroundColor:[[UIColor alloc] initWithRed:1.0
                                               green:0.0
                                                blue:0.0
                                               alpha:0.1]];

  [tabBar1 insertSubview:v atIndex:0];
  [v release];
}

@end

并在您的 Nib 文件中将 TabBar 控制器的类替换为 CustomUITabBarController。

【讨论】：

这对我进行了以下更改：我继承了 UITabBar 而不是 UITabBarController，我覆盖了 -drawRect:(CGRect)rect 而不是 -viewDidLoad，并且我将我的色调 UIView 作为 self 的子视图。
这根本没有效果。此外，Mac Design 似乎已不复存在。这个答案应该检查不正确...
虽然这可行，但 Apple 在他们的文档中明确表示不要继承 UITabBarController。因此，风险自负。

【解决方案2】：

仅供参考，从 iOS 5 开始，您可以自定义 UITabBar 的各个方面，包括使用 backgroundImage 属性设置其背景图像。

iOS 5 中新的UITabBar“自定义外观”属性是：

backgroundImage 
selectedImageTintColor  
selectionIndicatorImage  
tintColor

鉴于 Apple 在 iOS 5 中引入了这些方法，那么他们可能会更赞同为早期操作系统自定义 UITabBar 的尝试。这个website 说 Twitter 应用程序使用自定义标签栏，所以这可能是 Apple 让这样的应用程序进入 App Store 的更多原因，但不能保证！

【讨论】：

鉴于 iOS5 现在如此普及，这确实是唯一明智的做法。

【解决方案3】：

使用以下图片（假设 tabBar 有 5 个选项卡，如下所示）

使用“TabBar Application”模板创建一个新项目并放置以下代码。

AppDel.h 文件的内容。

#import <UIKit/UIKit.h>

@interface cTabBarAppDelegate : NSObject <UIApplicationDelegate, UITabBarControllerDelegate> {

}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;
@property (nonatomic, retain) IBOutlet UIImageView *imgV;

@end

AppDel.m 文件的内容。

#import "cTabBarAppDelegate.h"

@implementation cTabBarAppDelegate
@synthesize window=_window;
@synthesize tabBarController=_tabBarController;
@synthesize imgV = _imgV;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.tabBarController.delegate=self;
    self.imgV.frame=CGRectMake(0, 425, 320, 55);
    [self.tabBarController.view addSubview:self.imgV];
    self.tabBarController.selectedIndex=0;
    self.window.rootViewController = self.tabBarController;
    [self.window makeKeyAndVisible];
    return YES;
}

- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController{
    NSUInteger index=[[tabBarController viewControllers] indexOfObject:viewController];
    switch (index) {
        case 0:
            self.imgV.image=[UIImage imageNamed:@"tBar1.png"];
            break;
        case 1:
            self.imgV.image=[UIImage imageNamed:@"tBar2.png"];
            break;
        case 2:
            self.imgV.image=[UIImage imageNamed:@"tBar3.png"];
            break;
        case 3:
            self.imgV.image=[UIImage imageNamed:@"tBar4.png"];
            break;
        case 4:
            self.imgV.image=[UIImage imageNamed:@"tBar5.png"];
            break;
        default:
            break;
    }
    return YES;
}

【讨论】：

@Senthil - 我添加图像的方式，我们也可以在图像上添加更多标签。

【解决方案4】：

在 ***ViewController.m 开头添加以下内容可能有助于设置 UITabBar 的背景图片。


@implementation UITabBar (CustomImage)
- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed: @"background.png"];
    [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

【讨论】：

不错的方法，但它替换了整个标签栏的背景，您没有机会更改标签栏图标的颜色？

【解决方案5】：

如果您想为图标（而不仅仅是背景）使用自定义颜色而不是默认的灰色和蓝色，请这样做：http://blog.theanalogguy.be/2010/10/06/custom-colored-uitabbar-icons/

基本上，您需要为每个选定的标签创建完整的标签栏图像（背景和图标和文本），并将您的 UITabBarItems 设置为无图标和无标题，并将图像作为 viewWillAppear 中的 UIImageView 插入标签栏：

Apple 不会介意，因为我们没有使用任何私有 API。

【讨论】：

【解决方案6】：

从 iOS 7.0 开始，您可以使用 -[UIImage imageWithRenderingMode:] 和 UIImageRenderingModeAlwaysOriginal 来保留颜色：

// Preserve the colors of the tabs.
UITabBarController *controller = (UITabBarController *)((UIWindow *)[UIApplication sharedApplication].windows[0]).rootViewController;

NSArray *onIcons = @[ @"tab1-on", @"tab2-on", @"tab3-on" ];
NSArray *offIcons = @[ @"tab1-off", @"tab2-off", @"tab3-off" ];
NSArray *items = controller.tabBar.items;
for (NSUInteger i = 0; i < items.count; ++i) {
    UITabBarItem *item = items[i];
    item.image = [[UIImage imageNamed:offIcons[i]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    item.selectedImage = [[UIImage imageNamed:onIcons[i]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}

像魅力一样工作。

【讨论】：

很好的答案！更好的是，您可以在 Assets 文件夹中设置图像的渲染模式，而无需一行代码...

【解决方案7】：

在 AppDelegate.m 中

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[[UITabBar appearance] setSelectedImageTintColor:[UIColor redColor]];
return YES;
}

【讨论】：

【解决方案8】：

就 UITabBar 类而言，栏中的图标仅限于颜色：蓝色表示选中，灰色表示未选中。这是因为标签栏仅使用您提供的图标中的 alpha 值在栏上创建图像。

据我所知，条本身仅限于黑色。我在文档中没有看到 UINavigationBar 上的“色调”属性之类的东西。

我想你可以继续创建你自己的标签栏样式类并用它做你想做的事，但我完全不知道它如何适合 Apple 的 HIG，或者他们是否会在审查过程。

根据我的经验，如果我没有根据 HIG 使用他们的 UI 元素，Apple 审阅者只会拒绝我的应用程序。当您玩的是您自己的 UI 元素时，它们可能会有不同的视图。

【讨论】：

UInavigationBar 有一个 tint 属性 self.navigationController.navigationBar.tintColor = [UIColor grayColor];
如果您阅读了我的回答，我不是在谈论 UINavigationBar。我说的是 UITabBar，以及 it 没有像导航栏那样的 tint 属性。 - 1 给你，先生。

【解决方案9】：

这里的文档说我们不能用我们的图标改变按下或选择的外观。

https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1

在标题下导航栏、工具栏和标签栏的图标

【讨论】：

【解决方案10】：

不添加任何子视图也可以。

在定义标签栏的类中设置 tabBarItem 到 ->>

UITabBarItem *tabBarItem1 = [[self.tabBar.tabBar items] objectAtIndex:0];
[tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"campaigns_hover.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"campaigns.png"]];

它是 tabBarItem 的一个属性，你可以将默认的蓝色图像更改为自定义图像。 campaign_hover.png 是选定的自定义图像和 campaigns.png 是未选中时的自定义图片...

享受秘密.. :)

【讨论】：

这只是iOS5及以上，不是iOS4吗？

【解决方案11】：

以下代码可帮助您将具有 RGB 值的自定义颜色添加到您的 tabBar。

self.tabBarController.tabBar.tintColor = [[UIColor alloc] initWithRed:0.00
                                                                green:0.62
                                                                 blue:0.93
                                                                alpha:1.0];

【讨论】：

【解决方案12】：

不用-insertSubview:atIndex 也可以这样做，因为不需要新的 UIView。您可以在每个视图（UITabBar 及其子视图）上使用 QuartzCore 应用主题。因此，UITabBar 的背景被添加，正如我所描述的here。

现在我们必须在每个 UITabBarItem 上应用图像作为它的背景：

    // UITabBar+CustomItem.h
    #import <UIKit/UIKit.h>
    #import <QuartzCore/QuartzCore.h>

    @interface UITabBar (CustomItem)
    -(void)setSelectedItemBackground:(UIImage *)backgroundImage;
    @end

现在是 .m 文件：

    // UITabBar+CustomItem.m

    @implementation UITabBar (CustomItem)

    #define kItemViewTag      445533  // <-- casual number
    #define kItemViewOldTag   445599  // <-- casual number different from the above

    -(void)setSelectedItemBackground:(UIImage *)backgroundImage   {
        UIView *oldView = [self viewWithTag:kImageViewItemTag];
        oldView.layer.contents = nil;  // <-- remove the previous background
        oldView.tag = kItemViewOldTag;  // <-- this will avoid problems

        NSUInteger index = [self.items indexOfObject:self.selectedItem];
        UIView *buttonView = [self.subviews objectAtIndex:index];
        buttonView.tag = kItemViewTag;
        buttonView.layer.contents = (id)backgroundImage.CGImage;  // <-- add 
        // the new background
    }

    @end

您还可以更改所选图像的颜色，就像某人制作的 here。但我想知道的是：我可以更改所选标签的颜色吗？答案是肯定的，如下所述（以下适用于 ios 3.x/4.x，不适用于 iOS5+）：

    @implementation UITabBar (Custom)

    #define kSelectedLabel  334499  // <-- casual number        

    -(void)changeCurrentSelectedLabelColor:(UIColor *)color  {
        UIView *labelOldView = [self viewWithTag:kSelectedLabel];
        [labelOldView removeFromSuperview];

        NSString *selectedText = self.selectedItem.title;
        for(UIView *subview in self.subviews)  {
            if ([NSStringFromClass([subview class]) 
                      isEqualToString:@"UITabBarButton"])  {
                for(UIView *itemSubview in subview.subviews)  {
                    if ([itemSubview isKindOfClass:[UILabel class]])  {
                         UILabel *itemLabel = (UILabel *)itemSubview;
                         if([itemLabel.text isEqualToString:selectedText])  {
                              UILabel *selectedLabel = [[UILabel alloc]
                                               initWithFrame:itemLabel.bounds];
                              selectedLabel.text = itemLabel.text;
                              selectedLabel.textColor = color;
                              selectedLabel.font = itemLabel.font;
                              selectedLabel.tag = kSelectedLabel;
                              selectedLabel.backgroundColor = [UIColor clearColor];
                              [itemSubview addSubview:selectedLabel];
                              [selectedLabel release];
                         }
                    }
                }

            }
        }
    }

    @end

【讨论】：