Estilo personalizado de la barra de navegación: iOS

Posible duplicado:
Cómo agregar una imagen de fondo en la barra de navegación de iphone?

iOS: ¿Cómo hizo el NY Times este estilo personalizado de barra de navegación superior?

Y para el caso, ¿el de abajo?

Gracias…

Los Tiempos de la Ciudad Nueva York

EDITAR: Esto está desactualizado; para iOS5 hay una respuesta mucho mejor a continuación , por @Jenox.

El estilo completamente personalizado para las barras de navegación es sorprendentemente difícil. La mejor redacción que conozco es esta de Sebastian Celis: http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/

Esto no anula DrawRect e incluye una buena explicación de por qué es bueno. También tenga en cuenta que no tiene que seguir su tutorial. Puede descargar el código completo aquí: https://github.com/scelis/ExampleNavBarBackground

La solución de @ludwigschubert, sin embargo, no funciona en iOS 5. Tampoco -drawRect: porque ni siquiera se llama.
A partir de iOS 5, una barra de navegación consiste en un UINavigationBarBackground y un UINavigationItemView . Hay otras dos formas de hacerlo funcionar.


  1. Inserte su vista de imagen personalizada en el índice 1 en lugar de 0. Esto hace que aparezca encima de la imagen de fondo mientras se encuentra debajo de los botones.

  2. Utiliza el protocolo UIAppearance de iOS 5. Puede establecer la imagen de fondo para todos

[[UINavigationBar appearance] setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

o para una sola barra de navegación:

[navigationController.navigationBar setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

Asegúrese de proporcionar dos imágenes (UIBarMetricsDefault y UIBarMetricsLandscapePhone) al desarrollar una aplicación para iPhone tanto vertical como horizontal.

Solo para agregar a la respuesta dada por @Jenox, si desea admitir dispositivos iOS 4.xx e iOS 5.xx (es decir, su DeploymentTarget es 4.xx), debe tener cuidado al ajustar la llamada al proxy de aparición por comprobando en tiempo de ejecución si el selector ‘apariencia’ está presente o no.

Puedes hacerlo así:

 //Customize the look of the UINavBar for iOS5 devices if ([[UINavigationBar class]respondsToSelector:@selector(appearance)]) { [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"NavigationBar.png"] forBarMetrics:UIBarMetricsDefault]; } 

También debe dejar la solución iOS 4.xx que puede haber implementado. Si ha implementado la solución ‘drawRect’ para dispositivos iOS 4.xx, como lo menciona @ludwigschubert, debe dejar eso en:

 @implementation UINavigationBar (BackgroundImage) //This overridden implementation will patch up the NavBar with a custom Image instead of the title - (void)drawRect:(CGRect)rect { UIImage *image = [UIImage imageNamed: @"NavigationBar.png"]; [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)]; } @end 

Esto hará que el NavBar se vea igual en dispositivos iOS 4 e iOS 5.

Copia esto en viewDidLoad. Verificará iOS 5 y utilizará el método preferido, de lo contrario agregará una subvista a navBar para versiones de iOS <5.0. Esto funcionará siempre que su imagen de fondo personalizada no tenga transparencias.

 float version = [[[UIDevice currentDevice] systemVersion] floatValue]; NSLog(@"%f",version); UIImage *backgroundImage = [UIImage imageNamed:@"myBackgroundImage.png"]; if (version >= 5.0) { [self.navigationController.navigationBar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault]; } else { [self.navigationController.navigationBar insertSubview:[[[UIImageView alloc] initWithImage:backgroundImage] autorelease] atIndex:1]; } 

Puede crear una categoría y crear un método personalizado para agregar cualquier vista que desee: imágenes, botones, controles deslizantes. Por ejemplo, aquí está el código que uso: agrega imágenes de fondo personalizadas, BackButton y Label.

 @interface UINavigationBar (NavigationBar) -(void)setBarForCard; @end @implementation UINavigationBar (NavigationBar) -(void)setBarForCard { UIImageView *aTabBarBackground = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"BarImage"]]; aTabBarBackground.frame = CGRectMake(0,0,self.frame.size.width,44); [self addSubview:aTabBarBackground]; [self sendSubviewToBack:aTabBarBackground]; [aTabBarBackground release]; UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom]; backBtn.frame =CGRectMake(10, 8, 60, 30); [backBtn addTarget:self action:@selector(back:)forControlEvents:UIControlEventTouchUpInside]; [backBtn setImage:[UIImage imageNamed: @"Back"] forState:UIControlStateNormal]; [self addSubview:backBtn]; UILabel *calendar = [[UILabel alloc]init]; calendar.frame = CGRectMake(105, 13, 109, 21); calendar.text = @"Calendar" calendar.textColor = [UIColor whiteColor]; calendar.textAlignment = UITextAlignmentCenter; calendar.shadowColor = [UIColor grayColor]; calendar.shadowOffset = CGSizeMake(0, -1); calendar.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:20]; calendar.backgroundColor = [UIColor clearColor]; [self addSubview:calendar]; } 

Y luego, en cualquier controlador de vista, puede cambiar su [self.navigationController.navigationBar setBarForCard]; navegación llamando [self.navigationController.navigationBar setBarForCard];

Esto funciona tanto en iOS 4 como en iOS 5

Esta es una mejor manera para iOS 5

 if ([self.navigationController.navigationBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)] ) { UIImage *image = [UIImage imageNamed:@"navBarImg.png"]; [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault]; } 

puede cambiar el color del tinte de la barra de navegación para cambiar su color y también puede usar una imagen en la barra de navegación. Para la barra inferior, creo que están usando una vista con tres botones personalizados.