Jaka jest różnica między Barierą a Wytycznymi w układzie ograniczenia?


92

Ostatnio próbowałem wdrożyć, Constraint Layoutale znalazłem Barrieri Guidelinedziała to samo. Obie działają jak rozdzielacz. Czy jest między nimi jakaś różnica?

Odpowiedzi:


201

Kiedy stosować bariery

Załóżmy, że masz dwa TextViewwidżety z dynamicznymi wysokościami i chcesz umieścić Buttontuż pod najwyższym TextView:

Widok zadań

Tylko sposobem realizacji, które bezpośrednio w układzie jest użycie poziomej Barrier. To Barrierpozwala określić ograniczenie na podstawie wysokości tych dwóch TextViews. Następnie ograniczasz górę swojego Buttondo dołu poziomu 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>

Kiedy stosować wytyczne

Załóżmy, że chcesz ograniczyć wyżej wymienione TextViewwysokości do 30% wysokości ekranu, bez względu na zawartość, jaką zawierają.

Widok testowy

Aby to zaimplementować, należy dodać pozycję poziomą Guidelinez pozycją procentową i ograniczyć do tego TextViewdół 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>

Wniosek

Jedyna różnica między Barrieri Guidelinepolega na tym Barrier, że pozycja ta jest elastyczna i zawsze oparta na rozmiarze wielu zawartych w niej elementów interfejsu użytkownika, Guidelinea pozycja jest zawsze stała.


Cenna odpowiedź!
Alireza Noorali

Twierdzenie: „JEDYNYM sposobem wdrożenia tego bezpośrednio w układzie jest użycie poziomej bariery”. to fałsz. Możesz użyć w tym celu wskazówek, ograniczając oba pola tekstowe poniżej wytycznymi. (Tj.app:layout_constraintBottom_toTopOf="@id/guideline"
Chrispher

11

Oficjalna dokumentacja dotycząca Bariery :

Barrier odwołuje się do wielu widżetów jako danych wejściowych i tworzy wirtualne wytyczne w oparciu o najbardziej ekstremalny widżet po określonej stronie. Na przykład lewa bariera zostanie wyrównana do lewej strony wszystkich widoków, do których istnieją odniesienia.

Dokumentacja szkoleniowa dotycząca Bariery :

Podobnie jak wytyczna, bariera to niewidoczna linia, do której można ograniczyć widoki. Tyle że bariera nie określa swojej własnej pozycji; zamiast tego pozycja bariery przesuwa się na podstawie pozycji zawartych w niej widoków. Jest to przydatne, gdy chcesz ograniczyć widok do zestawu widoków, a nie do jednego określonego widoku.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.