Java pour les développeurs Android

Réaliser une interface graphique

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Votre formateur réalise une petite interface graphique simple avec l'éditeur. Vous réutiliserez cette interface pour votre premier projet.
08:16

Transcription

Maintenant que vous avez une idée de comment fonctionne le « LinearLayout » ainsi que l’éditeur graphique, nous allons continuer la réalisation de notre interface graphique. Nous avons donc déjà fait les deux « TextView » et les deux « EditText ». Nous allons passer aux radios boutons. Les deux radios boutons vont aller ensemble dans un radio groupe. C’est le fait d’être dans le même radio groupe qui fait que si je clique sur l’un ça désactive l’autre. On peut voir que les composants étaient, jusque là, l’un en dessous de l’autre. Mais ici, nos deux radios boutons vont être l’un à côté de l’autre. Donc je vais rajouter un radio groupe qui est un container. Je l’ajoute à mon « LinearLayout ». Mes radios boutons, je ne vais pas les mettre dans mon « LinearLayout » mais dans mon radio groupe. Une nouvelle flèche apparait pour me dire que mon radio bouton est à l’intérieur de mon radio groupe. Le deuxième. On peut voir le rendu. Si je clique sur mon radio groupe, on voit les petits carrés qui m’indiquent tout l’espace que prend le radio groupe. En hauteur, je vais le passer à « wrap_content » pour qu’il ne prenne que l’espace qu’il faut. On voit qu’ils sont l’un en dessous de l’autre. Nous, on les veut l’un à côté de l’autre. On va donc changer son orientation et on va la passer de par défaut, vertical, à horizontal. Ils sont donc maintenant l’un à côté de l’autre. Je vais prendre mon premier radio groupe et je vais lui donner l’état de « checked » pour faire un premier élément chécké par défaut. Au niveau du texte, « ALT-144 » pour faire un « e » accentué. Même chose pour le deuxième. Nous avons donc nos deux radios groupes. Pour le bouton, attention à ne pas le mettre dans le radio groupe. Je vais donc le fermer. Notre bouton vient en dessous. Je lui change son texte. Ici, on voit que j’ai un texte écrit en minuscule et pourtant le rendu est en majuscule. La raison, c’est que par défaut, dans le « textAppearance » du bouton, le « All Caps » qui signifie « tout en majuscule » est coché. Donc je peux soit l’enlever, soit l’activer. En l’occurrence, on va le laisser. Voilà pour notre bouton « AJOUTER ». Passons à la « seekBar ». Même chose, elle va venir en dessous. Ma « seekBar », je vais pouvoir la régler, déterminer en fait le nombre d’éléments. Je vais dire qu’il y en a 10 au maximum. « Progress » : je vais le mettre à un. Ça veut dire quoi ? Ça veut dire que par défaut, il sera sur l’élément numéro un et non sur l’élément numéro zéro. Il y a un deuxième composant « seekBar » : « Discrets ». Alors la différence, il suffit de les mettre l’un en dessous de l’autre, pour assez facilement comprendre. Donc je vais mettre un « progress » à un, un « max » qui est à 10. Et là en fait, on peut voir les petites boules qui apparaissent. La différence, c’est que dans le premier, ça se déplacera et les petites boules ne seront pas là alors que dans le deuxième, on verra toutes les petites étapes. Bon, je vais en enlever un des deux. Ça ne sert à rien d’en avoir deux. Continuons avec nos deux derniers boutons. Donc on voit ici qu’ils sont l’un à côté de l’autre. Donc même chose : il va falloir leur mettre un nouveau « layout ». Donc ça sera cette fois un horizontal. Si on clique, on voit tout l’espace qu’il prend. Donc là, il prend trop d’espaces. Donc en hauteur, on le repasse à « wrap_content » et à l’intérieur, on va y mettre nos deux boutons qui vont du coup se mettre l’un à côté de l’autre. Alors, si on regarde maintenant le rendu souhaité, on voit qu’il manque une petite marge ici, tout autour. Cette petite marge s’appelle un « padding ». En fait, qu’est-ce qu’on va faire ? On va simplement dire à notre « LinearLayout » qu’on veut que ses composants, au lieu de commencer au début du « LinearLayout », ils laissent un petit espace. Et donc on va lui donner une valeur de « 5dp ». Donc là, on a un rendu. On va mettre « 10dp » en padding pour obtenir l’effet voulu. Il existe un autre élément qui est le « margin ». Ici, entre mes radios boutons et mon « editText », je vais vouloir rajouter un peu d’espace. Donc je vais prendre mon radio groupe et je vais lui appliquer un « margin » mais cette fois uniquement au « top », c'est-à-dire uniquement par rapport au composant qui est au-dessus de lui. Donc là, je vais mettre 20, toujours en « dp » et on voit qu’un espace entre les deux s’est inséré. La différence entre un « padding » et un « margin », c’est que le « padding », c’est à l’intérieur du composant alors que le « margin », c’est par rapport aux autres composants. Pour bien voir la différence, je vais prendre un radio bouton. Je vais zoomer. Là, si je lui applique un « padding » à gauche, je vais mettre 20, on peut voir qu’à l’intérieur, il me crée un espace. Par contre, si je le transfère en « margin » à gauche, eh bien on va voir que c’est tout le composant entier qui se déplace. Voilà la différence entre le « margin » et le « padding ». Donc notre interface graphique est terminée. Il manque juste un dernier petit détail. Donc dans notre « TextView », mettre notre nom et prénom. Dans mon « EditText », l’« EditText » étant sensé être quelque chose que l’utilisateur rentre, on pourrait normalement le laisser à vide. Je vais le pré-remplir avec une valeur pour éviter d’avoir à écrire une valeur à chaque fois que je veux tester mon application. Bien sûr, une fois en prod, il y aura peut-être une pertinence à l’enlever. Dernier élément maintenant, quand on va travailler en Java, pour pouvoir identifier tous les composants graphiques, on va leur donner un « id », tous les composants graphiques avec lesquels on veut interagir, donc récupérer la valeur qui aurait été rentrée dans l’« EditText » par exemple. Donc je vais sélectionner mon « EditText » et dans « id », je vais commencer « et_ », donc « et » pour « EditText ». Ce n’est pas une convention, c’est une façon que moi j’utilise pour identifier en fait quel type de composant graphique il s’agit juste avec le nom de son « id ». Même chose pour le deuxième « EditText » : « et » pour « EditText ». Attention à ne pas mettre d’accent dans le nom de vos « id ». Même chose : le radio bouton, on va interagir avec. Donc on va lui donner un « id ». Donc radio bouton, « rb ». Notre bouton, même chose, on va vouloir savoir à quel moment on a cliqué dessus. Notre « seekBar », il n’y en a qu’une. Notre bouton « AJOUTER PLUSIEURS ». Tous nos composants ont maintenant un « id ». On va maintenant tester pour vérifier si tout fonctionne bien. Donc mon application s’est lancée dans mon émulateur. Je teste. Mes deux radios boutons interagissent bien entre eux. J’ai bien une « seekBar ». Et je peux cliquer sur mes boutons. C’est fini pour la mise en place de notre projet. Dans le chapitre suivant, nous allons découvrir Java et grâce à Java, apprendre à manipuler 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 !