Diseño personalizado de la barra de navigation – iOS

Posible duplicado:
¿Cómo agregar una image de background en la barra de navigation del iPhone?

iOS: ¿Cómo hizo NY Times este estilo personalizado de barra de navigation 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 totalmente personalizado para las barras de navigation es sorprendentemente difícil. La mejor escritura que conozco es la 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é eso es bueno. También tenga en count que no tiene que seguir su tutorial. Puede download el código completo aquí: https://github.com/scelis/ExampleNavBarBackground

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


  1. Inserte su vista de image personalizada en el índice 1 en lugar de 0. Esto lo hace aparecer encima de la image de background nativa mientras se mantiene debajo de los botones.

  2. Utiliza el protocolo de apareamiento UIA de iOS 5. Puede establecer la image de background para todos

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

o solo para una barra de navigation:

[navigationController.navigationBar setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

Asegúrese de proporcionar dos imágenes (UIBarMetricsDefault y UIBarMetricsLandscapePhone) al desarrollar una aplicación de iPhone para retrato y paisaje.

Solo para agregar a la respuesta dada por @Jenox, si desea admitir tanto los dispositivos iOS 4.xx como iOS 5.xx (es decir, su DespliegueTarget es 4.xx), debe tener cuidado envolviendo la llamada al proxy de aparición por comprobando en time de ejecución si el selector 'apariencia' está presente o no.

Puede hacerlo por:

 //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 de iOS 4.xx que haya implementado. Si ha implementado la solución 'drawRect' para dispositivos iOS 4.xx, como lo menciona @ludwigschubert, debe dejarlo 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 y iOS 5.

Copie esto en viewDidLoad. Verificará el iOS 5 y utilizará el método preferido; de lo contrario, agregará una subvista a las versiones de navBar para iOS <5.0. Esto funcionará siempre que su image de background 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 backgroundimage personalizado, 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 controller de vista, puede cambiar su [self.navigationController.navigationBar setBarForCard]; navigation llamando a [self.navigationController.navigationBar setBarForCard];

Esto funciona tanto en el IOS 4 como en el 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 de tinte de la barra de navigation para cambiar su color y también puede usar una image en la vista de la barra de navigation. Para la barra inferior creo que están usando una vista con tres botones personalizados.