ConstraintLayout：如何将视图顶部约束到最大高度视图的底部？

Question

我目前正在尝试 ConstraintLayout 在我们的项目中。

我想实现的布局可以简化如下：

布局顶部有两个视图（比如 TopA 和 TopB），它们下方还有另一个视图（比如 BottomC）。

TopB的高度是可变的，在不同的情况下TopB的高度可能比TopA的高或低。

我的问题是：如何将BottomC限制在高度较大的Top视图的底部，使BottomC不会被高度较大的视图重叠。（下面附上截图）

我可以通过将 TopA 和 TopB 添加到额外的 ViewGroup（例如 LinearLayout）并将 BottomC 限制在该 ViewGroup 的底部来实现。但是 是否可以在不引入额外层 ViewGroup 的情况下实现这一目标？

Answer 1

选项 1：我建议通过将两个视图（图像、文本视图）添加到视图组（任何人都可以）来执行以下操作，然后将进度条限制在视图组的底部。（编辑：只是阅读部分你说没有视图组所以选项2)

选项 2：但是，如果您出于动画或其他原因必须以编程方式执行此操作，我建议您阅读：

https://developer.android.com/reference/android/support/constraint/ConstraintSet.html

和

https://developer.android.com/reference/android/transition/TransitionManager.html

Answer 2

发题3分钟后，我才发现ConstrainLayout最近发布的1.1.x版本有一个新特性叫做Barrier，[=]的官方培训文档=11=] 已更新 to introduce it。

这正是我要找的。希望这可以帮助像我这样的人。

实际布局代码如下所示（注意 android.support.constraint.Barrier 节点）：

<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/topA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/topB"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="24dp"
        android:text="Text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.75"
        app:layout_constraintStart_toEndOf="@+id/topA"
        app:layout_constraintTop_toTopOf="@+id/topA"
        />

    <android.support.constraint.Barrier
        android:id="@+id/barrier4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="topA,topB"
        tools:layout_editor_absoluteY="16dp"/>

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.50"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/barrier4"/>

</android.support.constraint.ConstraintLayout>

Answer 3

其实这个是ConstraintLayout的通病所以基本上有两种选择，一种是如果你的imageview是固定高度那么设置TextView minheight为imageview的高度否则现在引入了ConstraintLayout Barrier但是这是在Beta 版本，如果你想将它与 Beta 版本一起使用，设置如下

这是 ConstraintLayout 中引入的新功能，目前处于 Beta 版本。

如何按照以下步骤将 beta ConstraintLayout 添加到项目

在项目gradle文件中添加maven支持如下

allprojects {
    repositories {
        maven { url 'https://maven.google.com' }
        jcenter()
    }
}

然后在app gardle dependencies中添加ConstarintLayout库依赖

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'

在布局中添加障碍

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    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"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Barrier
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/barrier1"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textView2, imageView2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintTop_toBottomOf="@id/barrier1"
        app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

现已发布 Beta3，其中包含一些修复和新功能 https://androidstudio.googleblog.com/2017/10/constraintlayout-110-beta-3-is-now.html

ConstraintLayout：如何将视图顶部约束到最大高度视图的底部？

ConstrainLayout: How to constrain a View's top to the bottom of the view of largest height?

android

android-layout

android-constraintlayout