web-dev-qa-db-fra.com

Quelle est la différence entre Barrier et Guideline dans la mise en forme de contrainte?

récemment essayé d'implémenter Constraint Layout mais j'ai trouvé Barrier et Guideline fonctionne de la même manière. Les deux fonctionnent comme un diviseur. Y a-t-il une différence entre eux?

androidandroid-constraintlayout
53
Yeahia2508

QUAND UTILISER DES BARRIÈRES

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

Task view

Le moyen [~ # ~] seulement [~ # ~] de mettre en œuvre cela directement dans la mise en page est d'utiliser un horizontal Barrier. Ce Barrier vous permet de spécifier une contrainte basée sur la hauteur de ces deux TextViews. Ensuite, vous contraignez le haut de votre Button au bas de son horizontal 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 hauteurs TextView mentionnées ci-dessus à 30% de la hauteur de l'écran, quel que soit leur contenu.

Test view

Pour implémenter cela, vous devez ajouter Guideline horizontal avec un pourcentage de position et contraindre le TextView bottom à celui 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 Barrier et Guideline est que la position de Barrier est flexible et toujours basée sur la taille de plusieurs éléments d'interface utilisateur qu'elle contient et que la position de Guideline est toujours fixe.

105
Eugene Brusov

documentation officielle sur la barrière :

Une barrière référence plusieurs widgets en tant qu'entrée et crée une directive 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 de conduite, une barrière est une ligne invisible à laquelle vous pouvez contraindre des vues. Sauf qu'une barrière ne définit pas sa propre position; au lieu de cela, la position de la barrière se déplace en fonction de la position des vues qu’elle contient. Cela est utile lorsque vous souhaitez limiter une vue à un ensemble de vues plutôt qu'à une vue spécifique.

5
dominicoder