Was ist der Unterschied zwischen Barriere und Richtlinie im Einschränkungslayout?

92

Constraint LayoutIch habe kürzlich versucht zu implementieren, aber ich habe gefunden Barrierund Guidelinefunktioniert gleich. Beides funktioniert wie ein Teiler. Gibt es einen Unterschied zwischen ihnen?

Yeahia2508
quelle

Antworten:

201

Wann man Barrieren benutzt

Angenommen, Sie haben zwei TextViewWidgets mit dynamischen Höhen und möchten eine Buttondirekt unter der höchsten platzieren TextView:

Aufgabenansicht

Die einzige Möglichkeit, dies direkt im Layout zu implementieren, ist die Verwendung einer Horizontalen Barrier. Auf diese Weise Barrierkönnen Sie eine Einschränkung basierend auf der Höhe dieser beiden TextViews angeben . Dann beschränken Sie die Oberseite Ihrer Buttonauf die Unterseite der Horizontalen Barrier.

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

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

    <android.support.constraint.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" />

</android.support.constraint.ConstraintLayout>

Wann sind Richtlinien zu verwenden?

Angenommen, Sie möchten die oben genannten TextViewHöhen auf 30% der Bildschirmhöhe beschränken, unabhängig vom Inhalt.

Testansicht

Um dies zu implementieren, sollten Sie horizontal Guidelinemit prozentualer Position hinzufügen und den TextViewunteren Rand darauf beschränken Guideline.

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

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

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

</android.support.constraint.ConstraintLayout>

Fazit

Der einzige Unterschied zwischen Barrierund Guidelinebesteht darin, dass Barrierdie Position flexibel ist und immer auf der Größe mehrerer darin enthaltener UI-Elemente basiert und Guidelinedie Position immer fest ist.

Eugene Brusov
quelle
eine wertvolle Antwort!
Alireza Noorali
Die Behauptung: "Die einzige Möglichkeit, dies direkt im Layout zu implementieren, ist die Verwendung einer horizontalen Barriere." ist falsch. Sie können hierfür eine Richtlinie verwenden, indem Sie beide Textfelder unten durch eine Richtlinie einschränken. ( app:layout_constraintBottom_toTopOf="@id/guideline"
Dh
11

Offizielle Dokumentation zu Barrier :

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

Schulungsunterlagen zu Barrier :

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

Dominicoder
quelle