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>