web-dev-qa-db-fra.com

Comment centrer les éléments dans ConstraintLayout

J'utilise ConstraintLayout dans mon application pour mettre en forme les applications. J'essaie de créer un écran dans lequel une EditText et Button devraient être au centre et Button au-dessous de EditText avec une marge maximale de 16dp.

Voici ma mise en page et ma capture d’écran.

activity_authenticate_content.xml

<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"
    Android:paddingLeft="16dp"
    Android:paddingRight="16dp"
    tools:context="com.icici.iciciappathon.login.AuthenticationActivity">

    <Android.support.design.widget.TextInputLayout
        Android:id="@+id/client_id_input_layout"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Android.support.design.widget.TextInputEditText
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:hint="@string/login_client_id"
            Android:inputType="textEmailAddress" />

    </Android.support.design.widget.TextInputLayout>

    <Android.support.v7.widget.AppCompatButton
        Android:id="@+id/authenticate"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="16dp"
        Android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toTopOf="@id/client_id_input_layout" />

</Android.support.constraint.ConstraintLayout>

enter image description here

androidandroid-layoutandroid-constraintlayout
158
N Sharma

Mise à jour:

Chaîne

Vous pouvez maintenant utiliser la fonction chain en mode packed comme décrit dans la réponse d'Eugene.

Directive

Vous pouvez utiliser un repère horizontal à 50% et ajouter des contraintes de haut en bas (8dp) à edittext et au bouton:

<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"
    Android:paddingLeft="16dp"
    Android:paddingRight="16dp">

    <Android.support.design.widget.TextInputLayout
        Android:id="@+id/client_id_input_layout"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        Android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        Android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent">

        <Android.support.design.widget.TextInputEditText
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:hint="@string/login_client_id"
            Android:inputType="textEmailAddress"/>

    </Android.support.design.widget.TextInputLayout>

    <Android.support.v7.widget.AppCompatButton
        Android:id="@+id/authenticate"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:text="@string/login_auth"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        Android:layout_marginTop="8dp"
        Android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        Android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"/>

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

</Android.support.constraint.ConstraintLayout>

Layout Editor

119
Pycpik

Il y a un moyen plus simple. Si vous définissez les contraintes de présentation comme suit et que votre EditText est de taille fixe, il sera centré dans la présentation de contrainte:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

La paire gauche/droite centre la vue horizontalement et la paire haut/bas la centre verticalement. En effet, lorsque vous définissez des contraintes gauche, droite ou haut/bas supérieures à la vue elle-même, la vue est centrée entre les deux contraintes, c'est-à-dire que le biais est défini sur 50%. Vous pouvez également déplacer la vue vers le haut/bas ou la droite/gauche en définissant le biais vous-même. Jouez un peu avec cela et vous verrez comment cela affecte la position des vues.

252
binW

La solution avec guide ne fonctionne que dans ce cas particulier avec EditText sur une seule ligne. Pour que cela fonctionne avec EditText multiligne, vous devez utiliser une chaîne "compactée".

<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"
    Android:paddingLeft="16dp"
    Android:paddingRight="16dp">

    <Android.support.design.widget.TextInputLayout
        Android:id="@+id/client_id_input_layout"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/authenticate"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <Android.support.design.widget.TextInputEditText
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:hint="@string/login_client_id"
            Android:inputType="textEmailAddress" />

    </Android.support.design.widget.TextInputLayout>

    <Android.support.v7.widget.AppCompatButton
        Android:id="@+id/authenticate"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="16dp"
        Android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toBottomOf="@id/client_id_input_layout" />

</Android.support.constraint.ConstraintLayout>

Voici à quoi ça ressemble:

View on Nexus 5

Vous pouvez en savoir plus sur l’utilisation des chaînes dans les articles suivants:

47
Eugene Brusov

Vous pouvez centrer une vue sous forme de pourcentage de la taille de l'écran.

Cet exemple utilise 50% de la largeur et de la hauteur:

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

    <LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:background="#FF0000"
        Android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"></LinearLayout>

</Android.support.constraint.ConstraintLayout>

Cela a été fait avec la version 1.1.3 de ConstraintLayout. N'oubliez pas de l'ajouter à vos dépendances dans le dégradé, et augmentez la version si une nouvelle version est disponible:

dependencies {
...
    implementation 'com.Android.support.constraint:constraint-layout:1.1.3'
}

enter image description here

9
live-love

vous pouvez utiliser layout_constraint Circle pour la vue centrale dans ConstraintLayout.

<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:id="@+id/mparent"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">
        <ImageButton
            Android:id="@+id/btn_settings"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_home_black_24dp"
            app:layout_constraintCircle="@id/mparent"
            app:layout_constraintCircleRadius="0dp"
            />
    </Android.support.constraint.ConstraintLayout>

avec des contraintes Cercle vers parent et rayon zéro, vous pouvez faire en sorte que la vue soit le centre du parent.

3
Enakhi