如何修复约束布局中不必要的 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"
我有一个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"