Aller au contenu principal

Mise en page, LinearLayout

Avant la séance (2h)

Vous devez pensez à la mise en page des différents écrans de votre application

  • Connexion avec nom d'utilisateur et mot de passe
  • Inscription avec nom d'utilisateur et mot de passe
  • Liste des tâches (accueil)
  • Création d'une nouvelle tâche
  • Consultation du détail d'une tâche

Vidéo de révision :

Séance

On fera une démo pour donner des idées de mise en page.

Vous devrez compléter les mises en page de vos différentes activités.

Exercices de la semaine

👨‍🎓🤖 Exercice MiseEnPageA

Créez un projet appelé MiseEnPageA contenant une activité. Faites un layout avec un champ de saisie pour le courriel, un pour le mot de passe, un bouton d'inscription et un bouton de connexion.

La password doit être caché (avec des points), l'interface doit être claire : on sait quoi taper à quel endroit.

👨‍🎓👨‍🎓 Exercice MiseEnPageB

Téléchargez et roulez ce projet. Nous voulons générer 2 TextViews côte-à-côte, où celui de gauche occupe 1/4 et celui de droite 3/4 de la largeur de l'écran.

En utilisant le débogeur graphique (dans View > Tool Windows > Layout Inspector), inspectez les largeurs de tous les TextViews. Lesquels ont les proportions voulues?

Quelles sont les différences entre les 3 méthodes utilisées (les 3 couleurs)? Assurez-vous de bien comprendre ce qui se passe, par exemple pourquoi les 2 TextViews ont les bonnes proportions sur certaines lignes et pas sur d'autres.

👨‍🎓🤖 Exercice MiseEnPageC

Créez un projet appelé MiseEnPageC contenant 1 seule activité. Reproduisez la mise en page suivante en mode paysage : (n'utilisez pas de valeurs absolues, sauf pour du padding et des margins)

Mise en page

👨‍🎓🤖 Exercice MiseEnPageD

Copiez votre projet MiseEnPageC dans un dossier MiseEnPageD. Modifiez votre projet de l'exercice précédent pour reproduire la mise en page suivante :

Mise en page

👨‍🎓🤖 Exercice MiseEnPageE

Copiez votre projet MiseEnPageD dans un dossier MiseEnPageE. Modifiez votre projet de l'exercice précédent pour reproduire la mise en page suivante :

Mise en page