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

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

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

【问题讨论】:

  • 下面有一些警告,这些方法在 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 
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-02-03
            • 1970-01-01
            • 2013-07-18
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多