Espacement uniforme des vues à l’aide de ConstraintLayout

Une utilisation courante de LinearLayout consiste à répartir uniformément les vues, par exemple: exemple de disposition

Comment implémentez-vous des vues équidistantes comme celle-ci avec le nouveau ConstraintLayout ?

Liens ConstraintLayout de référence: article de blog , vidéo de session I / O

Il existe deux manières de ConstraintLayout : ConstraintLayout : Chains and Guidelines . Pour utiliser des chaînes, assurez-vous que vous utilisez ConstraintLayout Beta 3 ou plus récent et si vous souhaitez utiliser l’éditeur de disposition visuelle dans Android Studio, assurez-vous que vous utilisez Android Studio 2.3 Beta 1 ou plus récent.

Méthode 1 – Utilisation des chaînes

Ouvrez l’éditeur de disposition et ajoutez vos widgets normalement, en ajoutant des contraintes de parent si nécessaire. Dans ce cas, j’ai ajouté deux boutons avec des contraintes au bas du parent et du côté du parent (à gauche pour le bouton Enregistrer et à droite pour le bouton Partager):

entrer la description de l'image ici

Notez que dans cet état, si je retourne en mode paysage, les vues ne remplissent pas le parent mais sont ancrées dans les coins:

entrer la description de l'image ici

Mettez en surbrillance les deux vues, soit en cliquant sur Ctrl / Cmd ou en faisant glisser une zone autour des vues:

entrer la description de l'image ici

Cliquez ensuite avec le bouton droit sur les vues et choisissez “Centrer horizontalement”:

entrer la description de l'image ici

Cela établit une connexion bidirectionnelle entre les vues (qui est la manière dont une chaîne est définie). Par défaut, le style de chaîne est “spread”, ce qui s’applique même si aucun atsortingbut XML n’est inclus. S’en tenir à ce style de chaîne, mais définir la largeur de nos vues à 0dp permet aux vues de remplir l’espace disponible, répartissant uniformément sur le parent:

entrer la description de l'image ici

Ceci est plus visible en mode paysage:

entrer la description de l'image ici

Si vous préférez ignorer l’éditeur de disposition, le code XML résultant ressemblera à:

     

Détails:

  • définir la largeur de chaque élément sur 0dp ou MATCH_CONSTRAINT permet aux vues de remplir le parent (facultatif)
  • les vues doivent être liées entre elles de manière bidirectionnelle (à droite du bouton Enregistrer le bouton Partager, à gauche des liens du bouton Partager pour enregistrer le bouton), cela se produit automatiquement via l’éditeur de disposition lors du choix “Centrer horizontalement”
  • la première vue de la chaîne peut spécifier le style de chaîne via layout_constraintHorizontal_chainStyle , voir la documentation des différents styles de chaîne, si le style de chaîne est omis, la valeur par défaut est “spread”
  • la pondération de la chaîne peut être ajustée via layout_constraintHorizontal_weight
  • cet exemple concerne une chaîne horizontale, il existe des atsortingbuts correspondants pour les chaînes verticales

Méthode 2 – Utilisation d’une ligne direcsortingce

Ouvrez votre mise en page dans l’éditeur et cliquez sur le bouton guide:

entrer la description de l'image ici

Ensuite, sélectionnez “Ajouter un guide vertical”: entrer la description de l'image ici

Un nouveau guide apparaîtra, qui par défaut sera probablement ancré à gauche dans les valeurs relatives (indiquées par une flèche orientée vers la gauche):

ligne directrice relative à l'éditeur de mise en page

Cliquez sur la flèche orientée vers la gauche pour la faire passer à un pourcentage, puis faites glisser le repère jusqu’à la marque de 50%:

guide de l'éditeur de mise en page

Le guide peut maintenant être utilisé comme point d’ancrage pour d’autres vues. Dans mon exemple, j’ai attaché le droit du bouton Enregistrer et la gauche du bouton Partager à la ligne direcsortingce:

mise en page finale

Si vous souhaitez que les vues remplissent l’espace disponible, la contrainte doit être définie sur “Any Size” (les lignes ondulées horizontales):

toute contrainte de taille

(Ceci est identique à la définition de layout_width à 0dp ).

Une directive peut également être créée en XML assez facilement plutôt que d’utiliser l’éditeur de mise en page:

  

Eh bien si ça aide quelqu’un

la clé est ici app:layout_constraintHorizontal_weight="1" et
La meilleure chose à propos de la disposition des contraintes est qu’elle supporte la dépendance circulaire et c’est ce que j’ai fait en utilisant exactement cela.

Pour premier enfant
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

Pour deuxième enfant

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

Voici la démo complète

          

Vous devriez lire sur les chaînes pondérées. Un exemple de code est ici.

       

Alors, définissez android:layout_width="0dp" , app:layout_constraintHorizontal_weight="1" et liez chaque vue avec les voisins comme:

 app:layout_constraintStart_toEndOf="@id/figure_2" app:layout_constraintEnd_toStartOf="@id/figure_4" 

entrer la description de l'image ici