滚动CardView内的RecyclerView时隐藏上方ImageView图片并保留浅蓝色背景

我帮你整理了两种可行的方案来实现你要的效果，分别是官方推荐的协调布局方案和自定义滚动监听方案，你可以根据项目需求选择：

方案一：用CoordinatorLayout + AppBarLayout（推荐） #

这是Android官方提供的滚动协调方案，能优雅实现滚动时的视图变化，而且效果流畅。核心思路是把固定的浅蓝色背景和可滚动隐藏的图片拆分到不同层级：

修改后的布局代码 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    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="match_parent"
    android:transitionName="itemMainTransition"
    tools:context=".activity.WeatherActivity">

    <!-- 顶部固定背景区域：浅蓝色背景会一直保留 -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#42a4ce">

        <!-- 控制图片滚动收起的容器 -->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 仅保留需要隐藏的图片，背景设为透明 -->
            <ImageView
                android:id="@+id/meteoTrentinoBanner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:src="@drawable/logo_meteotn"
                app:layout_collapseMode="parallax"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <!-- 可滚动的内容卡片：会跟随AppBar滚动自动上移 -->
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <!-- 保留你原来的顶部控制栏 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:background="@drawable/weather_border"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/backDay"
                    android:layout_width="70dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_vertical"
                    android:src="@drawable/ic_back"/>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/textViewMinTemp"
                        android:layout_width="40dp"
                        android:layout_height="match_parent"
                        android:gravity="center_vertical|center_horizontal"
                        android:textAlignment="center"
                        android:textColor="#0000FF"
                        android:textSize="19sp"
                        android:textStyle="bold"/>

                    <TextView
                        android:id="@+id/textViewDay"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center_vertical"
                        android:text="@string/oggi"
                        android:textAlignment="center"
                        android:textSize="25sp"
                        android:textStyle="bold"
                        tools:ignore="NestedWeights"/>

                    <TextView
                        android:id="@+id/textViewMaxTemp"
                        android:layout_width="40dp"
                        android:layout_height="match_parent"
                        android:gravity="center_vertical|center_horizontal"
                        android:textAlignment="center"
                        android:textColor="#FF0000"
                        android:textSize="19sp"
                        android:textStyle="bold"/>
                </LinearLayout>

                <ImageView
                    android:id="@+id/forwardDay"
                    android:layout_width="70dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_vertical"
                    android:src="@drawable/ic_forward"/>
            </LinearLayout>

            <!-- 保留你原来的天气信息栏 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:background="@drawable/weather_border"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/meteoInfo"
                    android:layout_width="40dp"
                    android:layout_height="match_parent"
                    android:src="@drawable/ic_info"/>

                <TextView
                    android:id="@+id/textViewWeather"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:ellipsize="marquee"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:gravity="center_vertical"
                    android:marqueeRepeatLimit="marquee_forever"
                    android:scrollHorizontally="true"
                    android:singleLine="true"
                    android:textSize="23sp"/>
            </LinearLayout>

            <!-- 修改RecyclerView高度为match_parent，确保能触发滚动行为 -->
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerViewMeteo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </LinearLayout>
    </androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

关键说明 #

• AppBarLayout的背景设为浅蓝色，滚动时会一直固定在顶部
• CollapsingToolbarLayout的scroll|exitUntilCollapsed属性表示：向上滚动时收起内部视图，直到完全隐藏图片
• 给CardView设置app:layout_behavior，让它能自动跟随AppBar的滚动调整位置，避免被遮挡
• 需要确保项目依赖了Material Components库，在build.gradle中添加：

  implementation 'com.google.android.material:material:1.9.0' // 版本可根据项目调整
  

方案二：自定义RecyclerView滚动监听 #

如果不想修改布局结构，可以通过代码监听RecyclerView的滚动，动态控制图片的显示/隐藏：

代码示例 #

RecyclerView recyclerView = findViewById(R.id.recyclerViewMeteo);
ImageView banner = findViewById(R.id.meteoTrentinoBanner);

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        // dy为正数表示向上滚动，获取当前滚动偏移量
        int scrollY = recyclerView.computeVerticalScrollOffset();
        // 以图片高度为阈值，滚动超过阈值后隐藏图片
        int threshold = banner.getHeight();

        // 渐变隐藏效果：从完全显示到完全透明
        float alpha = Math.max(0f, 1f - (float) scrollY / threshold);
        banner.setImageAlpha((int) (alpha * 255));

        // 也可以直接切换图片显示/隐藏：
        // if (scrollY >= threshold) {
        //     banner.setImageDrawable(null);
        // } else {
        //     banner.setImageResource(R.drawable.logo_meteotn);
        // }
    }
});

优缺点 #

• 优点：无需修改布局，适合简单场景
• 缺点：需要自己处理滚动逻辑，效果不如官方协调布局流畅，嵌套滚动场景下可能出现异常

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