Ansichten mit ConstraintLayout gleichmäßig verteilen

Eine häufige Verwendung für LinearLayoutist das gleichmäßige Platzieren (Gewicht) von Ansichten, zum Beispiel:

Wie implementieren Sie solche gleichmäßig verteilten Ansichten mit dem neuen ConstraintLayout?

ConstraintLayoutLinks als Referenz: Blogbeitrag , E / A-Sitzungsvideo

Es gibt zwei Möglichkeiten, dies zu erreichen ConstraintLayout: Ketten und Richtlinien . Stellen Sie zur Verwendung von Ketten sicher, dass Sie ConstraintLayoutBeta 3 oder höher verwenden. Wenn Sie den visuellen Layout-Editor in Android Studio verwenden möchten, stellen Sie sicher, dass Sie Android Studio 2.3 Beta 1 oder höher verwenden.

Methode 1 - Verwenden von Ketten

Öffnen Sie den Layout-Editor, fügen Sie Ihre Widgets wie gewohnt hinzu und fügen Sie nach Bedarf übergeordnete Einschränkungen hinzu. In diesem Fall habe ich zwei Schaltflächen mit Einschränkungen am unteren Rand des übergeordneten Elements und am unteren Rand des übergeordneten Elements hinzugefügt (linke Seite für die Schaltfläche Speichern und rechte Seite für die Schaltfläche Freigeben):

Beachten Sie, dass in diesem Zustand, wenn ich zur Querformatansicht wechsle, die Ansichten nicht das übergeordnete Element ausfüllen, sondern an den Ecken verankert sind:

Markieren Sie beide Ansichten, indem Sie entweder bei gedrückter Strg- / Befehlstaste klicken oder ein Feld um die Ansichten ziehen:

Klicken Sie dann mit der rechten Maustaste auf die Ansichten und wählen Sie "Horizontal zentrieren":

Dadurch wird eine bidirektionale Verbindung zwischen den Ansichten hergestellt (so wird eine Kette definiert). Standardmäßig ist der Kettenstil "Spread", der auch angewendet wird, wenn kein XML-Attribut enthalten ist. Halten Sie sich an diesen Kettenstil, aber stellen Sie die Breite unserer Ansichten so ein, dass 0dpdie Ansichten den verfügbaren Platz ausfüllen und sich gleichmäßig über die übergeordneten Elemente verteilen:

Dies macht sich in der Landschaftsansicht deutlicher bemerkbar:

Wenn Sie den Layout-Editor lieber überspringen möchten, sieht das resultierende XML folgendermaßen aus:

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

<Button
    android:id="@+id/button_save"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_save_text"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="4dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button_share"
    app:layout_constraintHorizontal_chainStyle="spread" />

<Button
    android:id="@+id/button_share"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_share_text"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toRightOf="@+id/button_save"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Einzelheiten:

• Wenn Sie die Breite jedes Elements auf einstellen 0dpoder MATCH_CONSTRAINTdie Ansichten das übergeordnete Element ausfüllen lassen (optional)
• Die Ansichten müssen bidirektional miteinander verknüpft werden (rechts von den Links zum Speichern der Schaltfläche zum Teilen der Schaltfläche, links von den Links zum Teilen der Schaltfläche zum Speichern der Schaltfläche). Dies erfolgt automatisch über den Layout-Editor, wenn Sie "Horizontal zentrieren" auswählen.
• In der ersten Ansicht der Kette kann der Kettenstil über angegeben werden. Weitere Informationen layout_constraintHorizontal_chainStylefinden Sie in der Dokumentation zu verschiedenen Kettenstilen. Wenn der Kettenstil weggelassen wird, lautet die Standardeinstellung "Spread".
• Die Gewichtung der Kette kann über eingestellt werden layout_constraintHorizontal_weight
• Dieses Beispiel gilt für eine horizontale Kette. Für vertikale Ketten gibt es entsprechende Attribute

Methode 2 - Verwenden einer Richtlinie

Öffnen Sie Ihr Layout im Editor und klicken Sie auf die Schaltfläche Richtlinie:

Wählen Sie dann "Vertikale Richtlinie hinzufügen":

Es wird eine neue Richtlinie angezeigt, die standardmäßig wahrscheinlich in relativen Werten links angezeigt wird (gekennzeichnet durch den nach links gerichteten Pfeil):

Klicken Sie auf den nach links zeigenden Pfeil, um ihn auf einen Prozentwert umzuschalten, und ziehen Sie die Richtlinie auf die 50% -Marke:

Die Richtlinie kann jetzt als Anker für andere Ansichten verwendet werden. In meinem Beispiel habe ich rechts von der Schaltfläche Speichern und links von der Schaltfläche Freigeben an die Richtlinie angehängt:

Wenn die Ansichten den verfügbaren Platz ausfüllen sollen, sollte die Einschränkung auf "Beliebige Größe" gesetzt werden (die wellenförmigen Linien verlaufen horizontal):

(Dies entspricht dem Setzen von layout_widthauf 0dp).

Eine Richtlinie kann auch ganz einfach in XML erstellt werden, anstatt den Layout-Editor zu verwenden:

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

Um 2 Ansichten in derselben Linie mit gleicher Breite zu erstellen, müssen Sie nur definieren

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"  
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button1" />

</android.support.constraint.ConstraintLayout>

Hinweis

• width = 0dp ( MATCH_CONSTRAINT)
• Einschränkung von button1und button2muss wie oben mögen

Ergebnis

MEHR
Wenn Sie View1größer wollen, als View2Sie verwenden können weightoder percent.
Beispiel: View1Breite = 2 * View2Breite verwenden Gewicht

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button3"
        />

</android.support.constraint.ConstraintLayout>

Ergebnis

Beispiel: View1Breite = 2 *View2 Breite verwendet Prozent

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 5"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.667"
        />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintWidth_percent="0.333"
        />

</android.support.constraint.ConstraintLayout>

Ergebnis

Na wenn es jemandem hilft

Der Schlüssel ist hier app:layout_constraintHorizontal_weight="1"und
das Beste am Constraint-Layout ist, dass es kreisförmige Abhängigkeiten unterstützt, und hier habe ich genau das getan.

Für das erste Kind
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

Für das zweite Kind

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

Hier ist die komplette Demo

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputParent"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <EditText
        android:id="@+id/editTextParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/state" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputFirstChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/pin_code" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputSecondChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/country" />
</android.support.design.widget.TextInputLayout>

Sie sollten über gewichtete Ketten lesen. Ein Beispiel für Code finden Sie hier.

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

    <TextView
        android:id="@+id/figure_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="1"
        />

    <TextView
        android:id="@+id/figure_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_1"
        tools:text="2"
        />

    <TextView
        android:id="@+id/figure_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_2"
        tools:text="3"
        />

    <TextView
        android:id="@+id/figure_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_3"
        tools:text="4"
        />
</android.support.constraint.ConstraintLayout>

So setzen android:layout_width="0dp", app:layout_constraintHorizontal_weight="1"und verknüpfen jede Ansicht mit Nachbarn wie:

app:layout_constraintStart_toEndOf="@id/figure_2"
app:layout_constraintEnd_toStartOf="@id/figure_4"

Sobald Sie Ihre verketteten Elemente haben, können Sie weiterhin Gewichte wie das relative Layout verwenden, um sie gleichmäßig zu verteilen. Das folgende Beispiel zeigt, wie Sie sie mit Textansichten unterschiedlicher Größe gleichmäßig verteilen können.

<TextView1
     app:layout_constraintHorizontal_weight="1" />
 <TextView2
     app:layout_constraintHorizontal_weight="1" />
 <TextView3
     app:layout_constraintHorizontal_weight="1" />
 <TextView4
     app:layout_constraintHorizontal_weight="1" />