Was ist der Unterschied zwischen Barriere und Richtlinie im Constraint-Layout?

Lesezeit: 5 Minuten

Kürzlich versucht zu implementieren Constraint Layout aber ich fand Barrier und Guideline funktioniert gleich. Beides funktioniert wie ein Teiler. Gibt es einen Unterschied zwischen ihnen?

Benutzer-Avatar
Eugen Brusov

Wann Barrieren eingesetzt werden

Angenommen, Sie haben zwei TextView Widgets mit dynamischen Höhen und Sie möchten eine platzieren Button knapp unter dem höchsten TextView:

Aufgabenansicht

Das NUR Eine Möglichkeit, dies direkt im Layout zu implementieren, besteht darin, eine Horizontale zu verwenden Barrier. Dass Barrier ermöglicht es Ihnen, eine Einschränkung basierend auf der Höhe dieser beiden festzulegen TextViews. Dann schränken Sie die Oberseite Ihres ein Button bis unter die Horizontale Barrier.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <TextView
        android:id="@+id/left_text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        android:textSize="16sp"
        android:background="#AAA"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/right_text_view"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/right_text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
        android:textSize="16sp"
        android:background="#DDD"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/left_text_view"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="left_text_view,right_text_view" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/barrier" />

</androidx.constraintlayout.widget.ConstraintLayout>

Wann sollten Richtlinien verwendet werden?

Angenommen, Sie möchten das oben Erwähnte einschränken TextView Höhen auf 30 % der Bildschirmhöhe, unabhängig von den Inhalten, die sie haben.

Testansicht

Um dies zu implementieren, sollten Sie horizontal hinzufügen Guideline mit prozentualer Position und beschränken die TextView unten dazu Guideline.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <TextView
        android:id="@+id/left_text_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="#AAA"
        android:text="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toStartOf="@+id/right_text_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/right_text_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:background="#DDD"
        android:text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
        android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/left_text_view"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

</androidx.constraintlayout.widget.ConstraintLayout>

Fazit

Der einzige Unterschied zw Barrier und Guideline ist das BarrierDie Position von ist flexibel und basiert immer auf der Größe mehrerer darin enthaltener UI-Elemente und GuidelineDie Position von ist immer festgelegt.

  • eine wertvolle Antwort!

    – Alireza Noorali

    1. Dezember 2019 um 12:06 Uhr

  • Die Behauptung: „Die EINZIGE Möglichkeit, das direkt im Layout umzusetzen, ist die Verwendung einer horizontalen Barriere.“ ist falsch. Dazu können Sie eine Hilfslinie verwenden, indem Sie beide Textfelder unten durch eine Hilfslinie einschränken lassen. (d. h app:layout_constraintBottom_toTopOf="@id/guideline"

    – Chrispher

    30. Oktober 2020 um 20:11 Uhr


  • Was passiert mit der Barriere, wenn die Sichtbarkeit von Referenzansichten weg ist. ?

    – pandey_shubham

    3. September 2021 um 12:51 Uhr

  • @pandey_shubham In diesem Fall wird die Barriere an der aufgelösten Position des GONE-Widgets erstellt. Wenn Sie GONE-Widgets nicht berücksichtigen möchten, können Sie dies einstellen barrierAllowsGoneWidgets zu false.

    – Ionut Negru

    10. November 2021 um 9:23 Uhr

  • Vielen Dank für die Erklärung und das Beispiel. Es ist sehr nützlich!

    – Oleksandr.D

    20. April um 8:57 Uhr

Offizielle Dokumentation zu Barrier:

Eine Barriere verweist auf mehrere Widgets als Eingabe und erstellt eine virtuelle Richtlinie basierend auf dem extremsten Widget auf der angegebenen Seite. Beispielsweise wird eine linke Barriere links von allen referenzierten Ansichten ausgerichtet.

Schulungsunterlagen zu Barrier:

Ähnlich wie eine Richtlinie ist eine Barriere eine unsichtbare Linie, auf die Sie die Ansicht beschränken können. Nur dass eine Barriere nicht ihre eigene Position definiert; Stattdessen bewegt sich die Barrierenposition basierend auf der Position der darin enthaltenen Ansichten. Dies ist nützlich, wenn Sie eine Ansicht auf eine Reihe von Ansichten beschränken möchten, anstatt auf eine bestimmte Ansicht.

1345550cookie-checkWas ist der Unterschied zwischen Barriere und Richtlinie im Constraint-Layout?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy