09 Jul, 2011 14:29

Customizando a aparência da UINavigationBar

Vale observar, assim como no artigo da UITabBar, que esse método, embora não utilize nenhuma API privada, pode causar alguma implicância do pessoal da App Store e causar a rejeição do app. Use por sua conta e risco.

Implementação

Basta criar uma subclasse de UINavigationBar, digamos UINavigationBarCustom, substituí-la no seu UINavigationController (usando o XIB p. ex.) e colocar o seguinte código em sua implementação.

@implementation UINavigationBarCustom

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    UIImage *img = [UIImage imageNamed: @"nav_bar.png"];
    [img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}

@end

Pronto! Digamos que a sua imagem seja:

Fundo UINavigationBar 1

o resultado será

UINavigationBar com imagem 1 no fundo

Se você quiser aproveitar o efeito padrão do componente, pode experimentar usar um PNG translúcido como imagem. O resultado será semelhante ao seguinte:

UINavigationBar com imagem translúcida no fundo

Você pode ainda definir uma imagem como padrão e repetí-la ao longo da barra. Para isso basta modificar ligeiramente o código para:

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    UIImage *img = [UIImage imageNamed: @"nav_bar_1.png"];
    [img drawAsPatternInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}

Neste caso, ao usar uma pequena imagem como

Fundo UINavigationBar pattern

o resultado seria algo como

UINavigationBar com imagem pattern no fundo

Observações

Se você permitir que o usuário possa girar o aparelho, deve saber que a imagem pode ficar deformada.

Veja esse exemplo tosco, mas bem claro.

Na vertical

UINavigationBar com imagem correta na vertical

Na horizontal

UINavigationBar com imagem distorcida na horizontal

Para evitar este problema você pode usar a técnica da imagem padrão repetida que mencionei acima, ou criar uma imagem para cada orientação. Basta, no código que apresentei no início, verificar a largura do rect e escolher a imagem correspondente.

Outro problema importante é que a imagem não é aplicada aos UIBarButtonItem que você possa vir a acrescentar.

UINavigationBar com botão sem efeito

Neste caso, ou você pode escolher uma tintColor que combine com a sua imagem e será aplicada ao botão, ou terá que criar imagens para seus próprios botões.

Essas técnicas não deverão ser necessárias no iOS 5, mas isso é assunto para outro post ;)

Ao navegar neste site, você consente o uso de cookies nossos e de terceiros, que coletam informações anônimas e são essenciais para melhorar sua experiência em nosso site.