Découvrir le développement d'applications avec Android 5

Découvrir la CardView

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Utilisez les CardView, disponibles dans la librairie de support. Ainsi, vous pouvez obtenir un résultat graphique cohérent avec les règles du Material design.
07:16

Transcription

Pour récupérer après ces quelques cours de Recycler View qui sont parfois un petit peu compliqué quand on débute on va s'occuper d'embellir un petit peu nos cellules, en utilisant les CardView, Les CardView sont des nouveaux éléments ajoutés le material design. et qui sont disponibles dans la librairie de support. Donc pour les utiliser, il vous suffit d'ajouter cette ligne dans votre fichier Gradle, au même endroit où on avait ajouté ceux de Retrofit. Donc CardView V7 est le même numéro de version que la librairie de support. Et vous cliquez sur sync now, ou alors sur l'icône qui est ici, pour dire à Gradle de télécharger ce qu'il ne connait pas encore. Une fois que c'est fait, on va retourner notre groupe cell, qui pour l'instant contient uniquement un Linear Layout et un TextView. et le remplacer par un CardView. Voyez, il me le propose, Android support V7. CardView Le CardView, c'est très similaire à un Frame Layout. Il hérite de Frame Layout, il ajoute uniquement des choses supplémentaires pour rendre le côté esthétique plus simple à gérer. On va laisser match parent pour la largeur pour la hauteur, on va le fixer à 200 dp. et comme c'est un CardView, on a des options en plus je commence à taper, voyez il me propose, elevation, background color, corner radius, etc. il y a plusieurs choses qu'on va pouvoir utiliser. Nous, on va utiliser le elevation, on va donner 4 dp, ça va soulever légèrement la cellule vers le haut, vers l'utilisateur, et projeter une ombre en dessous. Ça, ce sera visible que s'il y a des marges. Sinon, on va pas s'en rendre compte. Si par contre on donne, par exemple, 10 dp de marge automatiquement, on va bien voir l'ombre qui va être portée sous la carte. En plus de ça, on va ajouter des bords légèrement arrondis, pareil 4 dp. On lance notre application, on va essayer de voir l'aperçu, je clique sur le groupe de contacts pour voir ma liste. Et par rapport à tout à l'heure où on avait nos images, Là, on a nos cartes qui commencent déjà à prendre forme, c'est à dire que on a ajouté des marges sur le haut et sur les côtés, et aussi entre les éléments, plus, on voit l'ombre légèrement qui est sous ces éléments, grâce à l'élévation et en plus, on a les bords arrondis. Donc ça commence à prendre forme, à être sympa. On va concevoir l'intérieur maintenant. Pour l'image, plutôt que d'utiliser une ImageView on va utiliser une Network Image View. Alors regardez Network Image View, ça fait pas partie de la librairie standard, Ça fait partie de Volley, vous vous rappelez le Framework qu'on a utilisé pour télécharger tout à l'heure. Donc Volley fournit un objet Image View qui, au lieu de lui donner directement un objet, des données binaires d'image faut lui donner une URL. C'est très pratique quand on a des images qui viennent d'Internet, parce qu'avec l'Image View Standard, vous devrez d'abord télécharger entièrement dans un thread séparé, les images, et une fois que vous avez l'image, vous pouvez la passer à l'Image View. Le Network Image View, il gère tout pour vous. Donc ça, c'est assez sympa. On va lui donner une hauteur de 150 dp. On va lui préciser comment redimensionner l'image si elle ne fait pas la bonne taille, si l'image qu'il reçoit n'a pas la même taille ou les mêmes proportions que lui, comment est-ce qu'il doit gérer les choses Moi, ce qui m'intéresse, c'est centerCrop, CenterCrop, en fait, on va zoomer dans l'image, sans la déformer. Jusqu'à ce qu'il y ait au moins les deux bords qui y touchent, pour pas qu'il y ait de blanc sur les côtés, et pour ne pas non plus déformer l'image si elle n'est pas correcte. On va lui donner un ID. ID on va l'appeler group image Je pense qu'on est pas mal avec ça, pour notre image. Ce qu'on va faire pour le texte, on va faire en sorte qu'il fasse 50 dp, qu'il aille jusqu'en bas de son parent, et on va lui donner une marge pour qu'il passe en dessous de l'image, pour ne pas qu'il soit par-dessus l'image, puisque maintenant on n'a plus un linear layout, on a un Frame layout, l'équivalent d'un Frame layout avec le CardView. Donc c'est à nous à placer manuellement alors c'est pas margin, c'est margin Top, redescendre notre Tex View, Dans notre cellule, comment est-ce qu'on va gérer ça. Première chose à faire, retrouver notre image view, uiGroup On met Image View est égal à Network Image View, findViewByID point id, point groupImage Ça, ça va permettre, comm on avait fait pour le champ texte au lancement, à la création de la cellule, Ils mettent de côté une référence vers cet Image View, comme ça, dès qu'on lui dira d'afficher un groupe, il pourra directement donner une URL à l'mage Wiew et c'est justement ce qu'on va faire ici, groupImageView. Vous avez set images URL, qui fait partie justement de cette classe un petit peu spéciale, Network Image View, L'URL, on va la récupérer dans notre objet group. group, point, getImage On va lui dire de le créer, le getter La seule chose qu'a besoin le Network Imagine View c'est quand il donne un Image Loader, c'est un objet spécial de la librairie, et ça tombe bien puisqu'on a déjà notre classe toute prête qui nous le fournir getInstance getApplicationContext, comme on avait fait tout à l'heure. getImage Loader Voil, c'est tout. Je vais lancer mon application. Je vérifie juste que j'ai rien oublié. je pense que ça doit être pas mal. Alors on a oublié quelque chose. Il y a eu une erreur, alors je pense, NullPointerException Cette image URL...ça veut dire que lui était nul... Pourquoi est-ce qu'il serait nul ? Ah oui ! On a oublié le cell point. Si je fais juste FindViewByID, ça cherche dans toute l'activité, et là, en fait, il fallait que ça cherche dans les enfants de la cellule, alors forcément, il ne l'a pas trouvé donc il avait laissé nul à l'intérieur et à la première fois où on a essayé de mettre une image On va relancer, on va enlever cette alerte, effacer la console, on le lance, On a nos images qui s'affichent, ça commence à prendre forme, tout ça. Il nous reste plus qu'à mettre en forme le titre. On va pouvoir par exemple créer un style pour ça, donc on va aller dans le fichier style, ajouter ben tiens, on peut notre important text, on va le changer ce important text. Alors, background, on va mettre color primary, on va enlever ce monospace, pas utile, ça. Alors pour l'héritage, on va utiliser quelque chose qui existe déjà. Text Appearance AppCompat Large Dans la librairie compatibilité, il y a déjà des thèmes spéciaux pour les textes, alors du coup, on va pas fournir la taille, ça sera fourni par ça, et on va juste mettre le text color en blanc. Pour ça, on va pas prendre dans colors, ce sont que nos couleurs à nous, il y en a très peu. On va prendre dans celles d'Android. et on va prendre le white, Je vais mettre important text, comme style, sur mon élément. Important Text, et on va lancer là. Idéalement, on va rajouter juste un gravity center pour faire les choses bien. Item, Gravity Center et on relance, que notre texte soit centré, voilà ! Et là, c'est parfait.

Découvrir le développement d'applications avec Android 5

Développez des applications mobiles pour Android. Créez un projet de A à Z sous Android Studio, de l’installation du kit de développement, jusqu’à sa publication sur le Play Store.

3h17 (39 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Android Android 5
Spécial abonnés
Date de parution :17 mars 2016

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 !