ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

Comment faire pour centrer aligner 3 boutons uns à côté des autres verticalement à l'aide de ConstraintLayout?

Pour être clair, je veux convertir ce simple de la structure de mise à plat de l'INTERFACE utilisateur à l'aide de ConstraintLayout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>
</FrameLayout>

J'ai obtenu un plus proche de la solution comme suit

<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="match_parent">


<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="259dp"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintTop_toBottomOf="@+id/button"
    app:layout_constraintRight_toRightOf="parent"/>

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    app:layout_constraintLeft_toLeftOf="parent"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="307dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2"
    app:layout_constraintRight_toRightOf="parent"/>

 </android.support.constraint.ConstraintLayout>

ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

Mais clairement, vous pouvez voir que le résultat ne correspond pas à celle exigée. je ne veux pas de marge ou de l'espace entre les 3 boutons, tout ce que je veux, c'est le centre d'aligner ces 3 boutons uns à côté des autres à la verticale, tout comme ils sont dans un LinearLayout qui a une orientation verticale.

OriginalL'auteur Darish | 2017-03-30

  1. 26

    Bonne solution

    Il est bon que vous avez créé la chaîne entre ces 3 points de vue. Avoir une chaîne, vous pouvez spécifier la chaîne de "style" et il aura une incidence sur la manière dont les vues sont répartis le long de la chaîne de l'axe. La chaîne de style peut être contrôlé par la "chaîne" bouton juste en dessous de la vue:

    ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

    Cliquez sur ce à quelques reprises pour basculer entre les 3 modes:

    propagation (celui par défaut)

    ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

    spread_inside

    ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

    paniers

    ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

    Comme vous pouvez le voir - packed est celui que vous voulez.

    Réglage de la chaîne de style entraînera l'ajout d'attribut suivant le premier enfant de la chaîne, de sorte que vous pouvez le faire aussi à partir de XML:

    app:layout_constraintVertical_chainStyle="packed"

    Naïf solution

    Solution proposée dans l'autre réponse peut sembler comme il fonctionne, mais en réalité ce n'est pas une bonne solution pour votre problème. Considérer le cas où vous avez des vues avec des hauteurs différentes, permet de dire que le fond est plus grande. Cette solution permet de verrouiller le milieu afficher dans le centre et la position d'autres points de vue ci-dessus et ci-dessous. Il ne sera pas "centré" (seulement le moyen de vue centré). Vous pouvez voir la comparaison dans l'image ci-dessous:

    ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

    Très bel exemple montrant la différence entre le présent et le naïf solution.
    app:layout_constraintVertical_chainStyle="packed" de vue qui n'cette propriété?
    Comment se fait-je n'ai pas d'icône en forme de Chaîne, je suis en utilisant les dernières studio.

    OriginalL'auteur Maciej Ciemięga

  2. 7

    Par Android Studio "Éditeur de Mise en'

    1. faites glisser et déposez les trois boutons dans le Android Studio "Éditeur de Mise en'

      ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

    2. Sélectionner ces boutons en la faisant glisser la souris

      ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

    3. Pack verticalement à l'aide de la "pack" dans "Mise en page de l'Éditeur'

      ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

    4. Aligner le centre de l'horizontale à l'aide de " Align-Center horizontalement bouton

      ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

    5. Les aligner, centrer verticalement à l'aide de la " Align-Center verticalement bouton

      ConstraintLayout - centrage de vues avec les uns à côté des autres à la verticale ou à l'horizontale

    Par xml

    • pack tous ces trois boutons dans un verticalement paniers de la chaîne d' à l'aide de

       app:layout_constraintVertical_chainStyle="packed"

    • ajouter à gauche et à droite des contraintes pour tous ces trois boutons en parent 

    <?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
tools:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="0dp">


<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="259dp"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintTop_toBottomOf="@+id/button1"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="307dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>
</android.support.constraint.ConstraintLayout>
    Gardez à l'esprit que c'est la première solution est une solution naïve et pas valide. Il va tromper que d'autres développeurs, s'il vous plaît ne pas le proposer... il en va de même avec la accepté de répondre. Seule la deuxième solution, qui a été décrit en plus de détails dans ma réponse est une bonne approche pour center le groupe de vues en ConstraintLayout correctement.
    j'ai édité ma réponse
    Dans ConstraintLayout vous ne devez utiliser les chainStyle attribut, l'autre solution est vraiment plus comme un hack pour atteindre le "centrage d'un groupe", qui ne semble être la résolution de problème à partir de la question. Si il y a une solution adéquate vs mauvais, pourquoi quelqu'un voudrait utiliser le mauvais...? Les chaînes sont spécifiquement conçus pour résoudre le "regroupement" problème. Pourtant, vous avez encore de promouvoir la solution incorrecte accepté de répondre en tant que bien comme une partie de votre réponse. Il va tromper que d'autres développeurs qui vont essayer de résoudre ce problème à l'avenir, ce n'est vraiment pas beau.
    vous avez raison, fixés à la fois, cheers 🙂

    OriginalL'auteur Darish

  3. 1
    app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"

    OriginalL'auteur dong sheng