iphone - Colores personalizados en UITabBar
objective-c (12)
¿Es posible usar colores personalizados e imágenes de fondo en una UITabBar? Me doy cuenta de que a Apple le gustaría que todos usen las mismas barras de pestañas azules y grises, pero ¿hay alguna forma de personalizar esto?
En segundo lugar, incluso si tuviera que crear mi propio controlador de vista similar a TabBar, junto con imágenes personalizadas, ¿violaría esto las Pautas de Interfaz Humana de Apple?
En AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[[UITabBar appearance] setSelectedImageTintColor:[UIColor redColor]];
return YES;
}
Al comienzo de *** ViewController.m, agregue lo siguiente para ayudar a establecer la imagen de fondo de 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
Aquí está el documento que dice que no podemos cambiar la apariencia presionada o seleccionada con nuestros íconos.
Está bajo el título Íconos para barras de navegación, barras de herramientas y barras de pestañas
Desde iOS 7.0, puede usar - [UIImage imageWithRenderingMode:] con UIImageRenderingModeAlwaysOriginal para preservar los colores:
// 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 de maravilla.
El siguiente código le ayuda a agregar colores personalizados con valores RGB a su tabBar.
self.tabBarController.tabBar.tintColor = [[UIColor alloc] initWithRed:0.00
green:0.62
blue:0.93
alpha:1.0];
En lo que respecta a la clase UITabBar, los iconos en la barra están limitados a los colores: azul para seleccionar y gris para no seleccionado. Esto se debe a que la barra de pestañas solo usa el valor alfa de los íconos que suministra para crear la imagen en la barra.
La barra en sí está limitada a ser negra, por lo que puedo recordar. No he visto nada como la propiedad ''tint'' en UINavigationBar en los documentos.
Supongo que puedes seguir y crear tu propia clase de estilo de barra de pestañas y hacer lo que quieras con ella, pero no tengo ni idea de cómo encaja con el HIG de Apple, o si lo desafiarán durante el proceso de revisión.
En mi experiencia, los revisores de Apple solo rechazaron mi aplicación si no usaba sus elementos de UI según el HIG. Podrían tener una visión diferente cuando se trata de sus propios elementos de la interfaz de usuario con los que está jugando.
Encontré una respuesta a esto en Silent Mac Design .
Implementé de esta manera:
Primero crea una subclase de 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
Y en su archivo Nib, reemplace la clase de su Controlador TabBar con CustomUITabBarController.
Es posible sin agregar ningún subView.
En la clase donde defines la barra de pestañas, establece la propiedad de tabBarItem en - >>
UITabBarItem *tabBarItem1 = [[self.tabBar.tabBar items] objectAtIndex:0];
[tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"campaigns_hover.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"campaigns.png"]];
Es una propiedad de tabBarItem y puede cambiar la imagen azul predeterminada a una imagen personalizada. campaigns_hover.png es la imagen personalizada seleccionada Y campaigns.png es la imagen personalizada cuando no está seleccionada ...
Disfruta el secreto ... :)
FYI, desde iOS 5 en adelante puede personalizar varios aspectos de la UITabBar, incluida la configuración de su imagen de fondo con la propiedad backgroundImage .
Las nuevas UITabBar "Personalizar Aspecto" en iOS 5 son:
backgroundImage
selectedImageTintColor
selectionIndicatorImage
tintColor
Dado que Apple ha introducido estos métodos en iOS 5, entonces es posible que sean más comprensivos con los intentos de personalizar el UITabBar para sistemas operativos anteriores. Este website dice que la aplicación de Twitter usa una barra de pestañas personalizada, por lo que esa podría ser una razón más para que Apple permita que esa aplicación entre en la App Store, ¡aunque eso no es garantía!
Puede hacerlo sin -insertSubview:atIndex , porque no se necesita una nueva UIView. Puede aplicar un tema usando QuartzCore en cada vista (UITabBar y sus subvistas). Entonces se agrega el fondo de UITabBar como lo describí here .
Ahora debemos aplicar la imagen en cada UITabBarItem como fondo:
// UITabBar+CustomItem.h
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
@interface UITabBar (CustomItem)
-(void)setSelectedItemBackground:(UIImage *)backgroundImage;
@end
Ahora el archivo .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
También puede cambiar el color de las imágenes seleccionadas, como alguien hizo here . Pero lo que me pregunto es: ¿puedo cambiar el color de la etiqueta seleccionada? La respuesta es sí, como se describe a continuación (el siguiente funciona en ios 3.x / 4.x, no en 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
Si desea utilizar colores personalizados para los iconos (y no solo para el fondo) en lugar de los colores gris y azul predeterminados, hágalo así: http://blog.theanalogguy.be/2010/10/06/custom-colored-uitabbar-icons/
Básicamente, debe crear imágenes de barra de tareas completas (fondo, iconos y texto) para cada pestaña seleccionada y establecer sus UITabBarItems en ningún icono y sin título, e insertar la imagen en la barra de pestañas como un UIImageView en la vista ApareceráAparecer:
Y a Apple no le importará ya que no estamos usando ninguna API privada.
Utilice las siguientes imágenes (Asumiendo, tabBar está teniendo 5 pestañas de la siguiente manera)
Crea un nuevo proyecto usando la plantilla "Aplicación TabBar" y coloca el código siguiente.
Contenido del archivo 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
Contenido del archivo 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;
}