Quelle est la différence entre une barrière et une ligne directrice dans la disposition des contraintes?

93

Constraint LayoutJ'ai récemment essayé de mettre en œuvre mais j'ai trouvé Barrieret Guidelinefonctionne de la même manière. Les deux fonctionnent comme un diviseur. Y a-t-il une différence entre eux?

Ouaisia2508
la source

Réponses:

202

Quand utiliser les barrières

Supposons que vous ayez deux TextViewwidgets avec des hauteurs dynamiques et que vous souhaitiez placer un Buttonjuste en dessous du plus haut TextView:

Vue des tâches

La SEULE façon d'implémenter cela directement dans la mise en page consiste à utiliser un horizontal Barrier. Cela Barriervous permet de spécifier une contrainte basée sur la hauteur de ces deux TextViews. Ensuite, vous contraignez le haut de votre Buttonau bas de l'horizontale 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>

Quand utiliser les directives

Supposons que vous souhaitiez limiter les TextViewhauteurs mentionnées ci-dessus à 30% de la hauteur de l'écran, quel que soit leur contenu.

Vue test

Pour implémenter cela, vous devez ajouter une Guidelineposition horizontale avec un pourcentage et contraindre le TextViewbas à cela 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>

Conclusion

La seule différence entre Barrieret Guidelineest que Barrierla position de est flexible et toujours basée sur la taille de plusieurs éléments d'interface utilisateur qu'elle contient et que Guidelinela position de est toujours fixe.

Eugène Brusov
la source
une réponse précieuse!
Alireza Noorali
La revendication: "La SEULE façon de mettre en œuvre cela directement dans la mise en page est d'utiliser une barrière horizontale." c'est faux. Vous pouvez utiliser une ligne directrice pour cela, en ayant les deux zones de texte être contraintes ci-dessous par une ligne directrice. (Ieapp:layout_constraintBottom_toTopOf="@id/guideline"
Chrispher
11

Documentation officielle sur la barrière :

Une barrière fait référence à plusieurs widgets en entrée et crée une ligne directrice virtuelle basée sur le widget le plus extrême du côté spécifié. Par exemple, une barrière de gauche s'alignera à gauche de toutes les vues référencées.

Documents de formation sur la barrière :

Semblable à une ligne directrice, une barrière est une ligne invisible à laquelle vous pouvez contraindre les vues. Sauf qu'une barrière ne définit pas sa propre position; à la place, la position de la barrière se déplace en fonction de la position des vues qu'elle contient. Ceci est utile lorsque vous souhaitez contraindre une vue à un ensemble de vues plutôt qu'à une vue spécifique.

dominicoder
la source