iphone - example - Barra de navegación personalizada

root view controller navigation controller

Question

Estaba rastreando Dribble y encontré el diseño adjunto. Me preguntaba cómo hacer una barra de navegación personalizada como esta. Me refiero a cómo crear la barra de navegación una vez y reutilizarla implícitamente para cada controlador de vista.

Estaba pensando en tener un tipo de controlador de vista raíz y heredarlo para otros controladores de vista, pero no sé cómo hacer esto.

¡Cualquier idea o enlace será appreachated!

Aclamaciones.

Cirilo

Answer 1

En las versiones anteriores de iOS, tienes que subclase 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 navegación personalizada en su controlador de vista, debe cambiar un nombre de clase estándar a CustomNavigationBar en XIB.

Además, puede configurar la barra de navegación personalizada mediante programació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 navegación personalizada.

Answer 2

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

El siguiente bloque de código (colóquelo en su método applicationDidFinishLoading) cambiará UINavigationBar para toda la aplicación a la imagen que le proporcione.

Tenga en cuenta que esto SÓLO funcionará en iOS5

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

Sin embargo, también puede cambiar la apariencia de una UINavigationBar única según el controlador de vista en el que esté utilizando el siguiente código en viewDidLoad.

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

El código anterior solo analiza las nuevas formas 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, recomendaría subclasificar UINavigationBar , y luego agregar los botones necesarios a través de eso. Probablemente UINavigationBar incluso salir con una UINavigationBar estándar pero UIBarButtonItem s personalizados que se ejecutan en 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 copiar / pegar, pero te da una idea de lo que se debe hacer para lograr UIBarButtonItems de aspecto "personalizado".

¡Buena suerte!

Answer 3

Puede utilizar el stock UINavigationController y ocultar el UINavigationBar.

Luego, crea tu propia subclase de UIViewController, que tiene todos los elementos de navegación, y luego una vista de tamaño de flexión donde van los contenidos. Haga que todas sus clases subclasifiquen este elemento y dibujen en la vista. El botón simplemente tiene que llamar a [self.navigationController popViewControllerAnimated:YES] y el UILabel a la vista solo tiene que establecer su texto en self.title .

Answer 4

Usando Category , agregue el siguiente código en su archivo 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 Category no es una buena manera, escribí una demostración sin usar Category , haga clic here .

Answer 5

establecer un fondo personalizado para la barra de navegación

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 leftBarButtons y title.

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

Answer 6

UINavigationBar crear su propia subclase UINavigationBar y utilizarla en los lugares donde necesite un navigationController.

En esta clase personalizada es donde dibujarás el fondo, botones, texto, etc.

Actualizar

En realidad, mirando más de cerca este ejemplo, parece ser una UIToolBar . Puede asignar métodos de navegación a los botones como popViewController: etc. Para la "Confirmación de información" y el indicador de progreso, puede usar una etiqueta y una imagen. Para el botón derecho, es solo un gráfico.

Por supuesto, el ejemplo que proporcionó es simplemente un concepto, y no una aplicación real. Pero con algo de creatividad, unas pocas horas de programación y unas pocas horas más de diseño de gráficos, puede lograr esta misma interfaz.