有障碍的约束布局;如何根据大小约束屏障的底部/顶部

Question

我正在尝试1.1.0-beta1中新的屏障功能。它按预期工作，但有这个用例我似乎无法计算或（或者可能是ConstraintLayout？）

我想要完成的是：我在左侧有一个图像视图，在图像视图右侧有标题和副标题文本视图。 Imageview是固定的高度。我有一个按钮，底部约束到图像视图的底部但是应该被顶部约束到字幕文本视图的底部，如果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

这是一个适合您的布局。这有点复杂，但做你想要的。以下是它的工作原理和设置方法：

• 定义一个隐藏按钮Space，其尺寸与其他按钮相同。将此按钮限制在左侧底部Space。

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

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

• 最后，将浮动按钮的顶部约束到屏障。

随着文本大小在大<?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> 中发生变化，该按钮将浮动到dataLength=data.length; for(var i=0;i<dataLength;i++){ var dataID = data[i].id; var dataCatagory = data[i].category.description; } 窗口小部件，但不会更远。当{{1}}增长时，它将按下屏障和底部按钮。

这是short video。

{{1}}

Answer 2

@cheticamp的答案很棒，但他没有解释他是如何提出这个想法的。

以下是我如何从他的解决方案中获得另一种解决方案。

我们想要实现的是将按钮设置得尽可能高，但它应该被限制在两个限制之内：

1. button.bottom＆gt; = image.bottom

2. button.top＆gt; = text.bottom

我们可以使用Barrier来满足这两个要求，但我们需要修改其中一个，我选择修改第二个：

button.top＆gt; = text.bottom＆lt; =＆gt; button.bottom＆gt; = text.bottom + button.height

现在我们有这两个限制：

1. button.bottom＆gt; = image.bottom

2. button.bottom＆gt; = text.bottom + button.height

现在我们可以在TextView下方放置一个假按钮：

<?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/imageView"
        android:layout_width="124dp"
        android:layout_height="156dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@android:drawable/radiobutton_on_background"/>

    <TextView
        android:id="@+id/textView1"
        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/imageView"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/textView2"
        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/textView1"
        app:layout_constraintRight_toRightOf="@+id/textView1"
        app:layout_constraintTop_toBottomOf="@+id/textView1"/>

    <Button
        android:id="@+id/button_fake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:visibility="invisible"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:layout_constraintRight_toRightOf="parent"/>

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="imageView,button_fake"
        />

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

</android.support.constraint.ConstraintLayout>