[Tutoriel Android] Partie 12 – Le 9-patch

Qu’est-ce que le 9-patch ? Demandez à votre grand-mère, elle vous dira que c’est une technique de tricotage

En fait, ce n’est pas du tout ça, mais l’esprit y est. Le 9-patch est une technique graphique permettant de découper une image en 9 sections : les quatre coins ne sont pas redimensionnés mais les 4 arrêtes sont redimensionnées selon leur axes, et pour finir le milieu est redimensionné selon les deux axes X et Y.

Vu comme ça, on a du mal à comprendre à quoi ça peut servir de tricoter une figure en 9 sections ; mais l’intérêt est d’autant plus grand quand il s’agit de redimensionner un objet sans que son aspect esthétique soit pénalisé.

L’outils de travail

Prenons l’exemple de cette forme :

C’est un simple rectangle aux coins arrondis contenant un dégradé, le souci est que si on l’étire on va se retrouver avec une forme des plus bizarres.

On voit que l’étirement ne se fait pas proprement et que les coins ne sont plus si arrondis que ça, donc nous allons utiliser un outils nommé le 9-patch pour résoudre notre petit dilemme.

Android embarque dans ses outils un petit programme permettant de corriger ce genre de soucis. Il s’appelle « draw9patch.bat » qui se trouve dans le répertoire « tools » du sdk.

Lorsqu’on lance le logiciel, nous nous trouvons avec cette interface :

Il suffit de glisser / déposer une image sur la flèche pour que l’on puisse commencer à travailler.

Une fois l’élément déplacé, on se retrouve désormais avec un tout autre espace de travail :

L’espace est divisé en 3 parties :

• Gauche : Espace de travail (création des patchs)
• Droite : Espace de visualisation du résultat
• Bas : Espace de configuration

Une petite aide sur ses outils :

• Show lock : Affiche les endroits indisponibles pour travailler avec le 9-patch
• Show patches : Affiche les tracés des patchs
• Show content : Affiche l’espace autorisé pour afficher des données (textes ou autres)

Nous voyons que tout autour de notre image un bandeau de 1px de largeur est ajouté automatiquement, cet espace permet de dessiner notre 9-patch.

Sur la partie Haut et Gauche, nous pourrons designer les parties étirables ; sur le côté Droit et Bas, nous pourrons dessiner l’espace que le contenu pourra utiliser.

Création

D’un simple clic gauche dans l’espace de 1px tout autour de l’image, nous pouvons ajouter un petit pixel (de couleur noir), qui sera en charge de désigner que l’endroit est étirable.

Vous pouvez voir le résultat sur la partie de droite, notre rectangle est propre.

J’ai volontairement coché les cases (Show patches (traits verts) et Show content (rectangle violet)).

Modifions les deux autres côtés comme ceci :

Vous voyez que la zone de contenue est modifiée, le contenu restera donc dans cette zone.

Sauvez le fichier sur votre ordinateur, vous remarquerez qu’il comporte une extension « monfichier.9.png », cela signifie qu’il est un 9-patch, ce qui permettra à Android de travailler avec.

N’oubliez surtout pas le .9 il est très important pour le SDK.

Utilisation

Créez un nouveau projet. Puis dans le dossier « res », rajoutez un nouveau dossier « drawable », puis placez y notre fichier de type 9-patch.

Puis, dans notre fichier main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<Button
android:background="@drawable/bouton"
android:text="Mon Bouton perso"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>

</LinearLayout>

Lancez l’application et voyez par vous-même :

Le bouton est affiché avec le fond que vous avez créé en 9patch.

Conclusion

Cet outil est très simple d’utilisation, il permet d’adapter ses images très simplement sans les étirer de façon disgracieuse.

Vous pouvez vous amuser avec ce petit outil et créer de nouveaux boutons, fond pour les layouts etc….