Ansichten mit ConstraintLayout gleichmäßig verteilen

174

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

android android-layout android-constraintlayout

— AdamK
quelle

323

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

— AdamK
quelle

1

Ich konnte keinen Weg finden, eine Richtlinie mit einer Einschränkung zu erstellen. Ich möchte, dass sich eine horizontale Richtlinie in der Mitte zweier Ansichten befindet. Stellen Sie sich eine größere Ansicht mit einer Höhe von 100 dp oben und eine kleinere mit einer Höhe von 50 dp unten vor. Ich möchte eine Richtlinie in die Mitte des Raums zwischen ihnen stellen.

— Headsvk

3

Ich glaube nicht, dass Sie der Richtlinie selbst Einschränkungen hinzufügen können. Sie können mehrere Richtlinien hinzufügen und dann die Ansichten auf diese Richtlinien beschränken. Möglicherweise möchten Sie eine neue Frage mit Details zu dem, was Sie erreichen möchten, veröffentlichen. Fühlen Sie sich frei, es auch hier wieder einzufügen.

— AdamK

Vielen Dank, sehr geehrter Herr. Es war eine rechtzeitige und effektive Hilfe.

— iSofia

Ich möchte Ansichten eine proportionale Breite geben. Zum Beispiel möchte ich, dass die Schaltfläche "Teilen" doppelt so breit ist wie die Schaltfläche "Speichern". Ohne Richtlinien zu verwenden, da meine Ansichten nicht wie in diesem Beispiel nebeneinander positioniert sind. ist es möglich?

— Shubham Naik

Sie müssen die in den Richtlinien angegebenen Werte in tatsächliche Ränder oder Auffüllungen konvertieren. Richtlinien funktionieren nur im Entwurfsmodus.

— Abhinav Saxena

49

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

— Phan Van Linh
quelle

23

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>

— rookieDeveloper
quelle

9

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"

— CoolMind
quelle

Was bringt es, eine weitere Antwort genau wie eine andere zu veröffentlichen, die vor zwei Jahren veröffentlicht wurde?

@Subzero, ich habe viele Male gleiche Antworten mit hoher Rate gesehen. Sogar Codezeilen waren gleich. Ich vermute, einige Autoren haben von mir kopiert und sogar mehr Pluspunkte bekommen. In diesem Fall sind die Antworten unterschiedlich. Ich habe auch andere Quellen verwendet, um zu verstehen, wie Gewichte funktionieren ConstraintLayout, und nur die erste Antwort reichte nicht aus, um ein Bild oben zu erhalten.

— CoolMind

3

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

— tzg
quelle