Cores personalizadas no UITabBar

É possível usar colors personalizadas e imagens de plano de fundo em um UITabBar? Eu percebo que a Apple gostaria que todos usassem as mesmas barras de guias azuis e cinza, mas existe alguma maneira de personalizar isso?

Em segundo lugar, mesmo que eu criasse meu próprio controlador de exibição semelhante ao TabBar, juntamente com imagens personalizadas, isso violaria as Diretrizes de Interface Humana da Apple?

Eu encontrei uma resposta para isso no Silent Mac Design .

Eu implementei desta maneira:

Primeiro faça uma subclass de UITabBarContoller

// CustomUITabBarController.h #import  @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 

E no seu arquivo Nib, substitua a class do seu TabBar Controller pelo CustomUITabBarController.

FYI, a partir do iOS 5, você pode personalizar vários aspectos do UITabBar, incluindo a configuração de sua imagem de plano de fundo usando a propriedade backgroundImage .

As novas propriedades “Customizing Appearance” do UITabBar no iOS 5 são:

 backgroundImage selectedImageTintColor selectionIndicatorImage tintColor 

Dado que a Apple introduziu esses methods no iOS 5, então é possível que eles sejam mais simpáticos às tentativas de personalizar o UITabBar para sistemas operacionais anteriores. Este site diz que o aplicativo do Twitter usa uma barra de abas personalizada, então isso pode ser mais uma razão para a Apple deixar esse aplicativo entrar na App Store, mas não é garantia!

Use as seguintes imagens (Supondo que tabBar tenha 5 Guias da seguinte forma)

  • insira a descrição da imagem aqui
  • insira a descrição da imagem aqui
  • insira a descrição da imagem aqui
  • insira a descrição da imagem aqui
  • insira a descrição da imagem aqui

Crie um novo projeto usando o modelo “TabBar Application” e coloque o seguinte código.

Conteúdo do arquivo AppDel.h.

 #import  @interface cTabBarAppDelegate : NSObject  { } @property (nonatomic, retain) IBOutlet UIWindow *window; @property (nonatomic, retain) IBOutlet UITabBarController *tabBarController; @property (nonatomic, retain) IBOutlet UIImageView *imgV; @end 

Conteúdo do arquivo 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; } 

No início do *** ViewController.m adicione o seguinte pode ajudar a definir a imagem de fundo do 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 

Se você quiser usar colors personalizadas para os icons (e não apenas o plano de fundo) em vez do padrão cinza e azul, faça assim: http://blog.theanalogguy.be/2010/10/06/custom-colored- uitabbar-icons /

Basicamente, você precisa criar imagens completas da barra de guias (fundo e icons e texto) para cada guia selecionada e definir seus UITabBarItems como nenhum ícone e nenhum título e inserir a imagem na barra de guias como um UIImageView na viewWillAppear:

E a Apple não se importará, já que não estamos usando APIs particulares.

Desde o iOS 7.0, você pode usar – [UIImage imageWithRenderingMode:] com UIImageRenderingModeAlwaysOriginal para preservar as colors:

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

Funciona como um encanto.

Em AppDelegate.m

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

No que diz respeito à class UITabBar, os icons na barra estão limitados às colors: azul para selecionado e cinza para não selecionado. Isso ocorre porque a barra de guias usa apenas o valor alfa dos icons fornecidos para criar a imagem na barra.

O bar em si é limitado a ser preto, tanto quanto me lembro. Eu não vi nada parecido com a propriedade ‘tint’ no UINavigationBar nos documentos.

Eu acho que você poderia ir em frente e criar sua própria class de estilo de barra de guia e fazer o que quiser com ela, mas eu não tenho absolutamente nenhuma idéia de como isso se encheckbox com o HIG da Apple, ou se eles o desafiariam durante o processo de revisão.

Na minha experiência, os revisores da Apple somente rejeitaram meu aplicativo se eu não usasse os elementos de UI de acordo com o HIG. Eles podem ter uma visão diferente quando são seus próprios elementos de interface do usuário com os quais você está jogando.

Aqui está o documento que diz que não podemos alterar a aparência pressionada ou selecionada com nossos icons.

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

Está sob os icons de título para barras de navegação, barras de ferramentas e barras de guias

É possível sem adicionar qualquer subView.

Na class em que você define a barra de guias, defina a propriedade do tabBarItem para – >>

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

É uma propriedade de tabBarItem e vc pode alterar a imagem azul padrão para uma imagem customizada. campaigns_hover.png é a imagem personalizada selecionada AND campaigns.png é a imagem personalizada quando não está selecionada …

Aproveite o segredo .. 🙂

O código abaixo ajuda você a adicionar colors personalizadas com valores RGB ao seu tabBar.

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

Você pode fazer isso sem -insertSubview:atIndex , porque um novo UIView não é necessário. Você pode aplicar um tema usando o QuartzCore em cada exibição (UITabBar e suas subvisualizações). Então o plano de fundo do UITabBar é adicionado como eu descrevi aqui .

Agora devemos aplicar a imagem em cada UITabBarItem como plano de fundo:

  // UITabBar+CustomItem.h #import  #import  @interface UITabBar (CustomItem) -(void)setSelectedItemBackground:(UIImage *)backgroundImage; @end 

Agora o arquivo .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 

Você também pode alterar a cor das imagens selecionadas, como alguém fez aqui . Mas o que estou pensando é: posso mudar a cor do label selecionado? A resposta é sim, conforme descrito abaixo (os seguintes trabalhos no ios 3.x / 4.x, não no 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