Guia simples de 9patch para Android UI

Enquanto eu estava trabalhando no meu primeiro aplicativo Android, encontrei 9-patch (aka 9.png) era um pouco confuso e pouco documentado. Depois de algum tempo, eu finalmente peguei as manhas de como ele funciona e decidi criar algo para ajudar os outros a usa-lo.

Basicamente, 9-patch usa transparência do png para fazer uma forma avançada de 9 fatias(9-slice) ou 9 escalas(scale9). Os guias são retas, linhas pretas de 1 pixel desenhadas na borda de seu que definem o dimensionamento e encher de sua imagem. Ao nomear seu arquivo de imagem para nome.9.png , o Android irá reconhecer o formato 9.png e usar as guias pretas para dimensionar e encher seus bitmaps.

Está aqui um exemplo de mapeamento :

Como você pode ver, você tem guias em cada lado da imagem. Os guias superior e esquerda são para escalar sua imagem (ou seja, 9-slice), enquanto as guias direita e inferior definir a área de preenchimento.

As linhas de orientação negros são corte /remoção da sua imagem - elas não serão mostradas no aplicativo. Guias devem ser apenas um pixel de largura, por isso, se você quer um botão de 48 × 48 , o png na verdade será de 50 × 50. Tudo mais espesso que um pixel irá fazer parte da sua imagem. (Meus exemplos têm grandes guias de 4 pixel para uma melhor visibilidade. Eles devem realmente ser apenas de 1 pixel).

Suas guias devem ser de cor preta sólida (# 000000). Mesmo uma pequena diferença na cor (# 000001) ou alfa fará com que ele falhe estique normalmente. Esta falha não vai ser óbvia , ela falhará em silêncio!

Além disso, você deve ter em mente que a área remanescente do esboço de um pixel deve ser completamente transparente. Isso inclui os quatro cantos da imagem - aqueles deve ser sempre clara. Isso pode ser um problema maior do que você imagina. Por exemplo, se você redimensionar uma imagem no Photoshop ele irá adicionar pixels anti-aliasing, que podem incluir pixels quase invisíveis, que também fará com que ele falhe *. Se você deve escalar no Photoshop, use a configuração Nearest Neighbor no menu suspenso Resample Image (na parte inferior do menu pop-up Tamanho da Imagem) para manter as bordas afiadas em seus guias.

*(updated 1/2012) This is actually a “fix” in the latest dev kit. Previously it would manifest itself as all of your other images and resources suddenly breaking, not the actually broken 9-patch image.

The TOP and LEFT guides are used to define the scalable portion of your image – LEFT for scaling height, TOP for scaling width. Using a button image as an example, this means the button can stretch horizontally and vertically within the black portion and everything else, such as the corners, will remain the same size. The allows you to have buttons that can scale to any size and maintain a uniform look.
It’s important to note that 9-patch images don’t scale down – they only scale up. So it’s best to start as small as possible.
Also, you can leave out portions in the middle of the scale line. So for example, if you have a button with a sharp glossy edge across the middle, you can leave out a few pixels in the middle of the LEFT guide. The center horizontal axis of your image won’t scale, just the parts above and below it, so your sharp gloss won’t get anti-aliased or fuzzy.

Fill area guides are optional and provide a way define the area for stuff like your text label. Fill determines how much room there is within your image to place text, or an icon, or other things. 9-patch isn’t just for buttons, it works for background images as well.
The above button & label example is exaggerated simply to explain the idea of fill – the label isn’t completely accurate. To be honest, I haven’t experienced how Android does multi-line labels since a button label is usually a single row of text.
Finally, here’s a good demonstration of how scale and fill guides can vary, such as a LinearLayout with a background image & fully rounded sides:

With this example, the LEFT guide isn’t used but we’re still required to have a guide. The background image don’t scale vertically; it just scales horizontally (based on the TOP guide). Looking at the fill guides, the RIGHT and BOTTOM guides extend beyond where they meet the image’s curved edges. This allows me to place my round buttons close to the edges of the background for a tight, fitted look.
So that’s it. 9-patch is super easy, once you get it. It’s not a perfect way to do scaling, but the fill-area and multi-line scale-guides does offer more flexibility than traditional 9-slice and scale9. Give it a try and you’ll figure it out quickly.