约束布局中的 Barrier 和 Guideline 有啥区别？

Posted 2023-04-19

【中文标题】约束布局中的 Barrier 和 Guideline 有啥区别？

【英文标题】：What is difference between Barrier and Guideline in Constraint Layout?约束布局中的 Barrier 和 Guideline 有什么区别？

【发布时间】：2018-04-17 07:13:55

【问题描述】：

最近尝试实现Constraint Layout，但我发现Barrier 和Guideline 工作方式相同。 两者都像分隔线一样工作。它们之间有什么区别吗？

【参考方案1】：

何时使用障碍

假设您有两个具有动态高度的 TextView 小部件，并且您想在最高的 TextView 下方放置一个 Button：

仅直接在布局中实现的方法是使用水平的Barrier。 Barrier 允许您根据这两个 TextViews 的高度指定约束。然后将Button 的顶部约束到水平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_
    android:layout_>

    <TextView
        android:id="@+id/left_text_view"
        android:layout_
        android:layout_
        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_
        android:layout_
        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_
        android:layout_
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="left_text_view,right_text_view" />

    <Button
        android:id="@+id/button"
        android:layout_
        android:layout_
        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>

---

何时使用指南

假设您想将上述TextView 的高度限制为屏幕高度的 30%，无论它们有什么内容。

要实现这一点，您应该添加带有百分比位置的水平Guideline，并将TextView 底部限制为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_
    android:layout_>

    <TextView
        android:id="@+id/left_text_view"
        android:layout_
        android:layout_
        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_
        android:layout_
        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_
        android:layout_
        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_
        android:layout_
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

结论

Barrier 和Guideline 之间的唯一区别是Barrier 的位置是灵活的，并且始终基于其中包含的多个 UI 元素的大小，而Guideline 的位置始终是固定的。

【讨论】：

一个有价值的答案！

声明：“直接在布局中实现它的唯一方法是使用水平屏障。”是假的。您可以为此使用指南，方法是将两个文本框都限制在下面的指南中。 （即app:layout_constraintBottom_toTopOf="@id/guideline"

当参考视图的可见性消失时，障碍会发生什么。 ?

@pandey_shubham 在这种情况下，屏障是在 GONE 小部件的已解析位置上创建的。如果您不想考虑 GONE 小部件，可以将 barrierAllowsGoneWidgets 设置为 false。

【参考方案2】：

Official documentation on Barrier:

Barrier 引用多个小部件作为输入，并根据指定一侧的最极端小部件创建虚拟指南。例如，左屏障将与所有引用视图的左侧对齐。

Training docs on Barrier:

与指南类似，障碍是您可以将视图限制到的不可见线。除非障碍没有定义自己的位置；相反，屏障位置会根据其中包含的视图的位置移动。当您想要将视图约束到一组视图而不是一个特定视图时，这很有用。