web-dev-qa-db-fra.com

ConstraintLayout - Centrage des vues les unes à côté des autres verticalement ou horizontalement

Comment centrer verticalement 3 boutons les uns à côté des autres verticalement en utilisant ConstraintLayout ?

Pour être clair, je veux convertir cette structure de mise en page simple en interface utilisateur plate en utilisant 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 la solution la plus proche 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>

Mais clairement, vous pouvez voir que la sortie obtenue ne correspond pas à celle requise. je ne veux pas de marge ou d'espace entre les 3 boutons, tout ce que je veux c'est aligner ces 3 boutons côte à côte verticalement comme ils sont dans un LinearLayout qui a une orientation verticale.

androidandroid-layoutcenteringandroid-constraintlayout
15
Darish

Solution appropriée

Il est bon que vous ayez créé la chaîne entre ces 3 vues. Ayant une chaîne, vous pouvez spécifier le "style" de chaîne et cela affectera la répartition des vues le long de l'axe de la chaîne. Le style de chaîne peut être contrôlé par le bouton "chaîne" juste en dessous de la vue:

enter image description here

Cliquez dessus plusieurs fois pour basculer entre les 3 modes:

spread (celui par défaut)
enter image description here

spread_inside
enter image description here

emballé
enter image description here

Comme vous pouvez le voir - packed est celui que vous souhaitez.
La définition du style de chaîne entraînera l'ajout de l'attribut suivant au premier enfant de la chaîne, vous pouvez donc le faire également à partir de XML:

app:layout_constraintVertical_chainStyle="packed"

Solution naïve

La solution proposée dans l'autre réponse peut sembler fonctionner, mais en réalité ce n'est pas une solution appropriée à votre problème. Considérez le cas lorsque vous avez des vues avec différentes hauteurs, disons que celle du bas est plus grande. Cette solution verrouillera la vue du milieu au centre et positionnera les autres vues au-dessus et en dessous. Il n'en résultera pas un "groupe centré" (seule la vue du milieu serait centrée). Vous pouvez voir la comparaison dans l'image ci-dessous:

enter image description here

33
Maciej Ciemięga

Par Android 'Layout Editor' d'Android

  1. faites glisser et déposez trois boutons dans le Android 'Layout Editor' d'Android $ ===

  2. Sélectionnez ces boutons ensemble en faisant glisser la souris

  3. Emballez-les verticalement à l'aide du bouton 'pack' dans 'Layout Editor'

  4. Alignez-les au centre horizontalement en utilisant le bouton 'Aligner-Centrer horizontalement'

  5. Alignez-les verticalement à l'aide du bouton 'Aligner-Centrer verticalement'

Par xml

  • emballer tous ces trois boutons dans une chaîne emballée verticalement en utilisant

     app:layout_constraintVertical_chainStyle="packed"

  • ajouter des contraintes gauche et droite pour ces trois boutons comme 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>
9
Darish
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
1
dong sheng