ConstraintLayout中ImageView约束至Toolbar底部仍覆盖Toolbar求助

嘿，我来帮你搞定这个ImageView覆盖Toolbar的问题！这里有几个关键问题需要修正，咱们一步步来：

问题根源 #

你用的是ConstraintLayout，但代码里却混用了RelativeLayout的属性（比如layout_alignParentTop、layout_below），这些属性在ConstraintLayout里完全不生效。另外，ConstraintLayout中match_parent的行为和你预期的不一样——它会让视图直接占满整个父容器，忽略你设置的顶部约束，这就是图片覆盖Toolbar的核心原因。

解决方案 #

1. 修正Toolbar的约束

把Toolbar里的android:layout_alignParentTop="true"替换成ConstraintLayout的专属约束，确保它牢牢固定在屏幕顶部：

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

2. 调整ImageView的宽高与约束

把ImageView的宽高从match_parent改成0dp（也就是match_constraints），然后添加完整的约束，让它精确填充Toolbar下方的剩余空间：

android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

3. 修复TabLayout的约束

同样，把TabLayout的android:layout_below="@+id/toolbar"改成ConstraintLayout的约束，同时固定它的左右位置：

app:layout_constraintTop_toBottomOf="@id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

修改后的完整代码 #

<androidx.constraintlayout.widget.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">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:elevation="6dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <ImageView
        android:id="@+id/background"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/rain_drops"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:elevation="6dp"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        app:tabSelectedTextColor="@android:color/white"
        app:tabTextColor="@android:color/darker_gray"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

额外说明 #

• 注意布局顺序：我把Toolbar放在了ImageView前面，这样Toolbar会在ImageView的上层显示（ConstraintLayout中后写的视图会覆盖先写的），确保TabLayout和Toolbar不会被背景图挡住。
• 0dp是ConstraintLayout中实现“根据约束填充空间”的核心，一定要用它代替match_parent来实现自适应空间的需求。

内容的提问来源于stack exchange，提问作者Jack