Java pour les développeurs Android

Créer une IHM

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez créer l'interface utilisateur de l'écran principal avec CardView, un nouveau composant graphique.
08:40

Transcription

Dans cette vidéo, nous allons continuer d'analyser le lien et réaliser les IHM. Donc, notre lien possède quatre premiers attributs. Donc, si on imaginait une classe Java, elle aurait quatre attributs. Le premier serait de type INT et le deuxième serait une nouvelle classe Java contenant tous ces attributs et ainsi de suite. Si on regarde l'attribut parameters, il n'y a pas spécialement d'informations qui nous intéressent. Même chose pour facet_groups. Ce qui nous intéresse, est dans record. On devra faire un premier Java bin qui aura un attribut record. On peut voir grâce aux crochets qu'il s'agit d'une liste. Une liste d'un ensemble d'éléments. Notre attribut record sera une ArrayList. Une ArrayList d'objets représentés par toutes ces informations. Donc, un nouveau Java bin qui contiendra un attribut datasetid, recordid et ainsi de suite. On peut voir que field est de nouveau un objet. Donc, on va devoir créer un objet field qui contiendra un attribut manifestation gratuite et ainsi de suite. Pour éviter de tout créer, nous allons voir quelle partie nous intéresse dans notre application. Nous avons besoin du nom de la manifestation, du descriptif court et du descriptif long. Après le reste, libre à vous d'essayer de les exploiter. Le but : obtenir ce rendu. Une liste, le nom de la manifestation le descriptif court. Je clique : le nom de la manifestation, le descriptif long. Réalisons nos IHM. Je vais donc partir de ma première IHM. Je vais avoir un titre, un bouton, un message donc un autre TextView. Nous avons deux TextView et un bouton. Et ici, nous avons un RecyclerView. Comme d'habitude, je vais partir du LinearLayout et tout effacer pour partir de zéro. Je passe en mode design. J'affiche mon arbre. Je vais mettre mon Layout de haut en bas. Donc, une orientation verticale. Je vais commencer avec un TextView, un bouton et un deuxième TextView. Donc, un TextView, un bouton, un deuxième TextView. J'ouvre: TextView, bouton, TextView. New sample, Je n'ai aucun composant qui prend toute la place sur l'écran. Et je termine avec mon RecyclerView. Il me propose d'ajouter la bibliothèque de RecyclerView. Je lui dis que oui. Je vous rappelle, dans le build.Gradle, il va ajouter une ligne qui permettra de charger le RecyclerView. Et mon RecyclerView prend bien tout le reste de l'écran. Mettons en forme. Donc, ici, nous avons un texte écrit en gros et centré. Je vais mettre une taille de 24, mettre en gras et centrer. Je vais écrire « événement à Toulouse ». Alt 144 pour le E accentué. Pour une petite mise en forme, je vais inclure un padding en haut et en bas. 20 dp... top et buttom. Nous allons passer maintenant au bouton. Pas grand chose à faire à part écrire « charger » dessus. Ce composant va être interactif. Nous allons donc le manipuler, il lui faut un id. Je vais l'appeler « bouton charger ». Continuons avec le texte, le texte qui est juste centré. Je vais donc centrer le texte. Je vais le décoller un petit peu du bouton. Pour cela je vais lui appliquer un marginTop. Légèrement. Donc 5 devraient suffire. Même chose, je vais le décaler de notre RecyclerView. Je vais lui appliquer un marginBottom. Ce TextView nous allons interagir avec. Puisque nous allons dire si ça a échoué ou si ça a réussi. Je vais lui donner un nom. Textview_info, c'est mieux comme nom. notre RecyclerView, nous allons lui donner un nom. Je vais l'appler « rv » pour RecyclerView. Voilà pour l'écran principal. Maintenant, écrivons une ligne de notre liste. Si on analyse notre liste, Nous regardons que notre ligne contient : un titre, une description. Je vais donc créer un nouveau fichier. New, que je vais appeler « ligne_evenement ». Cette fois, nous allons utiliser un nouveau composant. Pour obtenir ce petit effet d'ombre et d'encadrement, cela s'appelle un CardView. Nous allons utiliser un CardView qui est ici. Comme le RecyclerView, il faut intégrer la librairie. Je vais utiliser donc le CardView. Sauf que le CardView, va être notre composant principal. Je vais donc transférer, au lieu d'utiliser un LinearLayout en départ, je vais utiliser un CardView. Voilà, donc j'ai juste décalé. J'ai juste fait en sorte que mon CardView soit mon élément principal. À l'intérieur de mon CardView, je vais mettre un LinearLayout. Vertical, de haut en bas avec deux TextView. Un premier TextView, un deuxième TextView. Pour le premier, on va le mettre en gras. Une taille de 18. Pour le deuxième, une taille de 12. Maintenant, je vais demander à mon LinearLayout qui prend ici beaucoup trop de place, puisqu'il prend tout l'écran. On va le passer en wrap_content. Et je vais lui appliquer un padding. Je vais lui appliquer un padding général de 20. Il ne me reste plus qu'à travailler sur ma CardView. Dans le CardView, il y a un attribut qui s'appelle le cardCornerRadius. On va lui mettre 4 dp. À quoi ça correspond ? Ça correspond à l'arrondi que l'on souhaite pour les angles. C'est-à-dire ici, l'angle qui est là. Et afin qu'on puisse voir les angles... Ici on ne le voit pas car il est collé au bord. C'est fait exprès. Je vais donc lui appliquer un margin. Un margin de 10 à gauche, de 10 à droite, de 5 en haut et de 5 en bas. Mon CardView prend trop de place en hauteur. On va le passer à wrap_content. Nous avons bien ici nos petits arrondis. Alors, revenons à notre fichier principal. Et dans notre RecyclerView, nous allons pouvoir lui dire quelle liste on compte mettre dedans. Ici... on compte mettre celle-ci. Voilà. Donc, maintenant, nous avons un rendu de notre résultat. Voilà pour l'IHM de notre écran principal.

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 !