lightbulb_outline Please take our October 2018 developer survey. Start survey

Criar bitmaps redimensionáveis (arquivos 9-patch)

A ferramenta Draw 9-patch é um editor WYSIWYG incluído no Android Studio que permite criar imagens de bitmap que se redimensionam automaticamente para se adaptar ao conteúdo da vista e ao tamanho da tela. Determinadas partes da imagem são dimensionadas no eixo horizontal ou vertical, de acordo com os indicadores delineados dentro da imagem.

Para saber o básico sobre as imagens NinePatch e como elas funcionam, leia a seção sobre Drawables NinePatch no documento Canvas e Drawables.

Figura 1. Uma imagem NinePatch na ferramenta Draw 9-patch do Android Studio.

Veja um guia rápido para criar uma imagem NinePatch usando a ferramenta Draw 9-patch do Android Studio. Você precisará da imagem em PNG da qual gostaria de criar uma imagem NinePatch.

  1. No Android Studio, clique com o botão direito do mouse na imagem em PNG da qual gostaria de criar uma imagem NinePatch e clique em Create 9-patch file.
  2. Digite um nome para o arquivo da sua imagem NinePatch e clique em OK. A imagem será criada com a extensão .9.png.
  3. Clique duas vezes no novo arquivo NinePatch para abri-lo no Android Studio. O espaço de trabalho abrirá.

    O painel à esquerda é a área de desenho, em que você pode editar as linhas dos trechos esticáveis e da área destinada ao conteúdo. O painel à direita é a área de prévia, em que você pode visualizar a imagem quando esticada.

  4. Clique dentro do perímetro de 1 pixel para delinear as linhas que definem os trechos esticáveis e a área (opcional) do conteúdo. Clique com o botão direito do mouse (ou segure Shift e clique, no Mac) para apagar as linhas delineadas anteriormente.
  5. Depois, clique em File > Save para salvar as alterações.

Você pode abrir um arquivo NinePatch no Android Studio clicando duas vezes nele.

Para garantir que as imagens NinePatch se redimensionem para um tamanho menor de forma correta, verifique se as regiões estiáveis têm pelo menos 2x2 pixels de tamanho. Se não, elas podem desaparecer em uma redução de tamanho. Além disso, coloque um pixel a mais como margem de segurança nas imagens antes e depois das regiões esticáveis para evitar interferência durante o dimensionamento, o que pode provocar mudança na cor das linhas de divisão.

Observação: Um arquivo PNG normal (*.png) será carregado com uma borda de um pixel vazia adicionada em torno da imagem e, no espaço dentro dela, você pode delinear os trechos esticáveis e a área do conteúdo. Um arquivo NinePatch salvo anteriormente (*.9.png) será carregado da forma em que está, sem nenhuma alteração e sem área de desenho determinada, porque essa área já existe.

Figura 2. Uma imagem NinePatch apresentando conteúdo, trechos e trechos ruins.

Os controles opcionais são:

  • Zoom: ajusta o nível de zoom da imagem na área desenhável.
  • Escala do trecho: ajusta a dimensão das imagens na área de visualização.
  • Mostrar trava: exibe a área não desenhável da imagem ao passar o cursor.
  • Mostrar trechos: Veja uma prévia dos trechos esticáveis na área desenhável (um trecho rosa é esticável), conforme mostrado na figura 2 acima.
  • Exibir conteúdo: destaca a área do conteúdo nas imagens de prévia (a área roxa é a que pode receber conteúdo), como mostrado na figura 2.
  • Mostrar trechos ruins: Adiciona uma borda vermelha em torno dos trechos que podem produzir ruídos ou distorções na imagem quando esticada, conforme mostrado na figura 2. A coerência visual da imagem esticada será mantida se você eliminar todos os trechos ruins.