Utilisation d'images 9-patch dans Android

De Appmethod Topics
Aller à : navigation, rechercher

Remonter à Création d'une app Android


Cette rubrique décrit comment utiliser des images 9-patch pour l'écran d'accueil de vos applications Android.

Il se peut qu'Android étire l'image lors de l'affichage de l'écran d'accueil ; utilisez les images 9-patch pour définir la manière dont les images seront étirées.

A propos de 9-patch

Une image 9-patch est une image bitmap étirable avec une extension de fichier .9.png. Vous pouvez créer une image 9-patch pour configurer la manière dont l'image sera étirée si elle doit être redimensionnée. Les images 9-patch sont des images .png standard qui ajoutent 1 pixel supplémentaire à l'image pour configurer :

  • une zone étirable : définit la manière dont l'image pourra être étirée. Cette zone est définie dans les repères d'une largeur de 1 pixel en haut et à gauche de l'image 9-patch.
  • une zone de remplissage : définit la zone dessinable de l'image. Cette zone est définie dans les repères d'une largeur de 1 pixel en bas et à droite de l'image 9-patch.

Pour indiquer la zone étirable ou la zone de remplissage de l'image, dans les repères d'une largeur de 1 pixel correspondants, peignez en noir uni les pixels qui définissent ces zones. Les pixels restants définissent les zones non étirables ou non dessinables et doivent être entièrement transparents ou blancs.

Nous vous invitons à consulter la documentation Android 9-patch pour plus d'informations sur les images 9-patch.

Création d'une image 9-patch

Pour créer une image 9-patch, vous pouvez utiliser l'outil draw9patch disponible dans C:\Utilisateurs\Public\Documents\Embarcadero\Studio\17.0\PlatformSDKs\adt-bundle-windows-x86-20131030\tools\lib. Vous pouvez utiliser des images .png standard et les convertir en .9.png. Pour créer une image 9-patch pour l'écran d'accueil de votre application Android, procédez comme suit :

  1. Ouvrez l'outil draw9patch disponible dans C:\Utilisateurs\Public\Documents\Embarcadero\Studio\17.0\PlatformSDKs\adt-bundle-windows-x86-20131030\tools\lib.
  2. Chargez une image .png standard, en utilisant File > Open 9-patch... ou faites glisser et déposez l'image.
    Remarque : La conversion d'une image .png en .9.png ajoute un périmètre de pixel supplémentaire, de sorte que les images .png sont enregistrées avec 4 pixels supplémentaires (2 horizontalement et 2 verticalement). Gardez cela à l'esprit lorsque vous préparez les images .png à convertir en 9-patch. Le chargement d'images .9.png n'ajoute aucun pixel supplémentaire, celles-ci restent en l'état.
  3. Lorsque l'image est chargée sur l'outil draw9patch, le volet gauche est la zone dessinable dans laquelle s'affiche l'image que vous êtes en train de modifier. Le volet droit affiche un aperçu de l'apparence de l'image après son étirement.
  4. Pour définir la zone étirable, cliquez sur les bordures d'une largeur de 1 pixel en haut et à gauche, et peignez les pixels partout où l'image peut être étirée.
  5. Pour définir la zone de remplissage dans Appmethod, il est important que vous peigniez entièrement les bordures d'une largeur de 1 pixel en bas et à droite afin d'indiquer que la zone entière est dessinable.
    Avertissement : Assurez-vous que vous remplissez entièrement les bordures d'une largeur de 1 pixel en bas et à droite lorsque vous créez l'image 9-patch, sinon, la fiche de votre application risque de ne pas s'afficher correctement.
  6. Une fois que vous avez défini la zone étirable et la zone de remplissage, cliquez sur File > Save 9-patch... pour enregistrer votre image 9-patch qui sera enregistrée avec l'extension de fichier .9.png.

L'image ci-dessous illustre un exemple d'une image 9-patch utilisée comme écran d'accueil Android :

Android9patchSplashImage.png

Nous vous invitons à consulter la documentation Android Draw 9-patch pour plus d'informations sur la création d'une image 9-patch.

Ajout d'images 9-patch à votre écran d'accueil Android

Vous pouvez utiliser des images 9-patch dans les écrans d'accueil de vos applications Android. Pour inclure des images d'accueil 9-patch dans vos applications Android, procédez comme suit :

  1. Dans votre application multi-périphérique, choisissez Projet > Options > Application pour ouvrir les Options de l'application.
  2. Dans la plate-forme cible, choisissez Toutes les configurations – Plate-forme Android.
  3. Dans l'onglet Artwork, changez toutes les images d'accueil des images 9-patch en utilisant l'extension de fichier .9.png.
  4. Assurez-vous que l'option Inclure l'image d'accueil est cochée.
  5. Construisez votre projet pour Android si cela n'a pas déjà été fait. Sélectionnez Android comme plate-forme cible dans le Gestionnaire de projets pour construire le projet pour la plate-forme Android.
  6. Choisissez Projet > Déploiement pour ouvrir le Gestionnaire de déploiement.
  7. Dans le Gestionnaire de déploiement, sélectionnez Configuration Débogage – Plate-forme Android.
  8. Désactivez splash_image_def.xml à partir du Gestionnaire de déploiement.
    Remarque : Le fichier splash_image_def.xml indique à Android comment placer l'image d'accueil en fonction du mode mosaïque de l'écran d'accueil et des options de gravité de l'écran d'accueil définis dans les options du projet Android. En désactivant splash_image_def.xml, ces options sont ignorées et l'image affichée remplit l'écran.

A partir de cette étape, il y a deux moyens différents d'ajouter des images d'accueil 9-patch à votre application Android :

Méthode 1

Cette méthode consiste à désactiver le fichier splash_image_def.xml.

Après avoir suivi toutes les étapes précédentes :

  1. Changez le nom distant de toutes les images d'accueil de splash_image.png en splash_image_def.9.png.
  2. Vous pouvez maintenant exécuter le projet dans votre périphérique ou simulateur Android pour voir l'image d'accueil 9-patch en fonctionnement.

Méthode 2

Cette méthode consiste à créer un nouveau fichier splash_image_def.xml.

Après avoir suivi toutes les étapes précédentes :

  1. Changez le nom distant de toutes les images d'accueil de splash_image.png en splash_image.9.png.
  2. Créez un nouveau fichier XML avec le contenu ci-dessous :

    <?xml version="1.0" encoding="utf-8"?>
    <nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/splash_image"
    android:dither="true"/>
    

    Remarque : Assurez-vous que la conversion EOL (fin de ligne) du document XML est définie sur le format UNIX/OSX. La fin de ligne EOL doit seulement être de type LF (passage à la ligne, '\n') et non pas de type CR LF (retour chariot, passage à la ligne, '\r\n').
  3. Ajoutez le document XML au Gestionnaire de déploiement (cliquez sur DMgrAddFiles.png).
  4. Dans le document XML que vous venez d'ajouter, changez le nom distant en splash_image_def.xml et le chemin distant en res\drawable\.
  5. Vous pouvez maintenant exécuter le projet dans votre périphérique ou simulateur Android pour voir l'image d'accueil 9-patch en fonctionnement.

Voir aussi