200

Ich verwende ConstraintLayoutin meiner Anwendung, um das Anwendungslayout zu erstellen. Ich versuche, einen Bildschirm zu erstellen, auf dem einer angezeigt wird, EditTextund Buttonsollte in der Mitte und Buttonunter EditTexteinem Rand mit nur 16 dp liegen.

Hier ist mein Layout und ein Screenshot, wie es gerade aussieht.

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
quelle

145

Aktualisieren:

Kette

Sie können die chainFunktion jetzt im packedModus verwenden, wie in Eugenes Antwort beschrieben.

Richtlinie

Sie können eine horizontale Richtlinie an einer Position von 50% verwenden und Edittext und Schaltfläche untere und obere Einschränkungen (8 dp) hinzufügen:

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

1

Danke @Pycpik Ich konnte nicht verstehen, wozu es gut ist <android.support.constraint.Guideline? Müssen wir jedes Mal verwenden, wenn wir verwenden ConstraintLayout?

N Sharma

Was nützt es layout_constraintGuide_percent?

N Sharma

1

Guidelineist nur ein unsichtbares Element, auf dem Sie Ihre Ansichten verankern können. layout_constraintGuide_percentist der Prozentsatz im Elternteil. Hier ist 0,5 50% Höhe

Pycpik

Vielen Dank. Erwischt. Ich habe jetzt zwei TextInputEditTextund eins Button. Ich möchte sie in der Mitte des Bildschirms platzieren. Aber ab sofort ist es nicht pastebin.com/iXYtuXHg hier ist der Screenshot dropbox.com/s/k7997q2buvw76cp/q.png?dl=0

N Sharma

1

Sie können die mittlere zentrieren und eine oben und eine unten hinzufügen oder sie in eine setzen LinearLayoutund zentrieren.

Pycpik

328

Es gibt einen einfacheren Weg. Wenn Sie Layouteinschränkungen wie folgt festlegen und Ihr EditText eine feste Größe hat, wird er im Einschränkungslayout zentriert:

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

Das linke / rechte Paar zentriert die Ansicht horizontal und das obere / untere Paar zentriert sie vertikal. Dies liegt daran, dass beim Festlegen der linken, rechten oder oberen und unteren Einschränkung, die größer als die Ansicht selbst ist, die Ansicht zwischen den beiden Einschränkungen zentriert wird, dh die Abweichung wird auf 50% festgelegt. Sie können die Ansicht auch nach oben / unten oder rechts / links verschieben, indem Sie die Vorspannung selbst festlegen. Spielen Sie ein bisschen damit und Sie werden sehen, wie sich dies auf die Position der Ansichten auswirkt.

binW
quelle

5

Dies ist ein viel besserer Ansatz als die Verwendung von Richtlinien.

Ssand

46

app:layout_constraintCenter_in="parent"wäre viel besser. Aber wie immer hat Google es nicht zur Verfügung gestellt.

Gojir4

1

Dies ist angemessener und ich habe dies auch in vielen Gesprächen und Beispielen von Beamten gesehen.

TapanHP

Einfach, leicht zu verstehen.

Yohanes AI

2

Richtlinien sind besser, denn sobald Sie ein komplexes Layout haben, das passiert, sobald das Marketing es in den Griff bekommt, funktioniert die vereinfachte Zentrierung nicht mehr. Besser Richtlinien zu haben und sich auf die Richtlinie für oben und unten zu konzentrieren

Nick Turner

58

Die Lösung mit Richtlinie funktioniert nur für diesen speziellen Fall mit einzeiligem EditText. Damit es für mehrzeiligen EditText funktioniert, sollten Sie eine "gepackte" Kette verwenden.

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

So sieht es aus:

Weitere Informationen zur Verwendung von Ketten finden Sie in den folgenden Beiträgen:

Eugene Brusov
quelle

Dies ist sicherlich die beste Antwort. Andere Antworten funktionieren nur für eine oder zwei Ansichten. Dieser ist skalierbarer, da er für eine, zwei und so viele Ansichten funktioniert, wie Sie möchten.

Mdelolmo

20

Sie können eine Ansicht als Prozentsatz der Bildschirmgröße zentrieren.

In diesem Beispiel werden 50% der Breite und Höhe verwendet:

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

Dies wurde mit ConstraintLayout Version 1.1.3 durchgeführt. Vergessen Sie nicht, es zu Ihren Abhängigkeiten im Gradle hinzuzufügen und die Version zu erhöhen, wenn es eine neue Version gibt:

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

Live-Liebe
quelle

12

Fügen Sie diese Tags in Ihrer Ansicht hinzu

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

Sie können im Entwurfsmodus mit der rechten Maustaste klicken und die Mitte auswählen.

behrad
quelle

8

Sie können layout_constraintCircle für die Mittelansicht in ConstraintLayout verwenden.

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

Mit ConstraintCircle to Parent und dem Radius Null können Sie Ihre Ansicht zum Mittelpunkt des übergeordneten Elements machen.

Enakhi
quelle

best.solution.ever. Genau wie eine "App: layout_constraintCenter_in =" parent "" (die es nicht gibt)

Bénédicte Lagouge

So zentrieren Sie die Elemente in ConstraintLayout

Antworten:

Aktualisieren: