Android 9 patchs


Exemple

9 Les patchs sont des images extensibles dans lesquelles les zones pouvant être étirées sont définies par des marqueurs noirs sur une bordure transparente.

Il y a un excellent tutoriel ici .
En dépit d'être si vieux, c'est toujours si précieux et cela a aidé beaucoup d'entre nous à comprendre profondément les 9 équipements de patch.

Malheureusement, cette page a été récemment mise de côté (elle est actuellement à nouveau disponible).

Par conséquent, la nécessité d'avoir une copie physique de cette page pour les développeurs Android sur notre serveur fiable / s.

C'est ici.

UN GUIDE SIMPLE À L'APPLICATION 9-PATCH POUR ANDROID UI 18 mai 2011

Alors que je travaillais sur ma première application Android, j'ai trouvé 9-patch (aka 9.png) confus et mal documenté. Après un petit moment, j'ai finalement compris comment cela fonctionnait et j'ai décidé de rassembler quelque chose pour aider les autres à le comprendre.

Fondamentalement, 9-patch utilise la transparence png pour faire une forme avancée de 9-tranche ou échelle9. Les guides sont des lignes droites de 1 pixel dessinées sur le bord de votre image qui définissent la mise à l'échelle et le remplissage de votre image. En nommant votre nom de fichier image.9.png, Android reconnaîtra le format 9.png et utilisera les guides noirs pour mettre à l'échelle et remplir vos images bitmap.

Voici un guide de base:

entrer la description de l'image ici

Comme vous pouvez le voir, vous avez des guides de chaque côté de votre image. Les guides TOP et LEFT permettent de mettre à l'échelle votre image (c.-à-d. 9 tranches), tandis que les guides RIGHT et BOTTOM définissent la zone de remplissage.

Les lignes de guidage noires sont coupées / supprimées de votre image - elles n'apparaîtront pas dans l'application. Les guides ne doivent pas avoir plus d’un pixel de largeur, donc si vous voulez un bouton 48 × 48, votre png sera en réalité de 50 × 50. Tout ce qui est plus épais qu'un pixel restera dans votre image. (Mes exemples ont des guides de 4 pixels de large pour une meilleure visibilité. Ils ne doivent vraiment être que de 1 pixel).

Vos guides doivent être en noir (# 000000). Même une légère différence de couleur (# 000001) ou alpha entraînera une défaillance et un étirement normal. Cet échec ne sera pas évident non plus *, il échoue silencieusement! Oui. Vraiment. Maintenant tu sais.

Vous devez également garder à l'esprit que la zone restante du contour d'un pixel doit être complètement transparente. Cela inclut les quatre coins de l'image - ceux-ci devraient toujours être clairs. Cela peut être un problème plus grave que celui que vous réalisez. Par exemple, si vous redimensionnez une image dans Photoshop, elle ajoutera des pixels anti-aliasés pouvant inclure des pixels presque invisibles, ce qui entraînera également son échec *. Si vous devez évoluer dans Photoshop, utilisez le paramètre Voisin le plus proche dans le menu déroulant Rééchantillonnage d'image (en bas du menu contextuel Taille de l'image) pour conserver des bords nets sur vos repères.

* (mis à jour 1/2012) Il s’agit en fait d’un «correctif» dans le dernier kit de développement. Auparavant, il se manifestait sous la forme d'une rupture soudaine de toutes vos autres images et ressources, et non de l'image de 9 patchs réellement cassée.

entrer la description de l'image ici

Les guides TOP et LEFT sont utilisés pour définir la partie évolutive de votre image - GAUCHE pour la hauteur de mise à l'échelle, TOP pour la largeur de mise à l'échelle. En utilisant une image de bouton comme exemple, cela signifie que le bouton peut s'étendre horizontalement et verticalement dans la partie noire et que tout le reste, comme les coins, restera de la même taille. Cela vous permet d'avoir des boutons qui peuvent s'adapter à n'importe quelle taille et conserver un aspect uniforme.

Il est important de noter que les images à 9 patchs ne sont pas réduites - elles ne font qu’augmenter. Il est donc préférable de commencer le plus petit possible.

En outre, vous pouvez omettre des parties au milieu de la ligne d'échelle. Ainsi, par exemple, si vous avez un bouton avec un bord brillant au centre, vous pouvez laisser quelques pixels au milieu du guide LEFT. L'axe horizontal central de votre image ne sera pas mis à l'échelle, mais uniquement les parties situées au-dessus et au-dessous de celui-ci, de sorte que votre brillance ne deviendra pas anti-aliasée ou floue.

zone de remplissage

Les guides de zone de remplissage sont facultatifs et permettent de définir la zone pour des éléments tels que votre étiquette de texte. Fill détermine la quantité d'espace disponible dans votre image pour placer du texte, une icône ou d'autres choses. 9-patch ne concerne pas uniquement les boutons, il fonctionne également pour les images de fond.

L'exemple ci-dessus de bouton et d'étiquette est exagéré simplement pour expliquer l'idée de remplissage - l'étiquette n'est pas complètement exacte. Pour être honnête, je n'ai pas vu comment Android fait des étiquettes à plusieurs lignes, car une étiquette de bouton est généralement une seule ligne de texte.

Enfin, voici une bonne démonstration de la manière dont les guides d’échelle et de remplissage peuvent varier, tels que LinearLayout avec une image d’arrière-plan et des côtés entièrement arrondis:

entrer la description de l'image ici

Avec cet exemple, le guide LEFT n'est pas utilisé mais nous avons toujours besoin d'un guide. L'image d'arrière-plan n'est pas mise à l'échelle verticalement. il ne fait qu'échelonner horizontalement (basé sur le guide TOP). En regardant les guides de remplissage, les guides DROIT et BAS s'étendent au-delà de l'endroit où ils rencontrent les bords incurvés de l'image. Cela me permet de placer mes boutons ronds près des bords du fond pour un look ajusté et ajusté.

Alors c'est tout. 9-patch est super facile, une fois que vous l'obtenez. Ce n'est pas un moyen idéal de procéder à la mise à l'échelle, mais les repères d'échelle des zones de remplissage et des lignes multiples offrent une plus grande flexibilité que les modèles traditionnels à 9 et 9 tranches9. Essayez-le et vous le découvrirez rapidement.