• Non classé
  • 3

ConstraintLayout – Partie 1

Qui n’a pas été contraint de multiplier les ViewGroup pour aligner des widgets ? De rendre invisible plusieurs éléments en même temps ? Ou encore de devoir gérer le placement dynamique d’éléments ?

A tous ceux qui ont répondu « Moi », j’ai la solution : Le ConstraintLayout.

Introduction

Apparu en Mai 2016 lors de la Google I/O le ConstraintLayout ressemble à peu de chose au RelativeLayout. En effet, en plus d’hériter des contraintes de placement, le ConstraintLayout apporte son lot de nouveautés avec la possibilité de lier des Widgets, Text, … entre eux, d’appliquer un « poids » à la manière du LinearLayout ou encore d’attribuer un identifiant unique à plusieurs éléments pour effectuer des actions groupées.

Sachez aussi que le ConstraintLayout, de par sa hiérarchie dite « plate » accélère grandement le temps de chargement et évite tous les ralentissements provoqués par la création des vues imbriquées.

Je vous propose dans ce tutoriel de découvrir les bases du ConstraintLayout au travers d’une page d’authentification d’un jeu. Nous utiliserons des assets de jeu pour créer un décor, des boutons, … disponibles ici.

Prérequis

Ce tutoriel utilise la version 1.1.0 Beta 2 du ConstraintLayout et la version 3.0 Beta 6 d’Android Studio. Néanmoins, je préciserai les contraintes disponibles avec la dernière version release du ConstraintLayout 1.0.2 et d’Android Studio 2.3.3.

Pour utiliser la version beta :


implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta2'

La création de l’interface ne se fera volontairement qu’avec l’utilisation du mode Design qui est recommandé par Android pour l’utilisation du ConstraintLayout.

Les sources (et assets utilisés) sont disponibles sur Github.

Interface avec le ConstraintLayout

Placement basique et multiple

Dans cette première partie nous allons nous concentrer sur le placement des nuages de notre fenêtre.

Placé sur le mode « Design » de notre fichier layout, il suffit de glisser/déposer une première ImageView dans notre ConstraintLayout.

Un widget placé dans un ConstraintLayout doit avoir au moins deux contraintes, une verticale et une horizontale. Pour se faire, sélectionnez l’ImageView, cliquez et maintenez, sur une des ancres (situées au centre autour du widget) et déplacez-vous vers un point d’ancrage disponible. Faites de même pour la seconde contrainte.

Placement d’un widget dans le ConstraintLayout

A l’inverse de notre première image nous allons vouloir, pour la seconde, une contrainte horizontale vers la droite de l’écran. Pour la contrainte verticale, plutôt que de réitérer un alignement sur le haut de l’écran, nous prendrons comme point d’ancrage le bas de notre première ImageView. Faites le test ensuite de déplacer verticalement la première image pour voir la seconde suivre le mouvement. J’ajoute qu’il est toutefois possible de définir une marge en bas de notre seconde image pour la surélever mais restera liée à la première.

Contrainte sur un widget

 

Création du formulaire d’authentification

Notre formulaire sera composé de deux TextView et deux PlainText. S’offre à nous ici une multitudes de contraintes possibles pour le placement des widgets de manière individuel mais aussi pour la position globale du formulaire.

Je vais vous présenter de nouvelles contraintes offertes par ce layout, à vous ensuite de faire votre choix pour la globalité de l’élément formulaire.

Aligner un widget au centre

Pour aligner un élément au centre de l’écran il suffit de lui définir les quatre contraintes autour de lui.

Centrer un widget

Aligner sur la « Baseline »

Comme pour le RelativeLayout il est possible d’aligner les widgets Text sur la « Baseline ». Ajoutez, à coté de notre TextView, un PlainText. Sélectionnez ce dernier et cliquez sur l’option « Edit baseline ». Comme pour les points d’ancrages, maintenez un clic entre la baseline de votre PlainText et celle de votre TextView.

Contrainte sur la Baseline

Vous avez tous les éléments pour continuer l’implémentation du formulaire, voici quelques consignes :

  • Les TextView sont alignés sur la droite ;
  • Les PlainText sont alignés sur la gauche ;
  • L’alignement vertical se fait entre les baselines des TextView et celle des PlainText.
  • Les TextView ont une marge gauche de 52dp
  • La marge entre les TextView et les PlainText sera de 56dp
  • L’écart entre les TextView sera de 40dp

Exemple de solution :

Les Chains

Nous savons placer des éléments sur nos vues, les aligner, les center, mais nous ne savons pas encore les répartir sur un axe. C’est ici que les Chaînes (ou chains en anglais) interviennent. A la manière d’un LinearLayout avec l’attribut gravity=’center’, les chaînes vont lier les widgets ensemble et les répartir sur un axe donné. Derrière ce mécanisme se cache une notion de contrainte réciproque, je dis bien se cache car il est impossible d’ajouter « à la main » (via le mode Design) une contrainte de A vers B et de B vers A.

Pour ajouter une chaîne, sélectionnez les widgets à lier puis :

  • Clic droit -> Chain -> Create Horizontal Chain (ou Vertical)

  • Ou via le menu situé en haut de la fenêtre de Design

Une chaîne est créée entre les widgets et les contraintes gauche et droite (dans l’exemple) sont automatiquement ajoutées.

Une nouvelle option de contrainte fait son apparition sur chaque widget lié : « Cycle Chain Mode ». Cette dernière permet de répartir les éléments de 4 façons différentes :

Spread (par défaut) : les widgets sont répartis uniformément sur l’axe.

Spread inside : Le premier et dernier widget sont alignés respectivement à gauche (ou haut) et à droite (ou bas), le reste de l’espace est réparti uniformément.

Packed : Les widgets sont regroupés. Il est possible dans ce mode de déplacer la chaîne en ajustant le bias d’un des widgets.

Weighted : Avec le mode Spread et Spread inside vous pouvez, à la manière du LinearLayout, attribuer un « poids » aux différents widgets de la chaîne pour qu’ils occupent plus ou moins de place. Dans l’exemple ci-dessous l’ImageView de droite possède un poids de 2 (contrainte « horizontal_weight ») quand les 2 précédentes ont un poids de 1.

Pour pratiquer un peu nous allons ajouter 2 boutons en dessous de notre menu d’authentification.

Consigne :

  • Les boutons, positionnés en dessous du menu d’authentification, sont alignés et répartis sur l’axe horizontal.

Exemple de solution :

Nous verrons dans une seconde partie d’autres concepts du ConstraintLayout pour faciliter, la création de vos interfaces, la disposition de vos widgets, ainsi que la nouvelle unité de placement, le Bias.

ConstraintLayout – Partie 2

Vous aimerez aussi...

3 réponses

  1. octobre 9, 2017

    […] Seconde et dernière partie consacrée au ConstraintLayout. Avant de continuer, je vous invite, si ce n’est pas encore fait, à lire la première partie. […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Recevez un ebook GRATUIT !

Nous vous avons créé un ebook pour vous remercier de votre fidélité. Retrouvez les 10 librairies indispensables pour Android. Pour cela rien de plus simple vous avez juste à renseigner votre email, vous recevrez un mail de confirmation (pour que l'on vérifie que vous n'êtes pas un robot), il suffira de vous inscrire à la liste et vous recevrez l'Ebook quelques instant après (peut prendre un petit peu de temps car vous êtes beaucoup à le vouloir).
Votre adresse email
Secure and Spam free...