如何修复约束布局中不必要的 space?

How to fix unnecessary space in Constraint Layout?

我有一个Constraint Layout。 objective 是将两个 recyclerview 堆叠在一起。我使用 Constraint Layout 的原因是因为我也希望 TextView 占据与底部 recyclerview 相同的 space。 (我将以编程方式将 TextView 设置为在底部 recyclerview 没有内容时可见)。

布局如下:

<?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="250dp"
    android:background="@color/heart_red"
    tools:context=".MainActivity">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/tabRecyclerView"
        android:layout_width="0dp"
        android:layout_height="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/imageRecyclerView"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/imageRecyclerView"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@color/lightshade"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="@id/tabRecyclerView" />


</android.support.constraint.ConstraintLayout>

此外,这是我 imageRecyclerView 中项目列的布局:

<?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="wrap_content"
    android:layout_height="match_parent"
    android:background="@color/darkshade">

    <ImageView
        android:id="@+id/itemImage"
        android:adjustViewBounds="true"
        android:scaleType="fitStart"
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/itemFavoriteButton"/>

    <me.zhanghai.android.materialprogressbar.MaterialProgressBar
        android:id="@+id/itemProgressBar"
        android:indeterminate="true"
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintRight_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/itemFavoriteButton"/>

    <ToggleButton
        android:id="@+id/itemFavoriteButton"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ic_favorite"
        android:textOff=""
        android:textOn=""
        android:text=""
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/itemImage"
        app:layout_constraintBottom_toBottomOf="parent"/>


</android.support.constraint.ConstraintLayout>

但是,由于某种原因,Constraint Layout 底部有一个红色条,如下所示:

据我所知,从数学上讲,一切都已通过。那么为什么我的布局底部有一个红色条?

您正在尝试将 recyclerview 堆叠在一起,对吗?

目前,您无法将 tabRecyclerView 和 imageRecyclerView 的高度相加,因为它们相互重叠。

看看这个

  • 父布局高度为250dp

  • tabRecyclerView为50dp

  • imageRecyclerView 为 200dp(但由于这一行 app:layout_constraintTop_toTopOf="@id/tabRecyclerView",它与 tabRecyclerView 重叠)
  • 缺少 50dp(这就是显示父项的红色背景的原因)

修复

改变

app:layout_constraintTop_toTopOf="@id/tabRecyclerView"

app:layout_constraintTop_toBottomOf="@id/tabRecyclerView"