Qu'est-ce qu'une image NinePatch

Une image NinePatch est une image PNG spéciale qui permet au système Android de redimensionner automatiquement les images en fonction du contenu sans distorsion ni étirement. Cela permet aux développeurs de créer des éléments d'interface utilisateur évolutifs tels que des boutons, des barres de progression et des images d'arrière-plan, qui n'ont pas plusieurs ensembles de ressources pour différentes tailles d'écran.

Création d'une image NinePatch

Draw 9-patch est un outil d'Android Studio permettant de créer et de modifier des images NinePatch. Il permet aux développeurs de tracer intuitivement des lignes de pixels noirs le long des bordures et de prévisualiser l'apparence de l'image dans différentes tailles. Il existe de nombreuses ressources et applications en ligne permettant de créer des images NinePatch en dehors des outils fournis avec Android Studio, telles que 9 Patch Editor.

Utilisation des images NinePatch

L'utilisation d'images NinePatch dans les applications Android est simple : vous les ajoutez au dossier res/drawable du projet, puis vous y faites référence à l'aide de android:background dans votre fichier de mise en page XML. Par exemple :

<Button android:id="@+id/tiny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="Tiny"
        android:textSize="8sp"
        android:background="@drawable/my_button_background"/>

<Button android:id="@+id/big"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="Biiiiiiig text!"
        android:textSize="30sp"
        android:background="@drawable/my_button_background"/>

Soyez prudent, layout_width et layout_height doivent utiliser wrap_content pour afficher correctement les boutons avec du texte.

Ce qui suit montre deux boutons rendus via XML et des images NinePatch. Comme dans la figure ci-dessus, observez comment la largeur et la hauteur des boutons changent avec le texte, tandis que l'image d'arrière-plan est étirée pour s'adapter à l'écran.

Image de boutons minuscules et de taille normale

Scénarios d'utilisation de NinePatch

Arrière-plans de boutons : C'est le cas d'application le plus courant pour les drawables. Étant donné que la longueur du texte peut varier d'un bouton à l'autre, NinePatch s'assure que l'image d'arrière-plan peut être entièrement couverte et ne sort pas de la limite ou ne se déforme pas avec le bouton à partir de la position du texte intérieur. Par exemple, si nous avons un arrière-plan de bouton à coins arrondis, nous utiliserons NinePatch et quelle que soit la longueur du texte du bouton, les coins arrondis resteront inchangés.
Arrière-plans de barres de progression : Il étire l'image d'arrière-plan sur la distance unitaire fixe avec la barre de progression où les distances unitaires sont différentes et varient avec le chargement d'un système à un autre. NinePatch garantit que le style de l'image d'arrière-plan ne sera pas déformé lors de l'étirement.
Arrière-plan de l'élément de liste : Dans la vue de liste, les arrière-plans de ces éléments de liste doivent en fait être différents en fonction de la longueur du contenu placé dans la vue. NinePatch garantit que les images d'arrière-plan s'étirent très bien sans se déformer.
Arrière-plans de la cage de dialogue : Dans de tels cas, la taille de la boîte de dialogue change en fonction du contenu. NinePatch garantit que les images d'arrière-plan s'étirent de manière cohérente avec le même style.
Séparateur évolutif : Avec NinePatch, un utilisateur peut concevoir un séparateur extensible horizontal ou vertical, adapté à plusieurs tailles d'écran et adaptabilités de mise en page.
Arrière-plans de formes définies par l'utilisateur : NinePatch construit une variété d'arrière-plans de formes définies par l'utilisateur telles que des coins arrondis, ombragés, etc. ayant différents effets spéciaux sans changement de ces effets lors de l'étirement.

Avantages de NinePatch

Évolutivité : C'est le plus grand avantage de NinePatch. Redimensionner automatiquement en fonction du contenu, ce qui élimine le besoin de maintenir plusieurs ensembles de ressources pour différentes tailles d'écran et longueurs de contenu.
Éviter la distorsion : Le contrôle des coordonnées de la zone extensible empêche les images de s'étirer. Les propriétés de netteté et de beauté sont conservées la plupart du temps.
Efficacité accrue : Moins de fichiers de ressources et donc une efficacité accrue dans le développement.
Disposition flexible : Il peut facilement créer différentes formes et tailles d'éléments d'interface utilisateur pour s'adapter à diverses exigences de mise en page.

Fonctionnement de NinePatch

La caractéristique d'une image NinePatch est une bordure entièrement étroite d'un pixel. Cette bordure définit l'évolutivité et la zone du contenu de l'image. Le dessin de lignes de pixels noirs sur les bords indique quelle partie doit s'étirer en périphérie, laquelle verticalement et laquelle horizontalement.

Image of stretchable area
and padding box

En particulier, une bordure d'un pixel est divisée en quatre parties :

1. Bordure gauche (ligne de pixels noirs verticale) :

Fonction : Contrôle l'étirement vertical de l'image. La ligne de pixels noirs verticale sur la bordure gauche définit les zones de l'image qui peuvent être étirées verticalement.
Par exemple :
- Une ligne sans pixel noir : La hauteur de l'image est fixe ; par conséquent, elle n'est pas capable d'un étirement vertical. S'il essaie d'être placé dans un conteneur plus haut que l'image elle-même, il restera tel quel et peut avoir des zones vides ou être coupé.
- Une ligne de pixels noirs : L'image peut être étirée verticalement, mais ensuite limitée aux zones spécifiées par les lignes de pixels noirs. Par exemple, si une ligne de pixels noirs est placée au milieu d'une bordure gauche, cela signifierait que la moitié supérieure et la moitié inférieure ne changeraient pas, l'étirement vertical n'étant autorisé que dans la partie médiane.
- Plusieurs lignes de pixels noirs : Il peut être défini par plusieurs régions d'étirement vertical. Par exemple, il y aura deux lignes de pixels noirs sur une bordure gauche, qui divisent l'image en trois parties au niveau des parties extensibles centrales, les parties supérieure et inférieure restant inchangées.

2. Bordure supérieure : (Lignes horizontales de pixels noirs d'eau) :

Fonction : Contrôle l'étirement horizontal de l'image. Une ligne de pixels noirs horizontale sur la bordure supérieure définit les parties extensibles de l'image dans la dimension horizontale.
Par exemple :
- Une ligne sans pixel noir : La largeur de l'image est fixe et n'est pas étirée horizontalement. Semblable au cas sans ligne de pixels noirs sur la bordure gauche, l'image restera la même, mais peut avoir des zones vides ou être coupée.
- Une ligne de pixels noirs : L'image peut s'étirer horizontalement, mais encore une fois, uniquement dans la zone spécifiée par la ligne de pixels noirs. Par exemple, si la ligne de pixels noirs se trouve au milieu de la limite supérieure, la moitié gauche de l'image ne changera pas, ni la moitié droite, ne permettant qu'un certain étirement au milieu.
- Plusieurs lignes de pixels noirs : Il définit diverses régions extensibles latérales. Comme le cas de la bordure gauche avec diverses lignes de pixels noirs horizontales, il divise l'image en plusieurs parties, et toute section ainsi marquée peut s'étirer horizontalement.

3. Bordure droite (lignes de pixels noirs verticales) :

Fonction : Définir le remplissage droit de la zone de contenu. Les lignes de pixels noirs verticales sur la marge droite indiquent la limite droite de la zone de contenu de l'image. Pendant l'étirement, le côté droit de la zone de contenu restera sur cette limite.
Exemples :
- Pas de lignes de pixels noirs : La zone de contenu s'étend jusqu'à la marge droite de l'image, ne fléchissant pas lorsque le contenu s'étire, laissant le contenu de l'image s'étendre jusqu'au bord droit.
- Une ligne de pixels noirs : Le bord droit de la zone de contenu est déterminé par la position de la ligne de pixels noirs. Lorsqu'elle est étirée, le côté droit de la zone de contenu restera en place au niveau de la ligne de pixels noirs tandis que l'espace à droite est étiré.

4. Limite inférieure (la ligne horizontale de pixels noirs) :

Fonction : Définir la marge inférieure de la zone dans laquelle le contenu est confiné. La ligne de pixels noirs horizontale en bas définit où se termine la limite inférieure de la zone de contenu de l'image. Les étendues du bas de la zone de contenu resteraient à cette limite lorsqu'elles sont étirées.
Exemple :
- Pas de ligne de pixels noirs : la zone de contenu s'étend jusqu'au bord inférieur de l'image. Lorsqu'elle est étirée, l'intégralité du contenu de l'image s'étend jusqu'au bord inférieur.
- Une ligne de pixels noirs : la limite inférieure de la zone de contenu provient de la position de la ligne de pixels noirs. Lorsqu'elle est étirée, le bas de la zone de contenu restera au niveau de la ligne de pixels noirs et l'espace blanc en dessous sera étiré.

En utilisant des lignes de pixels noirs intelligentes sur ces quatre bordures, le programmeur peut contrôler précisément la manière dont l'image Nine Patch s'affiche à différentes tailles, tout en veillant à ce qu'elle le fasse sans déformation ni perte de la zone de contenu. Gardez à l'esprit que ces lignes de pixels sont les limites de définition de la zone extensible à partir de la zone de contenu, et non les limites réelles de l'image. Les parties sans lignes de pixels noirs sont des composants de taille fixe.

Remarques

Une image NinePatch doit être enregistrée avec un nom de fichier se terminant par .9.png.
Une dimension minimale de 2x2 pixels dans la zone extensible est nécessaire pour que l'image ne disparaisse pas lors de la mise à l'échelle.
Un espace de sécurité supplémentaire sur les bords de la zone extensible peut éliminer les changements de couleur qui se produisent lors de la mise à l'échelle.
Assurez-vous de vérifier très soigneusement les régions extensibles et de contenu de l'image afin que l'image s'affiche correctement dans différentes dimensions.
N'utilisez pas trop d'images NinePatch, en particulier dans les interfaces animées ou celles qui changent fréquemment, car elles réduisent les performances.

Résumé

Les images NinePatch sont les outils les plus puissants pour améliorer l'efficacité de la conception de l'interface utilisateur et améliorer l'expérience utilisateur dans les applications Android. Cependant, cela ne signifie pas que les développeurs n'auront pas à équilibrer les avantages et les limites, car le choix du type d'image dépend des exigences. Par exemple, même si les images NinePatch sont le bon choix pour les arrière-plans évolutifs ou les éléments d'interface utilisateur qui doivent accepter différentes longueurs de texte, les images PNG normales feront très bien l'affaire pour les images d'arrière-plan statiques - leur simplicité est l'attrait. Lors de l'utilisation de NinePatch, le plus grand soin en matière de conception et de test doit être exercé pour garantir qu'il fonctionne parfaitement sur une gamme d'appareils et de tailles d'écran.