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.

Java pour les développeurs Android

S'initier à l'interface graphique

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Votre environnement de développement Android Studio inclut un éditeur graphique. Ainsi, vous serez en mesure de concevoir des interfaces graphiques.
08:46

Transcription

Encore une dernière étape avant de pouvoir commencer à apprendre Java. Dans cette vidéo, je vais vous montrer comment on travaille sur les interfaces graphiques avec Android. Le but : réaliser cette interface graphique. Donc on peut y voir qu’il y a plusieurs composants. « Nom » et « Prénom » représentent des composants appelés « TextView ». « Toto » et « Tata » représentent des composants appelés « edittext », c'est-à-dire que l’utilisateur peut écrire dedans. « Élève », « Enseignant » : ce sont des radio-boutons. Je clique sur l’un, cela désélectionne l’autre. J’ai trois boutons et une « seekBar ». Comment on va mettre en place tout ça ? On voit que les composants sont les uns en dessous des autres sauf pour « Élève » et « Enseignant » qui sont les uns à côté de l’autre. Et même chose pour « AJOUTER PLUSIEURS » et « SUPPRIMER DERNIER ». Ils sont l’un à côté de l’autre. L’interface graphique en Java est faite dans des fichiers XML. Dans notre projet qui a été généré, nous avons le fichier « activity_main.xml ». Dans un fichier XML, il y a deux parties : on peut le voir en mode « Text » ou switcher en mode « Design ». On va commencer avec le mode « Text ». Selon les versions d’« Android Studio », la première balise n’est pas forcément la même. Pour rendre ça générique, je vais imposer la première balise. Je vais remplacer tout ce qu’il y a marqué ici par « LinearLayout ». Juste en commençant à écrire, attention à bien mettre le L majuscule, je vois marqué « LinearLayout », je peux le sélectionner. Il m’a automatiquement modifié aussi la balise de fin. Toute cette partie-là, je vais l’enlever pour partir d’un fichier vierge avec juste la balise « LinearLayout ». Je vais maintenant passer en mode « Design » et vous l’expliquer. Je vais cliquer ici pour gagner un peu de place sur mon écran. Je rappelle : pour le faire réapparaitre, il suffit de recliquer sur « Project ». Même chose ici. Je peux faire apparaitre ou disparaitre ma palette de composants. Donc on peut voir qu’il y a un certain nombre de composants. En dessous, j’ai un rendu de mes composants. Encore en dessous, il y a l’arbre de mes composants que je peux faire apparaitre ou disparaitre. Donc actuellement, je n’ai qu’un composant. Je n’ai que le « LinearLayout ». On va y mettre un « TextView ». Donc je vais prendre mon « TextView » et le faire glisser dans mon arbre. J’ai une petite flèche qui apparait, qui m’indique que je peux ouvrir ce composant. Le « TextView » est donc à l’intérieur du « LinearLayout ». Il est dit « enfant » et le « LinearLayout », parent. Un « Layout » est un composant graphique qui peut contenir plusieurs autres composants graphiques. Donc un « LinearLayout » peut contenir d’autres « LinearLayout » qui peuvent contenir à leur tour d’autres « LinearLayout ». C’est comme ça qu'on va pouvoir assembler notre interface graphique. Je vais y mettre un « Edit Text ». Ici, on peut voir qu’il n’y a pas spécifiquement marqué « Edit Text ». En fait, tout ça ce sont des « Edit Text » sauf que leurs différences, c’est le texte qu’on va mettre dedans. Donc on voit par exemple « E-mail », c’est un « Edit Text » qui est fait pour recevoir un e-mail. Qu’est-ce qui va changer au final ? C’est le clavier. Le clavier qui apparaitra possèdera la touche @. En mode « Password », je verrais les petites étoiles apparaitre. Dans notre cas, nous allons prendre un « Plain Text », c'est-à-dire un « EditText », tout ce qu’il y a de plus basique. Je vais remettre un « TextView » et remettre un « EditText ». Je vois dans mon rendu que j’ai mes composants qui se sont mis de gauche à droite. Le « LinearLayout » est un « layout » qui permet de placer ces composants soit de haut en bas, soit de gauche à droite. Nous, dans notre cas, on a besoin qu’il soit de haut en bas. Je vais donc aller dans l’« orientation » et changer son orientation. Donc là actuellement, elle est en version par défaut, c'est-à-dire horizontale. Moi, je vais la passer en version verticale. Voilà, mes composants sont de haut en bas. Mais ils n’ont pas du tout la taille voulue, pourquoi ? Tout simplement parce que par défaut, un composant reçoit un poids de un. Si je passe ici, je vais pouvoir afficher toutes les propriétés de mon composant. Là, je n’ai qu’un résumé de ces propriétés. Donc je vais sélectionner le « TextView », afficher toutes ses propriétés et là, je vois en agrandissant un peu la fenêtre que « layout_weight », donc « weight » pour le poids, a un poids de un. Alors, que représente le poids ? C’est simple. Une fois qu’on a dessiné tous nos composants graphiques, tous les composants qui ont un poids vont se partager l’espace restant. Ça veut dire quoi ? Ça veut dire que si j’enlève mon poids à tous mes composants, je les sélectionne tous, je leur enlève tous le poids, mes composants graphiques ne vont prendre que la place dont ils ont besoin. Si maintenant, à mon « TextView », je lui applique un poids. Ça sera le seul à avoir un poids. Donc dans les propriétés, les attributs utilisés sont en haut. Donc là, comme mon « layout_weight » n’est plus utilisé, il est revenu à sa position, à savoir à la position du L. Je lui applique un poids. Qu’est-ce qui va se passer ? Comme on est dans un « layout » vertical, de haut en bas, lui il va prendre toute la place qui reste en hauteur, c'est-à-dire que mes trois composants se sont dessinés et lui, il prend tout ce qui reste. Si je l’applique à l’autre « TextView », ils vont se partager les espaces qui restent, c'est-à-dire qu’ils seront deux à prendre tout l’espace qui reste. Dans notre cas, nous ne voulons pas qu’ils prennent toute cette espace. Donc je vais leur enlever le poids. Donc voilà pour la hauteur. Maintenant, pour la largeur, nous n’avons aucune contre-indication au fait qu’il puisse prendre toute la largeur de la ligne. Donc « layout_width » pour la largeur, « layout_height » pour la hauteur. On voit qu’il y a la valeur « wrap_content ». Il y a trois valeurs possibles. « Wrap_content » qui veut dire : prend uniquement l’espace dont tu as besoin. C’est ce qui se passe actuellement en hauteur. « Match_parent » : prend toute la place que tu peux. Donc en fait, prend toute la place que ton parent t’autorise à avoir. Donc actuellement, le « LinearLayout » étant le parent, ça représente tout l’écran. Donc là, le fait de les passer en « match_parent », ils vont prendre toute la largeur. Alors, petite question : quelle est la différence entre mettre « match_parent » et de mettre un poids ? La différence, c’est qu’il faut imaginer qu’il y a deux passages dans le calcul des composants graphiques. Le premier passage, on utilise « layout_width » et « layout_height ». Le deuxième passage, on utilise les poids. Ça veut dire quoi ? Ça veut dire que si mon « TextView », ici, je lui donne en hauteur « match_parent », il va prendre toute la place qui reste. Comme c’est le premier passage, on peut voir que le quatrième composant a disparu tout simplement parce qu’au premier passage, il va calculer ordre par ordre nos composants. Donc il proportionne mon premier « TextView », mon « editText ». Mon troisième dit qu’il veut aller jusqu’à la fin de l’écran, « match_parent ». Il prend toute la place qui reste. Et mon quatrième, il n’a plus de place, il n’apparait pas. Si je lui mets un poids et que je le mets en hauteur à « wrap_content », on arrive avant le calcul des poids, ils ont chacun l’espace dont ils ont besoin. Puis, on calcule les poids. Là, il réalise que « TextView » a un poids et donc il va lui appliquer tout l’espace qui reste, c'est-à-dire tout cet espace blanc ici. Je disais qu’il y a « wrap_content », « match_parent » et il y a aussi une troisième possibilité, c’est simplement de dire directement la valeur que l’on veut. Par exemple, je vais lui dire que je veux une largeur de 200. Alors, 200 quoi ? C’est quoi l’unité ? L’unité, c’est « dp » pour « density independent pixel ». Qu’est-ce que cela représente ? Ça veut dire que quelle que soit la définition du téléphone, quelle que soit la taille de l’écran, si je mesure la largeur de mon composant, j’obtiendrai une certaine valeur. Ici, 200 dp représente environ 31 millimètres. C'est-à-dire que quel que soit le « device » où je vais lancer mon application, je vais me retrouver avec, si je mesure, 31 millimètres de largeur pour mon « TextView ». Donc on voit ici « 31 millimètres », ça représente cette zone-là. J’ai la possibilité d’avoir le rendu sur différents téléphones. Donc ici, je vais pouvoir sélectionner sur quels types de téléphone je veux voir le rendu. Donc par exemple ici, j’ai un rendu sur un « Nexus 5 ». Même chose pour la version d’Android. Je vais pouvoir tester sur toutes les versions d’Android. Pour pouvoir avoir d’autres versions d’Android disponibles pour le rendu graphique, il faut télécharger les « SDK » correspondants de la même manière qu'on a téléchargé les « Google USB driver ». Maintenant, vous avez une idée de comment fonctionne le « LinearLayout » ainsi que l’éditeur graphique. Dans les formations sur le développement Android du catalogue, il y a des vidéos pour aller plus loin sur la réalisation d’interfaces graphiques ainsi que sur l’utilisation des autres « layout » et des autres composants graphiques. Dans la vidéo suivante, je réaliserai la suite de cette interface graphique.

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 !