Android天气应用新增Toolbar遮挡EditText等布局元素问题求解

问题原因 #

你遇到的遮挡问题有两个核心诱因：

1. 你的EditText、ImageView、TextView以及FragmentContainerView的顶部约束都绑定到了父布局顶部，和Toolbar的顶部约束完全重合，两者处于同一垂直位置自然会重叠。
2. Toolbar设置了elevation="4dp"的海拔属性，Android系统中海拔更高的控件会优先渲染在上层，就算你把其他控件的代码写在Toolbar后面，只要海拔低于4dp，依然会被Toolbar遮挡。

修复方案 #

可以根据你的实际需求二选一：

方案1：将搜索相关控件放到Toolbar内部（推荐，符合Material Design规范）

Toolbar本身是支持嵌套子控件的ViewGroup，直接把搜索框、搜索按钮放到Toolbar内部就不会出现遮挡问题，修改代码如下：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_constraintTop_toTopOf="parent"
    app:popuptheme="@style/ThemeOverlay.AppCompat.Light">

    <!-- 把原来的EditText和ImageView移到此处 -->
    <EditText
        android:id="@+id/textfield"
        android:layout_width="250dp"
        android:layout_height="35dp"
        android:autofillHints="@string/change_city"
        android:background="@color/colorPrimary"
        android:hint="@string/search_city"
        android:inputType="text"
        android:labelFor="@id/imageView4"
        android:padding="8dp"
        android:textColor="@color/colorAccent"
        android:textSize="16sp"
        android:layout_gravity="end"/>

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="50dp"
        android:layout_height="35dp"
        android:layout_marginEnd="1dp"
        android:contentDescription="@string/searchbtn"
        android:src="@drawable/look"
        android:layout_gravity="end"/>

</androidx.appcompat.widget.Toolbar>

同时删除原来写在ConstraintLayout里的EditText、ImageView，再把TextView的顶部约束改成app:layout_constraintTop_toBottomOf="@+id/toolbar"，给FragmentContainerView也加上顶部约束app:layout_constraintTop_toBottomOf="@+id/toolbar"，避免Fragment内容被Toolbar遮挡。

方案2：调整控件海拔实现层级优先级

如果你不想调整原有布局结构，只需要给被遮挡的控件加上android:elevation="5dp"属性，海拔高于Toolbar的4dp就会显示在Toolbar上层：

<EditText
    android:id="@+id/textfield"
    android:layout_width="250dp"
    android:layout_height="35dp"
    android:elevation="5dp"
    ... 其他原有属性保持不变 />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="50dp"
    android:layout_height="35dp"
    android:elevation="5dp"
    ... 其他原有属性保持不变 />

该方案仅能临时解决显示问题，不符合常规布局逻辑，更推荐使用方案1。

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