首页 > 解决方案 > 对于约束布局android,屏障没有按预期运行

问题描述

期待实现这一目标

对应的XML是这个

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

    <View
        android:id="@+id/topstrip_background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black_08"
        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="@id/labelFees" />

    <TextView
        android:id="@+id/amount"
        style="@style/TextContentArbitrage"
        android:textColor="@color/primary_87"
        app:layout_constraintBottom_toTopOf="@id/barrier_top_strip"
        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_constraintBottom_toTopOf="@id/barrier_top_strip"
        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="@id/labelFees" />

    <TextView
        android:id="@+id/profit"
        style="@style/TextContentArbitrage"
        android:text="@string/arbitrage.label.trade_amount"
        android:textColor="@color/green_700"
        app:layout_constraintBottom_toTopOf="@id/barrier_top_strip"
        app:layout_constraintEnd_toEndOf="@id/labelProfit"
        app:layout_constraintStart_toStartOf="@id/labelProfit"
        app:layout_constraintTop_toBottomOf="@id/labelProfit"
        tools:text="10000" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier_top_strip"
        android:layout_width="match_parent"
        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="Sell XRP at Koinex for Rs.25 askdhakjdhakdhakjdhakjdjhakdjakjdahjdkhjadhjak" />
</android.support.constraint.ConstraintLayout>

但是,当内容destTextsrcText溢出时barrier_top_strip并不能阻止它导致

在此处输入图像描述

我究竟做错了什么?

PS:款式供参考

 <style name="TextLabelArbitrage">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:fontFamily">@font/medium</item>
    <item name="android:gravity">center</item>
    <item name="android:textSize">10sp</item>
    <item name="android:paddingTop">@dimen/margin_atomic</item>
</style>

<style name="TextContentArbitrage">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:fontFamily">@font/medium</item>
    <item name="android:gravity">center</item>
    <item name="android:maxLines">2</item>
    <item name="android:ellipsize">end</item>
    <item name="android:textSize">16sp</item>
    <item name="android:paddingBottom">@dimen/margin_atomic</item>
</style>

标签: androiduser-interfaceandroid-constraintlayout

解决方案


destText将和的高度更改srcText0dp。他们现在wrap_content。此更改应将它们的垂直高度限制在您期望的范围内。


推荐阅读