• Non classé
  • 1

ConstraintLayout – Partie 2

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.

Nous allons continuer à développer l’interface pour notre page d’authentification. Nous utiliserons la nouvelle unité de placement: le Bias, les Guidelines pour ajouter des lignes de références (points d’ancrage), ainsi que deux concepts encore en beta: les Groups et Barriers.

Le Bias

Si vous êtes un peu curieux vous avez remarqué, une fois votre implémentation terminée, qu’Android Studio vous informe qu’il vous manque une contrainte. Si vous ne l’avez pas vue, observez l’icône située en haut à droite de votre fenêtre Design .Cliquez dessus, Android Studio vous liste les vues pour lesquelles il manque des contraintes et vous précise lesquelles.

Dans notre cas, le TextView « Login » n’a pas de contrainte verticale.

Pour cette dernière je voudrais que vous placiez la TextView (et indirectement l’ensemble des éléments du formulaire d’authentification) à 40% de la hauteur de l’écran.

Pour effectuer cette contrainte nous n’utiliserons pas le PercentRelativeLayout ou tout autre placement approximatif en « dp » mais la nouvelle unité de placement qu’offre le ConstraintLayout : le Bias.

Exprimé en pourcentage (décimal entre 0 et 1), le Bias permet de placer un widget entre deux contraintes opposées (haut/bas ou gauche/droite).

Plusieurs façons d’effectuer l’ajout de cette contrainte. Sélectionnez le TextView puis :

  • Ajoutez deux contraintes en haut et en bas vers, respectivement, le haut et le bas de l’écran.
  • Ou via un Clic droit -> Center -> Center Vertically in Parent
  • Ou via le menu situé en haut de la fenêtre du mode « Design»

Vous pouvez ensuite voir apparaitre la nouvelle contrainte « Vertical Bias » qui vous permet de déplacer la TextView au pourcentage près. Comme dit précédemment, les widgets ayant au moins une contrainte avec notre TextView suivront le déplacement de ce dernier.

Les Guidelines

Continuons à développer notre fenêtre d’authentification et concentrons-nous maintenant sur le bas de cette dernière. Nous allons utiliser pour cela quatre « tuiles » (image) carrées pour représenter le terrain et les Guidelines pour le placement.

La Guidelines est un composant virtuel (qui n’apparait pas sur l’écran) qui représente une ligne de référence, verticale ou horizontale, sur laquelle nos widgets pourront venir s’ancrer. Elle peut être utilisée, par exemple, pour éviter les répétitions de « Margin ».

Pour ajouter une Guideline :

  • Clic droit -> Helpers -> Add Vertical (ou Horizontal) Guidelines
  • Ou via le menu situé en haut de la fenêtre du mode « Design»

Une Guideline peut être placée de 3 façons :

  • Distance en « dp» depuis le haut (pour la verticale) ou du côté gauche (pour l’horizontale)
  • Distance en « dp» depuis le bas (pour la verticale) ou du côté droit (pour l’horizontale)
  • En pourcentage sur l’axe verticale ou horizontale

Maintenant que vous savez placer des Guidelines je vous propose de découper notre écran en 4 parties égales verticalement et d’ajouter nos 4 tuiles avec, pour chacune, deux contraintes horizontales et une contrainte verticale pour l’ancrer au bas de l’écran (ou sur le haut d’une tuile).

/ ! \ N’oubliez pas de modifier l’attribut android:adjustViewBounds à « true » pour préserver le ratio de l’image.

Exemple de solution :

 

Aller plus loin

Les Groups

Qui n’a jamais été obligé de rajouter un layout pour englober des widgets afin de modifier la visibilité, ou pire, multiplier les « setVisibility » dans le code source. C’est chose révolue avec l’utilisation de la contrainte « Groups » qui va permettre de rassembler, de manière transparente sur l’interface, des widgets sous un identifiant commun. Je prends l’exemple de la visibilité mais il peut être pratique aussi pour appliquer des animations.

Note : Pour l’instant il n’est pas possible de créer un groupe à partir de la sélection de widget. Il vous faudra créer le groupe avant et glisser/déposer vos éléments dans ce dernier.


<android.support.constraint.Group
android:id="@+id/gp_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="tv_password,edt_password,login,edt_login" />

Vous pouvez, dans notre page d’authentification, faire un gp_login.setVisibility(View.GONE) lors du clic sur le bouton bt_start et gp_login.setVisibility(View.VISIBLE) sur le clic du bouton bt_select.

 

Les Barriers

Même s’il est possible d’ajouter dynamiquement des widgets dans un ConstraintLayout la procédure n’est pas triviale et demande de définir de nouvelles contraintes directement dans le code source. Google a bien compris la difficulté que cela représenté et mets à disposition, en beta, les Barrières (barriers en anglais). Similaires aux Guidelines sur la forme, elles sont sur le fond opposées. En effet, la barrière sera dynamique et s’adaptera aux widgets qu’elle contient. A l’image d’un LinearLayout, la barrière pourra adapter aussi le reste des éléments de la vue.

 

Pour conclure, je ne saurais que trop vous inviter à utiliser, dès à présent, le ConstraintLayout qui offre, comme nous l’avons vu, un ensemble de contraintes pour créer des interfaces de la plus simple à la plus complexe. Je recommande, même si j’étais un partisan du développement d’interface via le code XML, l’utilisation du mode Design qui a été revue et offre une qualité et une rapidité de développement non négligeable.

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

Vous aimerez aussi...

1 réponse

  1. octobre 9, 2017

    […] verrons dans une seconde partie d’autres concepts du ConstraintLayout pour faciliter, la création de vos interfaces, la […]

Laisser un commentaire

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