Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Java pour les développeurs Android

Concevoir l'interface graphique

Testez gratuitement nos 1344 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Suivez votre formateur dans le maquettage et la conception d'une interface graphique à l'aide de l'éditeur graphique d'Android Studio.
10:10

Transcription

Dans cette vidéo, je vais essayer d'expliquer au maximum, comment je réalise cette interface graphique, en expliquant pas-à-pas. Je vais commencer avec un « LinearLayout ». Je vais commencer par la première ligne. Première ligne, nous allons faire un « LinearLayout » qui sera horizontal, et dedans, nous allons y mettre deux « TextView ». Ici, je vois que mes deux « TextView » ont la même taille. Il y a de grandes chances qu'il y ait un poids. Effectivement, ils ont chacun un poids. Maintenant, je vais demander à mon « Layout » principal de les centrer, avec la balise « gravity ». Mon « Layout » va centrer ses enfants : « gravity », « center ». Et là, je vois que mes « Layout » sont au centre de l'écran. C'est normal. Si je prends ce « Layout », on voit qu'il prend tout l'écran. Ce qui est trop. Il est sensé seulement prendre la place dont il a besoin en hauteur : « wrap_content ». Je n'ai plus qu'à remplir mes deux « TextView ». Alors, je les sélectionne les deux, je vais mes mettre en gras, je vais donner une taille de « 36 ». Ici, en appuyant, on voit qu'il y a marqué « sp » et non « dp ». Mais le principe est le même. Le premier, je vais lui mettre un texte de « Tour : », et le deuxième, une valeur par défaut. Voilà pour la première ligne. Deuxième ligne, la plus compliquée. On va donc commencer avec un « LinearLayout » horizontal. « Layout » horizontal. Si on analyse notre ligne, on voit qu'il y a trois blocs Le premier qui va contenir un autre « LinearLayout », mais vertical, avec deux « TextView » et une « ImageView », ça c'est pour le premier bloc. Le deuxième bloc, pareil. Et le bloc central, ce sera simplement un composant graphique, n'importe lequel, donc on va prendre un « TextView ». Dans lequel nous n'allons rien mettre, à part un « background » en gris, et nous allons lui donner une largeur de deux « dp ». Commençons, déjà, par mettre dedans, le premier « Layout » vertical. Donc, j'ai un premier « Layout » horizontal et on va faire le premier bloc. Mon premier bloc : « Layout » vertical. On a dit : un « TextView », un deuxième « TextView » et une « ImageView ». Ici, il me propose toutes les images, mes images du projet. En l'occurrence, je vais prendre une image du « Sdk » qui s'appelle « quelque chose star », elle est là. Je les mets dans le bon ordre. Ici, on va le regrouper après, pour l'instant, on veut seulement qu'il soit centré et le premier en gras. Je vais prendre mon composant « Layout » dans « gravity ». Je « switch » pour larguer tous les composants et je vais lui demander de les centrer. Donc, il me les a bien centrés en hauteur, mais pas en largeur. Oui, si on regarde, les trois composants ont une largeur à « match_parent ». Soit une largeur à « match_parent », soit un poids. Alors, on va regarder : « width », « match_parent », on va le mettre à « wrap_content ». La même chose, « wrap_content », et lui, a « wrap_content » aussi. Alors, deux solutions, soit on fait ce que je viens de faire, c'est-à-dire, mettre la largeur à « wrap_content », soit, on demande au composant de se centrer à l'intérieur de lui-même. Donc, je vais le faire pour celui-là. Je remets une largeur à « match_parent » et dans son « gravity », je le mets à « center » : deux façons de faire. Donc, nous avons dit que le premier allait s'appeler « Joueur1 ». Le deuxième, il va s'appeler « Score : ». Je vais changer l'« ID », « Joueur1 »... « Score ». Ici, même principe que pour le « Tour », Je n'ai mis qu'un seul « TextView », j'en ai besoin de deux. Si je veux soulager le code et n'avoir que la partie dynamique, accessible. Donc, je vais reprendre un « Layout », cette fois horizontal, dans lequel je vais mettre « TextView », ainsi qu'un deuxième « TextView ». Mon « Layout » est beaucoup trop grand, en hauteur, donc, en hauteur, on le remet à « wrap_content ». Là, malheureusement, je vais devoir enlever ma stratégie de tout-à-l'heure et le remettre à « wrap_content » pour que les deux soient collés. Ici, on voit qu'ils ont tous les deux la même taille, oui, ils ont tous les deux un poids, donc, on l'enlève. Mon composant, ici, est bien centré au milieu, sauf que comme il prend toute la largeur, on ne voit pas le fait qu'il soit centré. Donc, si je le mets, en largeur, à « wrap_content », il se retrouve centré. Le premier texte, pour le joueur, nous avons dit : « en gras » et on va le mettre un peu plus grand. On va le mettre à « 18 ». Et le deuxième, ici, on va changer le texte, on va mettre « score : ». Là, on a, à peu près, le rendu que l'on veut, sauf que l'on voit assez facilement que lui aussi prend toute la hauteur. Donc, hauteur « wrap_content » et en largeur, même chose. J'ai fait mon premier bloc. Si nous avons trois blocs, le premier, le deuxième et le troisième. Le troisième bloc étant la même chose, je vais me contenter de copier-coller le bloc. Alors, attention à bien prendre ce que l'on veut, c'est ce bloc-là. Copier-coller. Donc, tous les « ID » vont être en « erreur », car un « ID » doit être unique. « Joueur1 », je vais mettre « Joueur2 ». Et, je me contente d'incrémenter mes « TextView », « 17 », « 18 », pour que l'« ID » soit différent. On reviendra sur les « ID » après. J'ai mes deux blocs, il me manque mon séparateur. Donc, je vais prendre un « TextView » que je vais mettre entre les deux et ce « TextView », je vais lui appliquer une largeur de « 2dp », je ne vais pas lui mettre de texte, je vais lui enlever son poids, on veut qu'il ait, justement, que « 2dp ». En hauteur, je vais lui dire « match_parent », son rôle, c'est de prendre toute la place et on va lui donner un « background », en arrière-plan, trois petits points, couleurs. Et nous allons lui donner un arrière-plan gris. Donc, si on prend mon composant, ici, même chose, on voit qu'il est trop grand. Donc, nous allons le réduire à « wrap_content » . Alors, maintenant, pour avoir cet effet-là, que va-t-il falloir faire ? Il va simplement falloir dire que ce composant-là et ce composant-là ont la même taille. Nous allons leur attribuer le même poids. Je les sélectionne les deux, « layout_weight », je leur mets un poids dedans. Et voilà, pour ma deuxième ligne. Il ne me manque plus que mettre un « margingTop » à « 20 ». Nous passons à ma troisième ligne. Là, on a seulement un bouton. Ce bouton, nous allons le mettre à « wrap_content », et nous allons lui mettre le texte « Lancer ». Là, même chose, je peux soit, demander au composant principal de centrer tous mes composants, soit, je peux demander au bouton de se centrer lui-même. Je vais faire cette stratégie-là : « gravity ». Il m'arrive régulièrement de confondre « gravity » et « layout_gravity ». Il y a un, c'est pour se centrer lui-même, l'autre, c'est pour centrer ce qu'il y a à l'intérieur de lui-même. Par exemple, pour que le texte soit centré. Donc là, « center », même chose pour le « margingTop », cette fois, je vais mettre « 40 ». Il nous reste la dernière ligne, donc, deux « TextView », auxquels je vais appliquer une largeur et une hauteur identiques, de manière à ce que cela fasse un carré. Nous allons commencer par le « Layout » horizontal, deux « TextView », ces deux « TextView », ils ont un poids, nous allons l'enlever. Hauteur, nous allons mettre « 80 », largeur, nous allons mettre « 80 ». En « background », je vais mettre un fond bleu. Au niveau du texte, je vais lui mettre une taille de « 36 ». Je vais lui mettre un chiffre qui représentera une valeur du dé. Couleur du texte, on va mettre blanc, donc, « white ». Il faut bien cliquer sur « couleur ». Il me reste à centrer : « gravity », donc, celui-là. Maintenant, pour obtenir cet effet-là. Je suis dans un « Layout ». Je voudrais que ces trois espaces, entre les deux, soient les mêmes. Je vais créer trois composants graphiques, que je vais masquer et auxquels je vais donner un poids de « 1 ». On va prendre trois « TextView ». Un avant, un au milieu et un après. Ces trois « TextView », je vais les sélectionner, de base, ils ont eu un poids de « 1 », donc, on a bien cette séparation. Je vais utiliser la balise « visibility » pour les passer à invisibles. « Visible », « invisible », c'est assez compréhensible. Quel est l'intérêt du « gone » ? Simplement, invisibles, ils sont non-visibles, mais ils sont là. Par contre, « gone », ils ne sont pas là. Donc, on fait comme s'il n'y avait pas les composants. Dans notre cas, nous avons « invisible ». Il ne manque plus que le « margingTop », je vais mettre « 40 », également. Nous avons réalisé notre interface graphique. Nous allons pouvoir la récupérer côté Java et la manipuler.

Java pour les développeurs Android

Prenez en main la syntaxe et les concepts de Java pour vos développements d’applications pour Android. Abordez les variables, les chaînes de caractères, les conditions, etc.

7h01 (65 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :24 avr. 2017

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 !