吸顶布局妙招：Android下NestedScrollView嵌套RecyclerView吸顶效果

2023-12-08 09:47:33

巧用 Sticky 效果，在 Android 中打造吸顶布局：NestedScrollView 嵌套 RecyclerView

什么是 Sticky 效果？

Sticky 效果是一种滚动监听机制，当滚动控件（如 ScrollView 或 RecyclerView）发生滚动时，它可以让特定元素始终位于屏幕顶部，即使滚动控件的内容被滚动隐藏。这在提升用户体验方面非常有用，因为它允许用户轻松访问重要的信息或导航元素。

在 NestedScrollView 中使用 Sticky 效果

NestedScrollView 是一个支持嵌套其他滚动控件的 Android 控件。在 NestedScrollView 中嵌套 RecyclerView 是实现双向滚动（上下和左右）的常见场景。通过将 RecyclerView 嵌套在 NestedScrollView 中并使用 Sticky 效果，我们可以创建一个布局，其中 RecyclerView 的头部视图始终固定在屏幕顶部。

如何实现 Sticky 效果

在 NestedScrollView 中嵌套 RecyclerView 时实现 Sticky 效果的步骤如下：

创建头部视图： 为 RecyclerView 创建一个自定义头部视图，该视图包含要吸顶的元素。
添加头部视图： 将自定义头部视图添加到 RecyclerView。
监听滚动事件： 在 NestedScrollView 的 onScroll() 方法中监听滚动事件。
调整头部视图高度： 根据 NestedScrollView 的滚动位置动态调整头部视图的高度，使它保持在屏幕顶部。

代码示例

public class StickyHeaderActivity extends AppCompatActivity {

    private NestedScrollView nestedScrollView;
    private RecyclerView recyclerView;
    private View headerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sticky_header);

        nestedScrollView = findViewById(R.id.nested_scroll_view);
        recyclerView = findViewById(R.id.recycler_view);
        headerView = findViewById(R.id.header_view);

        // 监听 NestedScrollView 滚动事件
        nestedScrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                // 获取头部视图高度
                int headerViewHeight = headerView.getHeight();

                // 滚动距离大于头部视图高度时吸顶
                if (scrollY > headerViewHeight) {
                    headerView.setTranslationY(0);
                } else {
                    // 滚动距离小于头部视图高度时还原
                    headerView.setTranslationY(-(headerViewHeight - scrollY));
                }
            }
        });
    }
}