sai0si2022 19:40, 2PENCLASSROOMS: Q Accueil > Cours > Construisez une interface utilisateur flexible et adaptative > Créez une application oplimisée pour différentes tailes crane Construisez une interface utilisateur flexible et adaptative © 2heures 4] Moyenne Mis 8 jour le 07/12/20: Créez une application optimisée pour différentes tailles d’écrans Bienvenue sur 'école 100% en ligne des métiers qui ont de l'avenir. Bénéficiez gratuitement de toutes les fonctionnalités de ce cours (quiz, vidéos, acces illimité & tous les chapitres) avec un compte. Créer un compte ou se connecter hitpsjlopenclassrooms.comiricourses/4568596-construisez-une-interface-ullisateur-lexible-et-adaptativel4782756-creez-une-applicaion-optim CCxéez une application optimisée pour diférentes tales d'écrans - Constnuisez une interface ullsateurflaxble ot adaptative ~ ana81052029 19:40 —_Créez une application optimisée pour diférentes tales 'écrans - Construisez une interface utiisateur laxcble at adapiative Dans le chapitre précédent, nous avons vu la théorie. Maintenant, nous allons passer & la pratique en rentrant dans le vif du sujet : nous allons créer notre premiére application optimisée pour les différentes tailles d'écrans ! Nous allons, & partir d'une application fraichement créée, aborder point par point les notions essentielles pour créer un design homogéne et propre sur 'ensemble des terminaux Android. application de départ est disponible ce lien. (C'est une simple application vide, méme pas de "Hello World") Création d'une interface basique v Dans cette partie, nous allons créer une interface graphique tres simple, contenant une image et un texte, sur un seul écran. Téléchargez et ouvrez application Android disponible a ce lien (si vous ne l'avez pas déj fait) avec Android Studio puis lancez-la sur un émulateur avec une résolution en xxhdpi (par exemple le Nexus 5) Attention, téléchargez bien l'application depuis le commit en question, et non |'application terminée dans la branche master. Mais mais ! Je ne sais pas créer un émulateur sur Android Studio ! Rien de compliqué ! Quand vous exécutez votre application, vous devriez voir cette fenétre : hitpsilopenclassrooms.conviicourses/4568596-construlsez-une-nterface-ullisateur-exible-et-adaptativel4782756-creez-une-appication-optim... 2/141810512023 19:40 —_Créaz une application opimisée pour diférentes tales 'écrans - Construisez une interface utiisateur lxible ot adaptative ee ‘Select Deployment Target reate New Virtual Device Cliquez sur le bouton "Create New Virtual Device’ afin de créer un émulateur. Choisissez * Eeran1: Le Nexus 5 (dont la densité est égale a xxhdpi) + Ecran 2: Limage systéme, celle que vous souhaitez (je prends généralement les plus basses) * Ecran 3: Nommez-la comme bon vous semble (pour moi ce sera Nexus_5.API_24_xxhdpi, joli nom non ?) Votre application devrait maintenant étre lancée : Super ! Maintenant, nous allons créer notre interface graphique afin qu'elle ressemble & cela hitpsjlopenclassrooms.comiricourses/4568596-construisez-une-interface-ullisateur-lexible-et-adeptativel4782756-creez-une-applicaion-optim ana1810512023 19:40 __—_Créaz une application ptimisée pour différentes tales 'écrans - Construisez une interface utiisateur laxible ot adaptative catia 26 a a Avant Aprés Pour cela, nous allons tout d'abord : 1- Importer une image jotre projet dans le dossier drawable/ que l'on appellera ic. openclassrooms,png (vous pouvez trouver limage brute ici), 2- Modifier notre layout activity_main.xml afin de lui ajouter une image ainsi qu'un texte 9 10 ua 2 B uw 15 xml version="1.0" encoding="utf-8' LinearLayout xnilns:android http: //schenas.android.con/apk/res/android” hetp://schenas. android. con/tools ‘Layout_width="natch_parent android: 1ayout_height="natch_paren! xnlns: tool} androi android:orientation="vertical tools: context="com.openclassroons .toolmybar Mainactivity’ 30 4edi 5 éle= Images —-> 6 200d‘p 7 @dinen/size_inage_height35sp 4 padding title">40dip 5 10dip 6 Inages --> 7 200dip 8 @dinen/size_inage_height 9 Cette nouvelle taille sera paramétrée sur notre TextView dans notre fichier res/layout- land/activity_main.xml dont voic' le résultat final : xml 1. 9 19 <1-- Block 1 prenant 1a premigre moitié de 1'écran (propriété layout_weight) --> a1 26 27 28 29 39 a 42 4B 44 hitpsilopenclassrooms.comviicourses/4568596-construlsez-ne-interface-utlisateur-lexble-et-adaptaivel4782756-creez-une-applicaion-opti... 11/1481082029 19:40 —_Créez une application optimisée pour diférentes tales écrans - Construisez une interface utiisateur lable at adaptative Et voila ! N'hésitez pas a ster 'application en mode Paysage sur les autres terminaux (Nexus One et Nexus 9) afin de vérifier que la nouvelle valeur "padding_title land" n’a pas besoin a’étre redéfinie pour plus de granularité dans fes autres fichiers dimen.xmi. Résultat v Plutét réussi non ? Le rendu de notre affichage est maintenant a la fois agréable sur smartphone ET tablette, ainsi qu'en mode Paysage ET Portrait. N'hésitez & pas vous amuser avec ce projet et gérer encore plus de type de terminaux ! ns BS Nexus One Nexus 5 Nexus 9 Vous trouverez le code source de l'application a cette adresse. Conclusion v Maintenant que nous savons gérer l'affichage de notre application sur différents écrans et orientations, nous n’avons plus aucune excuse pour ne plus créer diinterfaces utiisateurs fantastiques | @ Dans le prochain chapitre, nous introduirons la barre d'outils ainsi que son implémentation, afin de donner encore plus de possibilités & notre navigation. Et si vous obteniez un dipl6me OpenClassrooms ? ‘Formations jusqu’a 100 % financées * Date de début flexible ‘+ Projets professionnalisants ‘+ Mentorat individuel hitpsilopenclassrooms.conviicourses!4568596-construlsez-ne-interface-ullisateur-flexble-et-adaptativel4782756-creez-une-applicaon-opti... 12/14