ConstraintLayout with Barriers;如何根据大小约束屏障底部/顶部

Question

我正在尝试1.1.0-beta1中的新屏障功能。它工作正常，但有这种用例，我似乎无法数字或（或可能是ConstraintLayout？）

我想要完成的是：我有一个imageview左边，标题和副标题textview右侧的textview。 Imageview是固定的高度。我有一个按钮，即底部约束到图像视图的底部但是应该被顶部约束到字幕textview的底部，如果subtitletextview比imageview高。

（顺便说一句我也试过有它底部约束到的ImageView的底部，topconstrained到TextView的底部，并给它1.0对底部的偏见，但有大量的文字的情况下没有工作）

有了障碍，我只能获得按钮上方受限于屏障的底部（或顶部，似乎是相同的）

<?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"> 

    <ImageView 
     android:id="@+id/imageView2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:srcCompat="@color/blue"/> 

    <ImageView 
     android:id="@+id/imageView4" 
     android:layout_width="0dp" 
     android:layout_height="150dp" 
     android:layout_marginLeft="0dp" 
     android:layout_marginRight="0dp" 
     android:layout_marginTop="0dp" 
     android:scaleType="centerCrop" 
     app:layout_constraintHorizontal_bias="0.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:srcCompat="@drawable/books"/> 

    <ImageView 
     android:id="@+id/imageView6" 
     android:layout_width="124dp" 
     android:layout_height="156dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginTop="8dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/imageView4" 
     app:srcCompat="@android:drawable/radiobutton_on_background"/> 

    <TextView 
     android:id="@+id/textView4" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     android:layout_marginTop="8dp" 
     android:text="TextView" 
     app:layout_constraintHorizontal_bias="0.0" 
     app:layout_constraintLeft_toRightOf="@+id/imageView6" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/imageView4"/> 

    <TextView 
     android:id="@+id/textView5" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="10dp" 
     android:text="Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom" 
     app:layout_constraintLeft_toLeftOf="@+id/textView4" 
     app:layout_constraintRight_toRightOf="@+id/textView4" 
     app:layout_constraintTop_toBottomOf="@+id/textView4"/> 

    <Button 
     android:id="@+id/button" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Button" 
     app:layout_constraintTop_toBottomOf="@+id/textView5" 
     app:layout_constraintRight_toRightOf="parent"/> 

</android.support.constraint.ConstraintLayout> 

两种状态中的图像：

Answer 1

这里是一个布局，会为工作你。这有点复杂，但是做你想要的。这里是如何工作的，并设置：

• 定义一个隐形按钮，blockingButton，具有相同尺寸的其他按钮。将此按钮限制在左侧的底部ImageView。

• 在blockingButton之上，放置一个Space小部件。此Space小部件的位置将定义底部按钮将浮动到的最大高度。

• 定义一个浮动在Space小部件和大TextView以下的障碍。

• 最后，将浮动按钮的顶部限制在屏障上。

由于在大TextView文字的大小改变时，该按钮将尽可能向上浮动的Space组件，但是没有更远。随着TextView的增长，它将推下屏障和底部按钮。

这是short video。

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/imageView2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:srcCompat="@color/blue" /> 

    <ImageView 
     android:id="@+id/imageView4" 
     android:layout_width="0dp" 
     android:layout_height="150dp" 
     android:scaleType="centerCrop" 
     app:layout_constraintHorizontal_bias="0.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:srcCompat="@drawable/books" /> 

    <ImageView 
     android:id="@+id/imageView6" 
     android:layout_width="124dp" 
     android:layout_height="156dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginTop="8dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/imageView4" 
     app:srcCompat="@android:drawable/radiobutton_on_background" 
     android:layout_marginStart="8dp" /> 

    <TextView 
     android:id="@+id/textView4" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="16dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     android:layout_marginStart="16dp" 
     android:layout_marginTop="8dp" 
     android:text="TextView" 
     app:layout_constraintHorizontal_bias="0.0" 
     app:layout_constraintLeft_toRightOf="@+id/imageView6" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/imageView4" /> 

    <TextView 
     android:id="@+id/textView5" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="17dp" 
     android:text="Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom" 
     app:layout_constraintLeft_toLeftOf="@+id/textView4" 
     app:layout_constraintRight_toRightOf="@+id/textView4" 
     app:layout_constraintTop_toBottomOf="@+id/textView4" 
     app:layout_constraintHorizontal_bias="0.0" /> 

<!-- This is the start of the changes. --> 
    <Button 
     android:id="@+id/button" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Button" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/barrier" /> 

    <Button 
     android:id="@+id/blockingButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Button" 
     android:visibility="invisible" 
     app:layout_constraintBottom_toBottomOf="@+id/imageView6" 
     app:layout_constraintLeft_toLeftOf="@+id/imageView6" /> 

    <android.support.v4.widget.Space 
     android:id="@+id/spacer" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     app:layout_constraintBottom_toTopOf="@+id/blockingButton" /> 

    <android.support.constraint.Barrier 
     android:id="@+id/barrier" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:barrierDirection="bottom" 
     app:constraint_referenced_ids="spacer, textView5" /> 

</android.support.constraint.ConstraintLayout>