Tutorial iOS – Personalizando a Barra de Navegação(Navigation Bar)

On 29 de janeiro de 2015 by Rafael Lage

Hoje aprenderemos a personalizar a Barra de Navegação, em inglês Navigation Bar, utilizando Objective C. Ela se encontra na parte superior da maioria dos aplicativos, contém os botões para navegação e o título da página, caso sejam necessários. Podemos customiza-la de várias maneiras, entre elas aprenderemos a trocar a cor de fundo, usar uma imagem de fundo, trocar a fonte do título, trocar a cor do botão de retorno e adicionar múltiplos botões. Para isso siga os seguintes passos:

 

1 – Crie uma Single View Based Aplication:

Captura de Tela 2015-01-23 às 21.46.26

2 – Adicione uma  Navigation Bar em sua Main.storyboard:

Captura de Tela 2015-01-23 às 21.47.27

3 – Agora mãos a obra, personalizações:

  • Trocar a cor de fundo:

Vá no AppDelegate.m e no método didFinishLaunchingWithOptions adicione:

[sourcecode language=”java”]
[[UINavigationBar appearance] setBarTintColor:[UIColor blueColor]];
[/sourcecode]

Resultado:

Captura de Tela 2015-01-23 às 21.58.50

Obs: Utilizando a Macro abaixo e a nova linha podemos utilizar codigos RGB para escolhermos a cor desejada.

[sourcecode language=”java”]
#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0

green:((float)((rgbValue & 0xFF00) >> 8))/255.0

blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]
[/sourcecode]

[sourcecode language=”java”]
[[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x067AB5)];
[/sourcecode]

 

  • Usar imagem de fundo:

Para adicionar uma imagem de fundo utilize o seguinte código:

[sourcecode language=”java”]
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"fundo.png"] forBarMetrics:UIBarMetricsDefault];
[/sourcecode]

Obs: O tamanho da imagem pode variar de dispositivo para dispositivo.

Resultado:

Captura de Tela 2015-01-23 às 22.37.57

  • Trocar a fonte do título:

A partir do seguinte código você pode trocar a fonte do título, cor, tamanho, sombra, cor da sombra,

opacidade, entre outros:

[sourcecode language=”java”]
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];
shadow.shadowOffset = CGSizeMake(0, 1);
[[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
[UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttributeName,
shadow, NSShadowAttributeName,
[UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil]];
[/sourcecode]

Resultado:

Captura de Tela 2015-01-23 às 22.39.20

  • Trocar a cor do botão de retorno:

Por padrão a cor da fonte de botões é azul, para efetuar a troca utilize o seguinte código:

[sourcecode language=”java”]
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
[/sourcecode]

Resultado:
Captura de Tela 2015-01-23 às 22.40.14

5 – Pronto! Agora temos uma personalização básica da Barra de Navegação, para baixar o projeto clique AQUI.

Untitled

Deixe um comentário

O seu endereço de e-mail não será publicado.