如何在ConstraintLayout中让Bottom视图始终位于可切换可见性的中间视图下方？

当然可以在布局文件里直接搞定这个需求，完全不用写Java/Kotlin代码动态修改约束！ConstraintLayout自带的Barrier组件就是为这种「跟随一组视图中可见元素对齐」的场景量身打造的。

具体实现步骤： #

• 添加Barrier组件：在布局中加入一个Barrier，设置它的app:barrierDirection为bottom，并通过app:constraint_referenced_ids把middle1和middle2都关联进去。
• 约束Bottom视图：把bottom的顶部约束到这个Barrier的底部，而不是直接绑定到middle1或middle2的底部。

完整布局代码示例： #

<androidx.constraintlayout.widget.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">

    <View
        android:id="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#FF9800"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/middle1"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#2196F3"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@id/top"/>

    <View
        android:id="@+id/middle2"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:background="#4CAF50"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@id/top"/>

    <!-- 核心的Barrier，自动跟随可见中间视图的底部 -->
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/middle_barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="middle1,middle2"/>

    <View
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#F44336"
        app:layout_constraintTop_toBottomOf="@id/middle_barrier"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

原理说明： #

Barrier的作用是在指定方向上“紧贴”所有关联视图中可见的那个的边缘。这里设置了barrierDirection="bottom"，所以当middle1可见、middle2隐藏时，Barrier会对齐middle1的底部；切换成middle2可见、middle1隐藏时，Barrier会自动跳到middle2的底部。而bottom始终约束在Barrier下方，自然就实现了“始终跟随可见中间视图”的效果。

如果你的项目用的是ConstraintLayout 2.0及以上版本，也可以尝试用Flow组件，但Barrier是更轻量、更直接的解决方案，完全适配你的场景。

内容的提问来源于stack exchange，提问作者me.at.coding