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

Question

Une utilisation courante de LinearLayout est uniformément l'espace (poids) points de vue, par exemple:

Comment voulez-vous mettre en œuvre uniformément espacés vues comme ceci en utilisant la nouvelle - ConstraintLayout?

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

Answer 1

Il existe deux façons de réaliser cela à l'aide de ConstraintLayout: Chaînes et des lignes Directrices. Utiliser des Chaînes, assurez-vous d'utiliser ConstraintLayout Beta 3 ou plus récent et si vous souhaitez utiliser la mise en page visuelle de l'éditeur dans Android Studio, assurez-vous que vous utilisez Android Studio 2.3 Bêta 1 ou plus récent.

Méthode 1 - À L'Aide De Chaînes

Ouvrir l'éditeur de disposition et ajoutez vos widgets comme d'habitude, l'ajout de parent contraintes en tant que de besoin. Dans ce cas, j'ai ajouté deux boutons avec des contraintes à la partie inférieure de la mère et du côté de la mère (côté gauche) pour Enregistrer le bouton de droite et de pour bouton de Partage):

Notez que dans cet état, si je flip en vue paysage, les vues ne pas remplir le parent, mais ancrés dans les coins:

Mettre en évidence les deux points de vue, soit par Ctrl/Cmd cliquant ou en faisant glisser un cadre autour de la vue:

Puis cliquez-droit sur la vue et choisissez l'option "centrer Horizontalement":

Ceci définit une connexion bidirectionnelle entre les points de vue (qui est la façon dont la Chaîne est définie). Par défaut, la chaîne de style est de "répandre", applicable même si aucun attribut XML est inclus. Coller avec cette chaîne de style, mais le réglage de la largeur de notre point de vue à l' 0dp permet à la vue de remplir l'espace disponible, répartissant uniformément à travers le parent:

Cela est plus perceptible en mode paysage:

Si vous préférez sauter la mise en page de l'éditeur, 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:

• réglage de la largeur de chaque élément, 0dp ou MATCH_CONSTRAINT permet à la vue de combler le parent (en option)
• les points de vue doivent être reliés entre eux de façon bidirectionnelle (à droite du bouton enregistrer des liens pour partager bouton, à gauche du bouton partager des liens vers bouton enregistrer), cela va se faire automatiquement à l'aide de l'éditeur de mise lors du choix de "centrer Horizontalement"
• la première vue dans la chaîne peut spécifier la chaîne de style via layout_constraintHorizontal_chainStyle, voir la documentation pour les différents styles de la chaîne, si la chaîne de style est omis, la valeur par défaut est de "répandre"
• la pondération de la chaîne peut être ajustée via layout_constraintHorizontal_weight
• cet exemple est pour une horizontale de la chaîne, il ya des attributs correspondants à la verticale des chaînes de

Méthode 2 - à l'Aide d'une Directive

Ouvrez votre disposition dans l'éditeur et cliquez sur la ligne directrice sur le bouton:

Puis sélectionnez "Ajouter de la Directive Verticale":

Une nouvelle ligne apparaît, que, par défaut, sera probablement ancré à gauche en valeur relative (notée par la gauche flèche):

Cliquez sur la gauche flèche pour passer à une valeur en pourcentage, puis faites glisser la ligne directrice de la 50% de la marque:

La directive peut maintenant être utilisé comme un point d'ancrage pour d'autres points de vue. Dans mon exemple, j'ai attaché le droit de l'enregistrer et le bouton à gauche du bouton "partager" à la ligne directrice:

Si vous voulez que le point de vue de remplir l'espace disponible, puis la contrainte doit être réglé sur "n'Importe quelle Taille" (les lignes ondulées de course à l'horizontale):

(C'est le même que le réglage de l' layout_width de 0dp).

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

<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" />

Answer 2

Pour créer 2 points de vue dans la même ligne, la même largeur, il faut juste 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>

Note

• largeur = 0dp (MATCH_CONSTRAINT)
• Contrainte d' button1 et button2 doit, comme ci-dessus

Résultat

PLUS
Si vous souhaitez View1 plus grand que View2 vous pouvez utiliser weight ou percent.
Exemple, View1 largeur = 2 *View2 de la largeur de l'utilisation de poids

<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, View1 largeur = 2 *View2 de la largeur de l'utilisation pour cent

<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

Answer 3

Bien si ça aide quelqu'un

la clé est ici app:layout_constraintHorizontal_weight="1" et
La meilleure chose à propos de la disposition de contrainte est qu'elle prend en charge la dépendance circulaire et voici 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

 <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>
 

Answer 4

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>
 

Donc, définissez android:layout_width="0dp" , app:layout_constraintHorizontal_weight="1" et liez chaque vue à des voisins tels que:

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