Tutorial iOS – Personalizando a Barra de Navegação(Navigation Bar)
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:
2 – Adicione uma Navigation Bar em sua Main.storyboard:
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:
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:
- 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:
- 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]
5 – Pronto! Agora temos uma personalização básica da Barra de Navegação, para baixar o projeto clique AQUI.