Benutzerdefinierte Farben in UITabBar

Question

Ist es möglich, benutzerdefinierte Farben und Hintergrundbilder in einer UITabBar zu verwenden? Mir ist klar, dass Apple gerne die gleichen blauen und grauen Tabstopps verwenden würde, aber gibt es eine Möglichkeit, dies anzupassen?

Zweitens, selbst wenn ich meinen eigenen TabBar-ähnlichen View-Controller zusammen mit benutzerdefinierten Bildern erstellen würde, würde dies verletzen Apples Human Interface Guidelines?

Answer 1

Ich habe eine Antwort gefunden auf Silent Mac Design.

implementiert ich auf diese Weise:

zuerst eine Unterklasse von UITabBarContoller

mit CustomUITabBarController

// 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 

Und in Ihrer Nib-Datei ersetzt die Klasse Ihrer TabBar-Controller machen.

Answer 2

Für die UITabBar-Klasse sind die Symbole in der Leiste auf die Farben beschränkt: blau für ausgewählt und grau für nicht ausgewählt. Dies liegt daran, dass die Tab-Leiste nur den Alpha-Wert der von Ihnen bereitgestellten Symbole verwendet, um das Bild auf der Leiste zu erstellen.

Die Bar selbst ist begrenzt auf schwarz, soweit ich mich erinnern kann. Ich habe in den Dokumenten in der UINavigationBar noch nichts wie die Eigenschaft 'Tint' gesehen.

Ich denke, Sie könnten weitermachen und Ihre eigene Tab-Bar Stil-Klasse erstellen und tun, was Sie damit wollen, aber ich habe absolut keine Ahnung, wie das mit Apples HIG passt, oder ob sie es während herausfordern würden der Überprüfungsprozess.

Meiner Erfahrung nach haben Apple-Rezensenten meine App nur abgelehnt, wenn ich ihre UI-Elemente nicht entsprechend der HIG verwendet habe. Sie haben möglicherweise eine andere Ansicht, wenn Sie mit Ihren eigenen UI-Elementen spielen.

Answer 3

Zu Beginn von *** ViewController.m fügen Sie die folgenden möglicherweise helfen Hintergrundbild von UITabBar gesetzt.

@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 

Answer 4

Hier ist das Dokument, das sagt, dass wir nicht gepresst oder ausgewählte Aussehen mit unseren Symbolen ändern.

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

Es ist unter der Rubrik Icons für Navigationsleisten, Symbolleisten und Tab Bars

Answer 5

Wenn Sie für die Symbole benutzerdefinierte Farben verwenden (und nicht nur den Hintergrund) anstelle des Standard-grau und blau, tun Sie das so: http://blog.theanalogguy.be/2010/10/06/custom-colored-uitabbar-icons/

Grundsätzlich müssen Sie vollständige Tabbar Bilder (Hintergrund und Symbole und Text) für jede ausgewählte Registerkarte erstellen und setzen Sie Ihre UITabBarItems auf kein Symbol und keinen Titel und fügen Sie das Bild in die Registerkarte ein als UIImageView in vie wWillAppear:

Und Apple wird nichts dagegen haben, da wir keine privaten APIs verwenden.

Answer 6

Einsatz nach Bildern (Unter der Annahme, tabBar wird mit 5 Tabs wie folgt)

• 
• 
• 
• 
• 

Erstellen Sie ein neues Projekt mit der Vorlage "TabBar Application" & Geben Sie den folgenden Code ein.

Inhalt der Datei "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 

Inhalt AppDel.m Datei. mit der backgroundImage Eigenschaft

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

Answer 7

FYI, von iOS 5 ab können Sie verschiedene Aspekte der UITabBar anpassen, einschließlich der Hintergrundbild einstellen.

Die neuen UITabBar „Anpassen Appearance“ Eigenschaften in iOS 5 sind:

backgroundImage 
selectedImageTintColor 
selectionIndicatorImage 
tintColor 

gegeben, dass Apple diese Methoden in iOS 5 eingeführt hat, dann möglich, es ist sie zu Versuche sympathischer sein kann, die UITabBar für anpassen frühere Betriebssysteme Diese website sagt, dass die Twitter-App eine benutzerdefinierte Tab-Leiste verwendet, so könnte es mehr Grund sein, dass Apple eine solche App in den App Store lassen würde, aber es ist keine Garantie!

Answer 8

Es ist möglich, ohne irgendwelche SubView hinzuzufügen.

In der Klasse, wo Sie die Tab-Leiste definieren legen Sie die Eigenschaft des tabBarItem zu - >>

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

Sein eine Eigenschaft tabBarItem und u kann das Standard-blaue Bild zu einem benutzerdefinierten Bild ändern. campaigns_hover.png ist die ausgewählte benutzerdefinierte Bild UND campaigns.png ist das benutzerdefinierte Bild, wenn sie nicht gewählt ...

das Geheimnis Genießen .. :)

Answer 9

Der Code unten hilft Ihnen, benutzerdefinierte Farben mit RGB hinzufügen Werte für die TabBar.

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

Answer 10

In AppDelegate.m

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

Answer 11

können Sie das tun, ohne -insertSubview:atIndex, weil eine neue UIView nicht benötigt wird. Sie können ein Design mit QuartzCore in jeder Ansicht anwenden (UITabBar und seine Subviews). Also wird der Hintergrund der UITabBar hinzugefügt, wie ich here beschrieben habe.

Nun müssen wir das Bild auf jedem UITabBarItem anwenden, da es Hintergrund ist:

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

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

Nun ist die .m-Datei:

// 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 

Sie können auch die Farbe der ausgewählten Bilder ändern, als jemand, gemacht here. Aber was ich mich wundere ist: Kann ich die Farbe des ausgewählten Etiketts ändern? Die Antwort ist ja, wie weiter unten (die folgenden Werke auf ios 3.x/4.x nicht iOS5 +) beschrieben:

@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 

Answer 12

Seit iOS 7.0 können Sie verwenden - [UIImage imageWithRenderingMode:] mit UIImageRenderingModeAlwaysOriginal zu Farben erhalten:

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

Arbeiten wie ein Charme.