Question

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

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

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

TopB具有可变高度，在不同情况下，TopB的高度可能比TopA更高或更小。

我的问题是：如何将BottomC约束到具有较大高度的顶视图的底部，以便BottomC不会被具有较大高度的视图重叠。（下面的截图）

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

Answer 1

发布问题3分钟后，我发现最近发布的ConstrainLayout版本1.1.x有一个名为Barrier的新功能，ConstrainLayout的官方培训文档已经发布已更新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 2

实际上这是ConstraintLayout的常见问题所以基本上有两个选项，一个是如果你的imageview是固定高度然后将TextView minheight设置为imageview的高度，否则现在引入了ConstraintLayout Barrier但这是在测试版中，如果您想将其与测试版设置如下使用

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

如何将beta ConstraintLayout添加到项目中，请按照以下步骤进行操作

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

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

然后在app gardle依赖项中添加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

Answer 3

选项1：我建议通过将两个视图（图像，TextView）添加到视图组（任何可以做）然后将进度条约束到视图组的底部来执行以下操作。（编辑：只读部分你说没有视图组所以选项2）

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

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

和

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

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

3 个答案: