Espacement régulier des vues à l'aide de ConstraintLayout

Une utilisation courante LinearLayoutconsiste à espacer uniformément (pondérer) les vues, par exemple:

Comment mettre en œuvre des vues à espacement régulier comme celui-ci en utilisant le nouveau ConstraintLayout?

ConstraintLayoutliens pour référence: article de blog , vidéo de session d'E / S

Il existe deux façons d'accomplir cela en utilisant ConstraintLayout: Chaînes et Lignes directrices . Pour utiliser Chaînes, assurez-vous d'utiliser la ConstraintLayoutversion bêta 3 ou une version plus récente et si vous souhaitez utiliser l'éditeur de mise en page visuelle dans Android Studio, assurez-vous que vous utilisez Android Studio 2.3 Bêta 1 ou une version plus récente.

Méthode 1 - Utilisation de chaînes

Ouvrez l'éditeur de mise en page et ajoutez vos widgets comme d'habitude, en ajoutant des contraintes parentales si nécessaire. Dans ce cas, j'ai ajouté deux boutons avec des contraintes en bas du parent et sur le côté du parent (côté gauche pour le bouton Enregistrer et côté droit pour le bouton Partager):

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

Mettez en surbrillance les deux vues, soit en cliquant Ctrl / Cmd, soit en faisant glisser une boîte autour des vues:

Ensuite, faites un clic droit sur les vues et choisissez "Centrer horizontalement":

Cela met en place une connexion bidirectionnelle entre les vues (c'est ainsi qu'une chaîne est définie). Par défaut, le style de chaîne est "spread", qui est appliqué même si aucun attribut XML n'est inclus. En respectant ce style de chaîne, mais en définissant la largeur de nos vues pour permettre 0dpaux vues de remplir l'espace disponible, en se répartissant uniformément sur le parent:

Ceci est plus visible en vue paysage:

Si vous préférez ignorer l'éditeur de mise en page, le XML résultant ressemblera à:

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
    android:id="@+id/button_save"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_save_text"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="4dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button_share"
    app:layout_constraintHorizontal_chainStyle="spread" />

<Button
    android:id="@+id/button_share"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_share_text"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toRightOf="@+id/button_save"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Détails:

• définir la largeur de chaque élément sur 0dpou MATCH_CONSTRAINTlaisser les vues remplir le parent (facultatif)
• les vues doivent être liées entre elles de manière bidirectionnelle (à droite des liens du bouton d'enregistrement vers le bouton de partage, à gauche des liens du bouton de partage vers le bouton d'enregistrement), cela se fera automatiquement via l'éditeur de mise en page lorsque vous choisissez "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 "propagation"
• le poids de la chaîne peut être réglé via layout_constraintHorizontal_weight
• cet exemple est pour une chaîne horizontale, il existe des attributs correspondants pour les chaînes verticales

Méthode 2 - Utilisation d'une ligne directrice

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

Sélectionnez ensuite "Ajouter une ligne de guidage verticale":

Une nouvelle ligne directrice apparaîtra, qui par défaut, sera probablement ancrée à gauche dans des valeurs relatives (indiquées par une flèche orientée vers la gauche):

Cliquez sur la flèche orientée vers la gauche pour la faire passer à une valeur de pourcentage, puis faites glisser la ligne de guidage vers la marque 50%:

La ligne directrice peut maintenant être utilisée comme point d'ancrage pour d'autres vues. Dans mon exemple, j'ai attaché la droite du bouton Enregistrer et la gauche du bouton Partager à la ligne directrice:

Si vous souhaitez que les vues remplissent l'espace disponible, la contrainte doit être définie sur "Toute taille" (les lignes ondulées s'étendant horizontalement):

(C'est la même chose que de régler layout_widthsur 0dp).

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

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

Pour créer 2 vues sur la même ligne, de largeur égale, il suffit de définir

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"  
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button1" />

</android.support.constraint.ConstraintLayout>

Remarque

• largeur = 0dp ( MATCH_CONSTRAINT)
• Contrainte button1et button2doit aimer ci-dessus

Résultat

PLUS
Si vous voulez View1plus grand que View2vous pouvez utiliser weightou percent.
Exemple, View1width = 2 * View2width use weight

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button3"
        />

</android.support.constraint.ConstraintLayout>

Résultat

Exemple, View1width = 2 * View2width use percent

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 5"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.667"
        />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintWidth_percent="0.333"
        />

</android.support.constraint.ConstraintLayout>

Résultat

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 prend en charge la dépendance circulaire et voici ce que j'ai fait en utilisant exactement cela.

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

Pour le deuxième enfant

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

voici la démo complète

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputParent"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <EditText
        android:id="@+id/editTextParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/state" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputFirstChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/pin_code" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputSecondChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/country" />
</android.support.design.widget.TextInputLayout>

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

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <TextView
        android:id="@+id/figure_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="1"
        />

    <TextView
        android:id="@+id/figure_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_1"
        tools:text="2"
        />

    <TextView
        android:id="@+id/figure_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_2"
        tools:text="3"
        />

    <TextView
        android:id="@+id/figure_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_3"
        tools:text="4"
        />
</android.support.constraint.ConstraintLayout>

Alors, ensemble android:layout_width="0dp", app:layout_constraintHorizontal_weight="1"et lier toutes les vues avec les voisins comme:

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

Une fois que vous avez vos éléments enchaînés, vous pouvez toujours utiliser des poids sur eux comme une disposition relative pour les garder uniformément espacés. L'exemple ci-dessous montre comment les garder régulièrement espacés avec des textViews de taille différente.

<TextView1
     app:layout_constraintHorizontal_weight="1" />
 <TextView2
     app:layout_constraintHorizontal_weight="1" />
 <TextView3
     app:layout_constraintHorizontal_weight="1" />
 <TextView4
     app:layout_constraintHorizontal_weight="1" />