Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Android : L'interaction avec les appareils

Éditer les images avec NinePatch

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Éditez et modifiez vos images à l'aide de l'outil NinePatch fourni avec le SDK d'Android (Software Development Kit, kit de développement logiciel).
04:25

Transcription

Dans cette vidéo, je vais vous montrer comment fonctionnent les « 9-Patch » qui servent à étirer les images. Pour cela, je vais partir d'une image qui est déjà dans notre projet, qui est « ic_launcher ». Je vais me contenter de la dupliquer et de la mettre dans « drawable » pour ne pas toucher l'original. Donc, j'ai mon image dans « ic_launcher », je vais la transformer en « 9-Patch ». Pour cela je vais faire un clic droit dessus, « create 9-Patch». Il m'a simplement dupliqué l'image en me rajoutant l'extension « .9 » pour point « nine ». Je vais supprimer la première. Voilà, je vais fermer l'image et je vais la réouvrir avec l'extension « .9 » et me voilà dans l'éditeur de « 9-Patch ». Ici, j'ai mon image. Maintenant, je vais pouvoir définir comment je veux qu'elle s'étire. Donc, actuellement, sur la partie de droite, j'ai la version étirée en hauteur, étirée en largeur et étirée des deux côtés. Je vais augmenter l'étirement et donc on voit ici, qu'en hauteur elle commence à s'étirer de toutes parts, c'est-à-dire que chaque pixel est dupliqué. Plus j'étire, plus on voit les yeux qui sont en train de s'étirer. Je vais faire en sorte qu'en hauteur, l'image ne s'étire pas et qu'en largeur, je n'ai que le milieu qui s'étire. Pour n'avoir que le milieu qui s'étire, je vais mettre un pixel en haut car au moment où on a transformé notre image en « 9-Patch », il a rajouté un pixel tout autour, transparent. Ici, je mets un point noir. Lui, que va-t-il faire ? Il va interpréter ce pixel de contour et chaque point noir correspond à la zone à dupliquer. Ici, c'est cette zone-là qui sera dupliquée. On peut voir le résultat ici, on voit bien que mes yeux n'ont pas été étirés, j'ai bien cette zone-là qui a été étirée. Maintenant pour la hauteur, que vais-je faire ? Je vais dire que c'est cette zone-là qui sera dupliquée et cette zone-là. Si je reviens sur mon image étirée en hauteur, elle garde son aspect original parce que, du coup, ce sont juste les parties blanches et transparentes qui ont été étirées. Ici, j'ai bien ma largeur qui est toujours étirée et quand je fais la somme des deux, j'obtiens le même résultat, vu que ce ne sont que les zones transparentes qui ont été étirées. Si je veux retirer un point noir, je reste appuyé sur la touche « shift » et je reclique sur le point noir. et donc, pour le remettre. Quel est l'intérêt de mettre les deux ? Dans mon rendu, si je n'en mets qu'un seul j'obtiens à peu près le même résultat. C'est juste que mon image prendra tout un ensemble d'espaces et qu'elle sera centrée vers le bas, alors que si je rajoute un pixel en haut et un pixel en bas, mon image sera centrée. Voilà donc pour la partie gauche et la partie haute de mon image. Pour la partie droite et la partie basse, cela représente à la zone de texte du bouton et uniquement pour les boutons. Je vais donc déclarer que je veux une zone de texte qui aille d'ici à ici. C'est-à-dire entre les antennes. Ça, c'est pour la partie horizontale et pour la partie verticale, je vais définir d'ici à ici. Voilà, donc si je me mets ici, je peux voir mon rectangle qui correspond à ma zone de texte si mon image devient le fond de mon bouton. Je vais donc maintenant mettre en application cette image. Dans mon fichier « ActivityMain », il n'y a qu'un « RecyclerView », je vais créer un bouton. En largeur, je vais lui mettre toute la largeur, en hauteur, je vais lui mettre « 150 dp », je vais lui donner un « text » et en « background », je vais lui donner cette image, donc « @ drawable », attention à ne pas confondre avec « bitmap » qui correspond à l'image originale. Je passe en mode design, je zoome, et là, on peut voir que mon image n'a bien été étirée qu'en largeur. D'ailleurs, si j'augmente la taille de mon composant, mon image reste au centre, avec la même taille en hauteur. Bien sûr, je peux mettre cette image dans d'autres composants, mais la zone de texte n'est applicable que pour les boutons. SI je transforme mon bouton en « textView », mon texte est en haut, à gauche. Il n'est plus dépendant, mon image ici n'est qu'un arrière-plan. Je le remets donc en bouton. Voilà pour les images étirables grâce au « 9-Patch ».

Android : L'interaction avec les appareils

Exploitez les outils mis à disposition par le kit de développement Android. Améliorez l’expérience utilisateur de vos applications​ mobiles​ avec les composants et les animations.

1h58 (23 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !