quarta-feira, 21 de setembro de 2011

Android e o formato 9-Patch

Por: Manuella Nejaim @manux | Nelson Glauber @nglauber

Olá povo,

Nossa experiência em projetos Android nos mostrou que não são apenas os engenheiros de sistema (ou programadores) que precisam saber do que a plataforma é capaz. Os designers também precisam conhecer as facilidades que a plataforma da Google traz.
É bastante comum em uma interface, termos um botão que aparece em vários contextos com diferentes dimensões. Nestes casos, os designers criavam várias imagens semelhantes, diferindo apenas o tamanho. Isso fazia com que a aplicação ficasse com o tamanho maior (em bytes) e muitas vezes causando problemas de memória devido ao tamanho e quantidade de imagens utilizadas.

Uma técnica que foi amplamente utilizada em aplicações Java ME foi a 9-slice, devido à escassez de recursos dos aparelhos dessa plataforma. Essa abordagem divide uma imagem maior em 9 imagens menores, conforme abaixo:
Imagem cortada para o 9-slice

Essa forma é bem interessante, pois as imagens (exceto as das quatro quinas) são idealizadas de modo a serem esticadas sem perder a qualidade. Entretanto, tinha-se o inconveniente gerenciar, para cada imagem “de botão”, nove imagens.

O Android adota uma forma similar para aperfeiçoar a utilização do 9-slice chamada de 9-patch. Essa abordagem utiliza marcações feitas na imagem, indicando a área “esticável”, assim como as margens que devem ser preservadas.

Indicação das áreas de marcação de uma imagem 9-patch

Os benefícios da utilização deste recurso são claros: diminuição da quantidade de imagens, diminuição do peso da própria imagem, otimização para o porting, flexibilidade para a interface, dentre vários outros. Além disso, representa ganho de desempenho e qualidade no produto final, beneficiando engenheiros, designers e principalmente o usuário.

As imagens precisam ser produzidas de forma adequada para adotar esse recurso, então existe a necessidade de colaboração dos designers de interface com os engenheiros para fazer uso dessa solução. Gerar imagens para o 9patch requer um mínimo de esforço, e a inclusão de uns dois passos a mais no trabalho de layout.
Vale à pena salientar que esta solução se aplica elementos da interface como boxes, botões e inputs que de alguma forma apresentam um padrão gráfico que pode ser distorcido na horizontal e/ou vertical.
Para gerar a imagem “9patched”, é preciso primeiro criá-la na ferramenta gráfica (como o Photoshop) e observar dois pontos:

O primeiro ponto é que, a imagem gerada não pode ter degradês diagonais, apenas em 90 graus.

Degradê do botão com ângulo de 90 graus

O segundo ponto, é gerar a imagem do botão nas dimensões mínimas que conservem a sua aparência, conforme a imagem abaixo:

Aparência do botão normal

Imagem exportada do botão cortado para fazer o 9patch

Uma vez criada a imagem, utilizaremos o draw9patch, uma ferramenta que vem com o Android SDK, onde podemos realizar as marcações para tornar uma imagem comum em uma imagem “9-patched”. Ao baixar e instalar o SDK do Android, a ferramenta encontra-se no diretório tools. Dentro dessa pasta, basta executar o arquivo draw9patch.bat (no Windows, no Linux e Mac o nome é similar). Após executar a aplicação, basta arrastar a imagem original para dentro do programa (ou carrega-la a partir do menu File).
A imagem exportada é aberta no draw9patch e ao lado direito serão apresentadas 3 variações dela esticada na horizontal e na vertical.

Tela do draw9patch

A imagem ganha automaticamente uma margem externa de 1 pixel de cada lado. Nessa área é que fazemos a marcação na imagem “pintando-a” com o clique. Para remover a marcação de uma área, pressione a tecla Shift enquanto pinta.
A linha do topo refere-se à largura do botão, indicando os limites pra distorcer o botão horizontalmente. A margem lateral esquerda refere-se à altura do botão, onde ele esticará verticalmente. A margem inferior e direita serve para indicar o padding, ou seja, margem interna do botão, onde entra o conteúdo. E por fim, no lado direito temos o padding vertical da imagem.

Na parte inferior da tela do draw9patch encontramos as opções de zoom para a área de marcação e para o preview das distorções. Existem também botões Show lock para acionar o “travamento” da imagem em si (marcado por padrão), Show content para exibição da área de conteúdo definida pelo padding (desmarcada por padrão) e a opção Show patches que mostra os “cortes” que formam a imagem por completo (desmarcada por padrão).

Após realizar as alterações desejadas, o arquivo que será salvo terá a extensão *.9.png. e pode ser usado como imagem de background de componentes do Android como Button, EditText, etc.

4br4ç05,
manux | nglauber

4 comentários:

Hiroshi disse...

Muito bom!

Adriano Avelar disse...

É Glauber, eu sabia que tu tinha uma veia de designer passando pelo teu corpo... auhuahuhauah

FelipeVasconcelos disse...

Ficou bem legal o post! :D

thiago silva disse...

Vlw glauber. Com certeza vai me ajudar no projeto.