Android ConstraintLayout中Barrier组件未按预期工作问题排查

我来帮你解决这个Barrier组件未按预期工作的问题，先拆解核心问题，再给出修复方案：

问题根源分析 #

你的布局里存在循环依赖，这是Barrier失效的关键：

• 你给 amount、fees、profit 这三个TextView设置了 app:layout_constraintBottom_toTopOf="@id/barrier_top_strip"，意味着它们的底部要靠在Barrier的顶部
• 但Barrier本身的 app:barrierDirection="bottom" 且引用了这三个TextView，意味着Barrier的位置由这三个View的最底部决定
  这种互相依赖的关系会让ConstraintLayout无法正确计算布局，导致Barrier完全失效。

另外还有两个小问题：

1. Barrier组件不需要设置 android:layout_width="match_parent"，它作为辅助布局元素，默认宽度是wrap_content，设置match_parent反而可能干扰布局计算
2. 顶部灰色条topstrip_background的约束逻辑不对，应该让它从父布局顶部延伸到Barrier的位置，而不是绑定Barrier的bottom

修复后的完整布局代码 #

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="?android:attr/selectableItemBackground">

    <!-- 顶部灰色背景条：覆盖从父布局顶部到Barrier的区域 -->
    <View 
        android:id="@+id/topstrip_background" 
        android:layout_width="match_parent" 
        android:layout_height="0dp"
        android:background="@color/black_08" 
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/barrier_top_strip" />

    <!-- 金额标签与内容 -->
    <TextView 
        android:id="@+id/labelAmount" 
        style="@style/TextLabelArbitrage" 
        android:text="@string/arbitrage.label.trade_amount" 
        android:textColor="@color/primary_54" 
        app:layout_constraintEnd_toStartOf="@id/labelFees" 
        app:layout_constraintHorizontal_chainStyle="spread" 
        app:layout_constraintStart_toStartOf="parent" 
        app:layout_constraintTop_toTopOf="parent" />

    <TextView 
        android:id="@+id/amount" 
        style="@style/TextContentArbitrage" 
        android:textColor="@color/primary_87" 
        app:layout_constraintEnd_toEndOf="@id/labelAmount" 
        app:layout_constraintStart_toStartOf="@id/labelAmount" 
        app:layout_constraintTop_toBottomOf="@id/labelAmount" 
        tools:text="1000" />

    <TextView 
        android:id="@+id/labelFees" 
        style="@style/TextLabelArbitrage" 
        android:text="@string/arbitrage.label.total_fees" 
        android:textColor="@color/red_400" 
        app:layout_constraintEnd_toStartOf="@id/labelProfit" 
        app:layout_constraintStart_toEndOf="@id/labelAmount" 
        app:layout_constraintTop_toTopOf="parent" />

    <TextView 
        android:id="@+id/fees" 
        style="@style/TextContentArbitrage" 
        android:textColor="@color/red_700" 
        app:layout_constraintEnd_toEndOf="@id/labelFees" 
        app:layout_constraintStart_toStartOf="@id/labelFees" 
        app:layout_constraintTop_toBottomOf="@id/labelFees" 
        tools:text="1000" />

    <TextView 
        android:id="@+id/labelProfit" 
        style="@style/TextLabelArbitrage" 
        android:text="@string/arbitrage.label.profit" 
        android:textColor="@color/green_400" 
        app:layout_constraintEnd_toEndOf="parent" 
        app:layout_constraintStart_toEndOf="@id/labelFees" 
        app:layout_constraintTop_toTopOf="parent" />

    <TextView 
        android:id="@+id/profit" 
        style="@style/TextContentArbitrage" 
        android:textColor="@color/green_700" 
        app:layout_constraintEnd_toEndOf="@id/labelProfit" 
        app:layout_constraintStart_toStartOf="@id/labelProfit" 
        app:layout_constraintTop_toBottomOf="@id/labelProfit" 
        tools:text="10000" />

    <!-- Barrier：定位到三个金额TextView的最底部 -->
    <android.support.constraint.Barrier 
        android:id="@+id/barrier_top_strip" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        app:barrierDirection="bottom" 
        app:constraint_referenced_ids="fees, profit, amount" />

    <!-- 下方交易信息区域 -->
    <android.support.v7.widget.AppCompatImageView 
        android:id="@+id/srcExchange" 
        android:layout_width="@dimen/width_exchange" 
        android:layout_height="@dimen/width_exchange" 
        android:background="@drawable/circle_strip_grey" 
        android:padding="@dimen/dp1" 
        app:layout_constraintBottom_toTopOf="@id/srcText" 
        app:layout_constraintEnd_toEndOf="@id/srcText" 
        app:layout_constraintStart_toStartOf="@id/srcText" 
        app:layout_constraintTop_toBottomOf="@id/barrier_top_strip" 
        app:layout_constraintVertical_chainStyle="packed" />

    <android.support.v7.widget.AppCompatImageView 
        android:id="@+id/srcCoin" 
        android:layout_width="@dimen/dp20" 
        android:layout_height="@dimen/dp20" 
        android:background="@drawable/circle_strip_grey" 
        android:padding="@dimen/dp1" 
        app:layout_constraintBottom_toBottomOf="@id/srcExchange" 
        app:layout_constraintEnd_toEndOf="@id/srcExchange" />

    <TextView 
        android:id="@+id/srcText" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="@dimen/margin_small" 
        android:fontFamily="@font/regular" 
        android:gravity="center" 
        android:textColor="@color/black_54" 
        android:textSize="12sp" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintEnd_toStartOf="@id/transfer" 
        app:layout_constraintStart_toStartOf="parent" 
        app:layout_constraintTop_toBottomOf="@id/srcExchange" 
        tools:text="Sell XRP at Bitbns for Rs.24" />

    <android.support.v7.widget.AppCompatImageView 
        android:id="@+id/transfer" 
        android:layout_width="28dp" 
        android:layout_height="28dp" 
        android:layout_marginLeft="@dimen/margin_normal" 
        android:layout_marginRight="@dimen/margin_normal" 
        android:src="@drawable/transfer" 
        android:tint="#D7D7D7" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintEnd_toStartOf="@id/destText" 
        app:layout_constraintStart_toEndOf="@id/srcText" 
        app:layout_constraintTop_toBottomOf="@id/barrier_top_strip" />

    <android.support.v7.widget.AppCompatImageView 
        android:id="@+id/destExchange" 
        android:layout_width="@dimen/width_exchange" 
        android:layout_height="@dimen/width_exchange" 
        android:background="@drawable/circle_strip_grey" 
        android:padding="@dimen/dp1" 
        app:layout_constraintBottom_toTopOf="@id/destText" 
        app:layout_constraintEnd_toEndOf="@id/destText" 
        app:layout_constraintStart_toStartOf="@id/destText" 
        app:layout_constraintTop_toBottomOf="@id/barrier_top_strip" 
        app:layout_constraintVertical_chainStyle="packed" />

    <android.support.v7.widget.AppCompatImageView 
        android:id="@+id/destCoin" 
        android:layout_width="@dimen/dp20" 
        android:layout_height="@dimen/dp20" 
        android:background="@drawable/circle_strip_grey" 
        android:padding="@dimen/dp1" 
        app:layout_constraintBottom_toBottomOf="@id/destExchange" 
        app:layout_constraintEnd_toEndOf="@id/destExchange" />

    <TextView 
        android:id="@+id/destText" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="@dimen/margin_small" 
        android:fontFamily="@font/regular" 
        android:gravity="center" 
        android:textColor="@color/black_54" 
        android:textSize="12sp" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintEnd_toEndOf="parent" 
        app:layout_constraintStart_toEndOf="@id/transfer" 
        app:layout_constraintTop_toBottomOf="@id/destExchange" 
        tools:text="Buy XRP at WazirX for Rs.22" />

</android.support.constraint.ConstraintLayout>

关键修复点说明 #

1. 移除循环依赖：删掉了amount、fees、profit三个TextView的app:layout_constraintBottom_toTopOf="@id/barrier_top_strip"约束，让Barrier可以正常根据这三个View的底部位置计算自身位置
2. 修正顶部背景条约束：把topstrip_background的高度设为0dp，并约束它的顶部到父布局顶部、底部到Barrier的底部，这样灰色背景会自动覆盖整个顶部金额区域
3. 优化Barrier配置：把Barrier的宽度改为wrap_content，符合它作为辅助布局元素的特性
4. 补全未完成的布局代码：完善了destExchange、destCoin、destText的布局约束，保证整体布局完整

内容的提问来源于stack exchange，提问作者humblerookie