Android如何实现ScrollView滚动内容覆盖顶部固定ImageView

当前布局滚动时表单被顶部图片遮挡，核心是ScrollView默认开启了android:clipToPadding="true"属性，你给ScrollView设置的200dp顶部padding区域会被系统强制裁剪，表单内容无法滚动进入该区域，视觉上就呈现为被图片遮挡的效果。另外RelativeLayout布局中后写入XML的子View层级更高，你的ScrollView本身就在图片所在FrameLayout的上层，不需要额外调整Z序。

只需要修改现有XML的ScrollView节点属性，不需要更换根布局、不需要额外写Java/Kotlin滚动监听代码，即可实现滚动覆盖效果：

• 给ScrollView添加android:clipToPadding="false"属性，关闭padding区域裁剪，允许表单内容滚动进入顶部200dp的图片区域
• 给ScrollView添加android:background="@android:color/transparent"属性，保证初始未滚动状态下，顶部padding区域可以正常透出下层的图片，不会被ScrollView本身的背景挡住
• 原有android:paddingTop="200dp"属性保留，用来给初始状态的顶部图片预留显示空间

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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:id="@+id/nestedScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/light_grey"
    tools:context=".fragments.FFSFragment">
    <!-- 顶部固定图片，层级在ScrollView下方 -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@drawable/sea_bg">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"/>
    </FrameLayout>
    <ScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="200dp"
        android:clipToPadding="false"
        android:background="@android:color/transparent"
        android:scrollbars="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="@drawable/rectangle_corners_layout">

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/menu_ffs"
                android:textSize="25sp"
                android:textColor="@android:color/black"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"/>
            <TextView
                android:id="@+id/text_cb"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/fill_form"
                android:textSize="16sp"
                android:textColor="@android:color/black"
                android:layout_marginLeft="20dp"
                android:layout_marginBottom="30dp"/>
            <EditText
                android:id="@+id/et_origin"
                style="@style/AppTheme.EditTexts"
                android:hint="@string/enter_origin"
                android:background="@drawable/rectangle_corners"/>
            <EditText
                android:id="@+id/et_destination"
                style="@style/AppTheme.EditTexts"
                android:hint="@string/enter_destination"
                android:background="@drawable/rectangle_corners"/>
            <EditText
                android:id="@+id/et_commodity"
                style="@style/AppTheme.EditTexts"
                android:hint="@string/enter_commodity"
                android:background="@drawable/rectangle_corners"/>
            <EditText
                android:id="@+id/et_weight"
                style="@style/AppTheme.EditTexts"
                android:hint="@string/enter_weight"
                android:inputType="number"
                android:background="@drawable/rectangle_corners"/>
            <EditText
                android:id="@+id/et_boxes"
                style="@style/AppTheme.EditTexts"
                android:hint="@string/enter_boxes"
                android:inputType="number"
                android:background="@drawable/rectangle_corners"/>
            <EditText
                android:id="@+id/et_boxe_size"
                style="@style/AppTheme.EditTexts"
                android:hint="@string/enter_boxsize"
                android:background="@drawable/rectangle_corners"/>
            <Button
                android:id="@+id/choose_images_btn"
                style="@style/AppTheme.RoundButtons"
                android:text="@string/choose_images"/>
            <Button
                android:id="@+id/submit_btn"
                style="@style/AppTheme.RoundButtons"
                android:layout_marginBottom="20dp"
                android:text="@string/submit"/>
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

修改完成后，初始状态下顶部200dp图片正常显示，表单从图片下方开始呈现；向上滚动表单时，带圆角背景的表单内容会平滑滚动到顶部区域，直接覆盖在图片上层，完全符合需求。

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