205

Sto usando ConstraintLayoutnella mia applicazione per creare il layout delle applicazioni. Sto cercando di creare un uno schermo wheren uno EditTexte Buttondovrebbe essere in centro e Buttondovrebbe essere al di sotto di EditTextun solo marginTop 16dp.

Ecco il mio layout e screenshot come appare adesso.

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>

android android-layout android-constraintlayout

— N Sharma
fonte

145

Aggiornare:

Catena

Ora puoi usare la chainfunzione in packedmodalità come descritto nella risposta di Eugene.

Orientamento

È possibile utilizzare una linea guida orizzontale con una posizione del 50% e aggiungere vincoli inferiore e superiore (8dp) a edittext e pulsante:

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

— Pycpik
fonte

1

Grazie @Pycpik non sono riuscito a capire a che cosa serve <android.support.constraint.Guideline? Dobbiamo usare ogni volta che usiamo ConstraintLayout?

— N Sharma,

A cosa serve layout_constraintGuide_percent?

— N Sharma,

1

Guidelineè solo un oggetto invisibile su cui puoi ancorare le tue viste. layout_constraintGuide_percentè la percentuale nel genitore. Qui 0,5 è un'altezza del 50%

— Pycpik

Grazie. Gotcha. Ora ne ho due TextInputEditTexte uno Button. Voglio metterli al centro dello schermo. Ma per ora non è pastebin.com/iXYtuXHg ecco lo screenshot dropbox.com/s/k7997q2buvw76cp/q.png?dl=0

— N Sharma

1

Puoi centrare quello centrale e aggiungerne uno sopra e uno sotto o metterli in a LinearLayoute centrarlo.

— Pycpik,

332

C'è un modo più semplice. Se imposti i vincoli di layout come segue e EditText ha dimensioni fisse, verrà centrato nel layout di vincolo:

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

La coppia sinistra / destra centra la vista in orizzontale e la coppia superiore / inferiore la centra in verticale. Questo perché quando si impostano i vincoli sinistro, destro o superiore, più grandi della vista stessa, la vista viene centrata tra i due vincoli, ovvero il bias viene impostato al 50%. Puoi anche spostare la vista su / giù o destra / sinistra impostando il bias su te stesso. Giocaci un po 'e vedrai come influenza la posizione delle viste.

— binW
fonte

5

Questo è un approccio molto migliore rispetto all'utilizzo delle linee guida.

— sab

48

app:layout_constraintCenter_in="parent"sarebbe molto meglio. Ma come sempre Google non lo ha fornito.

— Gojir4,

1

Questo è più appropriato e anche questo l'ho visto in molti discorsi ed esempi di funzionari.

— TapanHP,

Semplice, facile da capire

— Yohanes AI,

2

Le linee guida sono migliori perché una volta che hai un layout complesso, che accadrà una volta che il marketing ne avrà una presa, il centraggio semplicistico non funzionerà più. Meglio avere linee guida e centrare le linee guida per la parte superiore e inferiore

— Nick Turner,

58

La soluzione con linee guida funziona solo per questo caso particolare con EditText a riga singola. Per farlo funzionare con EditText su più righe è necessario utilizzare una catena "imballata".

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

Ecco come appare:

Puoi leggere di più sull'uso delle catene nei seguenti post:

— Eugene Brusov
fonte

Questa è sicuramente la risposta migliore. Altre risposte funzionano solo per una o due viste. Questo è più scalabile, poiché funziona per una, due e tutte le visualizzazioni che desideri.

— mdelolmo,

21

È possibile centrare una vista come percentuale della dimensione dello schermo.

Questo esempio utilizza il 50% di larghezza e altezza:

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

Ciò è stato fatto utilizzando ConstraintLayout versione 1.1.3. Non dimenticare di aggiungerlo alle tue dipendenze nel gradle e aumentare la versione se è disponibile una nuova versione:

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

— live-love
fonte

12

aggiungi questi tag nella tua vista

    app:layout_constraintCircleRadius="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"

e puoi fare clic con il tasto destro del mouse in modalità progettazione e scegliere il centro.

— Behrad
fonte

8

puoi usare layout_constraintCircle per la vista centrale all'interno di 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>

con vincoloCircle to parent e raggio zero è possibile rendere la vista al centro del parent.

— Enakhi
fonte

best.solution.ever. Proprio come una "app: layout_constraintCenter_in =" parent "" (che non esiste)

— Bénédicte Lagouge

Come centrare gli elementi in ConstraintLayout

Aggiornare: