BLOG

Acompanhe a Mobits pelo RSS

FILTROS

Eu já encontrei, em diversos fóruns - inclusive o da Apple - dúvidas de desenvolvedores sobre a possibilidade de alterar a cor de fundo de uma UITabBar. Infelizmente, não existe nenhum mecanismo oficial para fazê-lo, contudo existem maneiras de contornar essa restrição e uma delas irei apresentar aqui.

Antes, vale uma observação: uma vez que não existe uma solução oficial, qualquer solução alternativa corre o risco de ser rejeitada na App Store. Normalmente, o uso de APIs privadas, ou seja, chamada de métodos e propriedades não documentados pela Apple, é causa de rejeição automática, por isso, a nossa solução amenizará este risco utilizando somente métodos públicos e documentados. Mesmo assim, a possibilidade de rejeição ainda existirá, então use por sua conta e risco.

Só pra não dizer que botei só terror, existem apps aprovadas que claramente alteraram a cor da UITabBar, como é o caso da iFood Assistant que você confere abaixo.

App com a cor da UITabBar alterada

Conceito base

A solução é muito simples. Se você conhecer o mínimo do funcionamento das classes de UI do iPhone SDK vai saber que a grande maioria delas herdam de UIView. E toda UIView pode conter subviews que também serão subclasses de UIView. Com esse conceito básico, é que partimos para nossa solução.

Acesso à UITabBar

Uma vez tendo acesso a uma instância de UITabBarController, seja associando uma váriavel a ela ou criando uma subclasse, o acesso a sua respectiva UITabBar é muito simples:

UITabBar *tabBar = tabBarController.tabBar;

Realizando a mágica

Sendo a UITabBar uma subclasse de UIView, ela permitirá que adicionemos outras UIView como subviews. É aí que aparece a nossa oportunidade.

Primeiro, obtemos as dimensões de nossa UITabBar:

CGRect frame = tabBar.bounds;

Depois, criamos uma UIView com as mesmas dimensões:

UIView *backgroundView = [[UIView alloc] initWithFrame:frame];

Determinamos uma cor de fundo para esta view:

backgroundView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0.3 alpha:1.0];

Finalmente, colocamos essa view no "fundo" da UITabBar:

[tabBar insertSubview:backgroundView atIndex:0];
[backgroundView release];

E voilá, o resultado será semelhante ao seguinte:

UITabBar com a cor alterada

Observações Finais

O código acima, pode ser adaptado de diversas maneiras. Você pode, por exemplo, introduzí-lo em uma subclasse de UITabBarController, bastando substituir a variável tabBarController por self. Ainda seria possível substituir, por exemplo, a UIView por uma UIImageView com uma imagem de um fundo gradiente ou uma textura interessante.

Repare que utilizamos uma cor translúcida (alpha 0.5) para manter o efeito reflexivo padrão do UITabBar. Se utilizar uma cor ou imagem opaca, esse efeito será perdido.

Embora o código não faça nada muito elaborado, se for utilizado em uma app, é sempre saudável checar seu funcionamento em cada lançamento de versões do iOS, afinal, vai que... né? :)

COMPARTILHE

1 COMENTÁRIO

  1. Diego Lima 09/09/2011, 11:41

    Muito boa essa ideia... Da ultima vez que fui customizar uma tabBar me deu um trabalho danado!

    Parabéns pelo post...

    Obrigado!

DEIXE UM COMENTÁRIO

If you can read this, you don't use a typical webbrowser that plays nice with CSS.
Please do not fill in anything here!