Barra de navigation personalizada

Estaba rastreando Dribble y encontré el layout adjunto. Me preguntaba cómo hacer una barra de navigation personalizada como esta. Me refiero a cómo crear la barra de navigation una vez y reutilizarla implícitamente para cada controller de vista.

Estaba pensando en tener una especie de controller de vista raíz y henetworkingar para otros controlleres de vista, pero no sé cómo hacer esto.

Cualquier idea o enlace será aprehendido!

Aclamaciones.

Cyril

Imagen de la barra de navegación

Gracias a iOS5, ahora puedes personalizar la apariencia de un UINavigationBar sin tener que subclasificar o crear una categoría.

El siguiente bloque de código (póngalo en su aplicaciónDidFinishLoading: método) cambiará UINavigationBar para toda la aplicación a cualquier image que le dé.

Tenga en count que esto SOLO funcionará en iOS5.

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

Sin embargo, también puede cambiar la apariencia de un único UINavigationBar según el controller de vista en el que esté usando el siguiente código en viewDidLoad.

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

El código anterior solo trata sobre las nuevas forms de personalizar la apariencia de UINavigationBar gracias a iOS5. Sin embargo, no analiza la forma en que se han implementado los botones.

Sin embargo, agregar los botones es un juego completamente diferente. Para esto, recomiendo subclasificar UINavigationBar , y luego agregar los botones donde sea necesario a través de eso. Probablemente podría salirse con la suya solo con un UINavigationBar estándar pero UIBarButtonItem personalizado que se salga de una vista particular.

Por ejemplo:

 UIView *rightButton = [[[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 30.0f, 30.0f)] autorelease]; [rightButton addSubview:[UIImage imageNamed:@"rightButtonImage.png"]]; UIBarButtonItem *rightButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:rightButton] autorelease]; [rightButtonItem setAction:@selector(rightButtonAction:)]; 

No he probado ese código, por lo que no es una solución de copyr y pegar, pero te da una idea de lo que hay que hacer para lograr UIBarButtonItems "personalizados".

¡Buena suerte!

En las versiones anteriores de iOS, debe subclass UINavigationBar, es decir:

 @interface CustomNavigationBar : UINavigationBar @end @implementation CustomNavigationBar - (id)initWithCoder:(NSCoder *)aDecoder { self = [super initWithCoder:aDecoder]; if (self) { self.opaque = YES; self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"CustomBackground"]]; } return self; } - (void)drawRect:(CGRect)rect { // Skip standard bar drawing } @end 

Para usar una barra de navigation personalizada en su controller de vista, debe cambiar un nombre de class estándar a CustomNavigationBar en XIB.

Además, puede configurar la barra de navigation personalizada mediante progtwigción:

 UIViewController *tempController = [[[UIViewController alloc] init] autorelease]; UINavigationController *navigationController = [[[UINavigationController alloc] initWithRootViewController:tempController] autorelease]; NSData *archive = [NSKeyedArchiver archivedDataWithRootObject:navigationController]; NSKeyedUnarchiver *unarchiver = [[[NSKeyedUnarchiver alloc] initForReadingWithData:archive] autorelease]; [unarchiver setClass:[CustomNavigationBar class] forClassName:@"UINavigationBar"]; UINavigationController *customNavigationController = [unarchiver decodeObjectForKey:@"root"]; UIViewController *contentController = [[[ContentViewController alloc] init] autorelease]; customNavigationController.viewControllers = [NSArray arrayWithObject:contentController]; 

Ahora customNavigationController tiene la barra de navigation personalizada.

establecer un background personalizado para la barra de navigation

 UIImage *navBackground =[[UIImage imageNamed:@"navbarBackground"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)]; [[UINavigationBar appearance] setBackgroundImage:navBackground forBarMetrics:UIBarMetricsDefault]; 

luego, en su Controlador de vista, configure vistas personalizadas para los botones Izquierdo, Derecha, Barras y título.

 self.navigationItem.titleView = customTitleView; self.navigationItem.leftBarButtonItem = customBarButton; self.navigationItem.rightBarButtonItem = customBarButton2; 

UINavigationBar crear su propia subclass UINavigationBar y usarla en los lugares donde necesitaría un UINavigationBar navigation.

En esta class personalizada es donde dibujará el background, botones, text, etc.


Actualizar

En realidad, echando un vistazo más de cerca a este ejemplo, parece ser un UIToolBar . Puede asignar methods de navigation a los botones como popViewController: etc. Para el "Confirmar información" y el indicador de progreso, puede usar una label y una image. Para el button derecho, es solo un gráfico.

Por supuesto, el ejemplo que brindó es simplemente un concepto y no una aplicación real. Pero con algo de creatividad, algunas horas de encoding y algunas horas más de layout gráfico, puedes lograr esta misma interfaz.

Usando Category , agregue el código a continuación en su file de delegado (.m)

 @implementation UINavigationBar (UINavigationBarCategory) - (void)drawRect:(CGRect)rect { UIImage *navBg = [UIImage imageNamed:@"NavBar.png"]; [navBg drawInRect:CGRectMake(0, 0, 320, 44)]; } @end 

Editar:

Usar la Category no es una buena manera, escribí una demostración sin utilizar la Category , haga clic aquí .

Puede usar el UINavigationController común y ocultar el UINavigationBar.

Luego, crea tu propia subclass UIViewController que tiene todos los elementos de navigation, y luego una vista de tamaño flexible donde van los contenidos. Haga que todas sus classs subclasss este elemento y dibuje en la vista. El button simplemente tiene que llamar a [self.navigationController popViewControllerAnimated:YES] y el UILabel a la vista solo tiene que establecer su text en self.title .