滚动至评论区时隐藏Love FAB、上滑恢复显示的实现方法咨询

嘿，这个交互需求挺实用的，我来给你拆解下具体实现方法，分两种最常见的布局场景来说，你可以根据自己的页面结构选对应的方案：

核心逻辑 #

我们需要监听页面的滚动行为，同时判断两个关键条件：

• 是否滚动到了评论区域的可视范围（或者说评论区已经占据屏幕）
• 滚动方向（向上/向下）
  然后结合这两个条件，控制FAB的显示或隐藏就好啦。

场景1：评论区是RecyclerView（最常见的评论列表） #

如果你的评论区是用RecyclerView做的列表，那可以这么搞：

1. 获取控件实例 #

先在你的Activity/Fragment里拿到Love FAB和评论区RecyclerView的引用：

// Kotlin示例
val loveFab = findViewById<FloatingActionButton>(R.id.love_fab)
val commentRecyclerView = findViewById<RecyclerView>(R.id.comment_recyclerview)

// Java示例
FloatingActionButton loveFab = findViewById(R.id.love_fab);
RecyclerView commentRecyclerView = findViewById(R.id.comment_recyclerview);

2. 添加滚动监听，判断滚动状态 #

给RecyclerView加个滚动监听器，在里面判断滚动方向和位置，然后控制FAB：

// Kotlin
var lastScrollY = 0
commentRecyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        // dy>0代表向下滚动，dy<0代表向上滚动
        val isScrollDown = dy > 0
        
        // 这里给你两种判断逻辑，选适合你的：
        // --- 逻辑1：简单版 ---
        // 只要向下滚动就隐藏FAB，向上滚动就显示
        if (isScrollDown && loveFab.isShown) {
            loveFab.hide()
        } else if (!isScrollDown && !loveFab.isShown) {
            loveFab.show()
        }
        
        // --- 逻辑2：精确版（必须滚动到评论区才隐藏）---
        // 先获取评论区在屏幕中的可见区域
        val rect = Rect()
        recyclerView.getGlobalVisibleRect(rect)
        // 当评论区顶部已经进入屏幕，且向下滚动时隐藏FAB
        if (rect.top <= 0 && isScrollDown && loveFab.isShown) {
            loveFab.hide()
        }
        // 向上滚动时显示FAB
        else if (!isScrollDown && !loveFab.isShown) {
            loveFab.show()
        }
        
        lastScrollY = recyclerView.computeVerticalScrollOffset()
    }
})

// Java
int lastScrollY = 0;
commentRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        boolean isScrollDown = dy > 0;
        
        // --- 逻辑1：简单版 ---
        if (isScrollDown && loveFab.isShown()) {
            loveFab.hide();
        } else if (!isScrollDown && !loveFab.isShown()) {
            loveFab.show();
        }
        
        // --- 逻辑2：精确版 ---
        Rect rect = new Rect();
        recyclerView.getGlobalVisibleRect(rect);
        if (rect.top <= 0 && isScrollDown && loveFab.isShown()) {
            loveFab.hide();
        } else if (!isScrollDown && !loveFab.isShown()) {
            loveFab.show();
        }
        
        lastScrollY = recyclerView.computeVerticalScrollOffset();
    }
});

场景2：页面用NestedScrollView包裹（评论区是非列表布局） #

如果你的页面是用NestedScrollView包含顶部内容和评论区（比如评论区是普通的线性布局），那监听NestedScrollView的滚动：

1. 获取控件实例 #

// Kotlin示例
val loveFab = findViewById<FloatingActionButton>(R.id.love_fab)
val nestedScrollView = findViewById<NestedScrollView>(R.id.nested_scroll_view)
val commentSection = findViewById<View>(R.id.comment_section) // 评论区的根布局

// Java示例
FloatingActionButton loveFab = findViewById(R.id.love_fab);
NestedScrollView nestedScrollView = findViewById(R.id.nested_scroll_view);
View commentSection = findViewById(R.id.comment_section);

2. 监听滚动并判断位置 #

// Kotlin
var lastScrollY = 0
nestedScrollView.setOnScrollChangeListener(NestedScrollView.OnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->
    val isScrollDown = scrollY > oldScrollY
    
    // 获取评论区在整个页面的顶部坐标
    val commentTop = commentSection.top
    
    // 当滚动到评论区位置且向下滚动时，隐藏FAB
    if (scrollY >= commentTop && isScrollDown && loveFab.isShown) {
        loveFab.hide()
    }
    // 向上滚动回到评论区上方时，显示FAB
    else if (!isScrollDown && scrollY < commentTop && !loveFab.isShown) {
        loveFab.show()
    }
    
    lastScrollY = scrollY
})

// Java
int lastScrollY = 0;
nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
    @Override
    public void onScrollChange(@NonNull NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
        boolean isScrollDown = scrollY > oldScrollY;
        
        int commentTop = commentSection.getTop();
        
        if (scrollY >= commentTop && isScrollDown && loveFab.isShown()) {
            loveFab.hide();
        } else if (!isScrollDown && scrollY < commentTop && !loveFab.isShown()) {
            loveFab.show();
        }
        
        lastScrollY = scrollY;
    }
});

额外优化小技巧 #

• FAB自带的hide()和show()方法已经有默认的淡入淡出动画，如果你想自定义动画，可以用AnimatorSet来实现更流畅的过渡
• 测试的时候记得多换几种屏幕尺寸，确保判断条件在不同设备上都能正常触发
• 如果页面有其他滚动控件，记得统一处理滚动监听，避免出现冲突

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