如何在RecyclerView上下添加内容并实现顶部用户信息滚动隐藏效果？

嘿，这个Instagram风格的滚动效果我之前也做过，ScrollView确实搞不定这种联动的滚动隐藏/显示，给你两种靠谱的实现方案，推荐用第一种官方组件的方法，省心又好用：

这个方案利用Android官方的CoordinatorLayout、AppBarLayout和CollapsingToolbarLayout来实现，和Instagram的原生效果几乎一致，而且动画流畅、兼容性好。

布局代码示例 #

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 顶部可折叠的用户信息栏 -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 这里放你的用户信息布局：头像、用户名、状态等 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="16dp"
                app:layout_collapseMode="parallax">

                <ImageView
                    android:id="@+id/iv_avatar"
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:src="@drawable/ic_avatar"
                    android:layout_gravity="center_horizontal"/>

                <TextView
                    android:id="@+id/tv_username"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="你的用户名"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    android:gravity="center_horizontal"
                    android:layout_marginTop="8dp"/>

                <TextView
                    android:id="@+id/tv_status"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="这是我的个人状态签名"
                    android:textSize="14sp"
                    android:gravity="center_horizontal"
                    android:layout_marginTop="4dp"/>

                <!-- 可以添加关注数、粉丝数等其他用户信息控件 -->
            </LinearLayout>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <!-- 帖子列表RecyclerView -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_posts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

关键属性解释 #

• app:layout_scrollFlags="scroll|exitUntilCollapsed"：控制顶部用户信息栏的滚动行为，scroll表示随滚动向上移动，exitUntilCollapsed表示滚动到完全隐藏后停止。
• app:layout_collapseMode="parallax"：给用户信息添加视差滚动效果，让隐藏/显示的动画更自然，和Instagram的风格一致。
• app:layout_behavior="@string/appbar_scrolling_view_behavior"：让RecyclerView的滚动事件通知给AppBarLayout，触发折叠/展开逻辑。

依赖要求 #

确保你的项目依赖了Material Design组件，在build.gradle（Module级别）中添加：

implementation 'com.google.android.material:material:1.9.0' // 可以使用最新稳定版本

如果不想依赖Material组件，也可以通过监听RecyclerView的滚动事件，动态改变用户信息布局的位置来实现效果。

布局代码示例 #

先把用户信息和RecyclerView放在一个垂直的LinearLayout中：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 用户信息布局 -->
    <LinearLayout
        android:id="@+id/user_info_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp"
        android:background="@android:color/white">

        <!-- 头像、用户名、状态等控件，和方案一一致 -->
    </LinearLayout>

    <!-- 帖子列表RecyclerView -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_posts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

滚动监听代码 #

在Activity/Fragment中添加RecyclerView的滚动监听：

// 初始化控件
LinearLayout userInfoLayout = findViewById(R.id.user_info_layout);
RecyclerView rvPosts = findViewById(R.id.rv_posts);

int userInfoHeight = 0;
// 等布局渲染完成后获取用户信息栏的高度
userInfoLayout.post(() -> {
    userInfoHeight = userInfoLayout.getHeight();
});

// 添加滚动监听
rvPosts.addOnScrollListener(new RecyclerView.OnScrollListener() {
    int scrollDistance = 0;
    boolean isUserInfoVisible = true;

    @Override
    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        if (userInfoHeight == 0) return;

        // 累计垂直滚动距离
        scrollDistance += dy;

        // 向上滚动超过用户信息高度，隐藏它
        if (scrollDistance > userInfoHeight && isUserInfoVisible) {
            userInfoLayout.animate()
                    .translationY(-userInfoHeight)
                    .setDuration(200)
                    .start();
            isUserInfoVisible = false;
            scrollDistance = userInfoHeight; // 重置避免重复触发
        }
        // 向下滚动到顶部区域，显示用户信息
        else if (scrollDistance < 0 && !isUserInfoVisible) {
            userInfoLayout.animate()
                    .translationY(0)
                    .setDuration(200)
                    .start();
            isUserInfoVisible = true;
            scrollDistance = 0;
        }
    }
});

注意事项 #

• 这个方法需要自己处理滚动边界的逻辑，比如快速滚动时的动画连贯性。
• 如果RecyclerView有下拉刷新功能，需要额外处理刷新时用户信息的显示状态。

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