【问题标题】:Hiding Toolbar smoothly on RecyclerView Scroll?在 RecyclerView Scroll 上平滑隐藏工具栏?
【发布时间】:2015-05-14 17:30:30
【问题描述】:

目前我有一个RecyclerView,其中包含一些项目列表。我正在听 RecyclerView 的Scroll listener,如果 RecyclerView 在某个时候说 500,它应该隐藏工具栏,并且当它超过 500+ 时应该保持隐藏。同样,当 i 达到

这是迄今为止我尝试过的代码。问题是,

  1. 它会隐藏工具栏,但在该点隐藏或显示时会闪烁。
  2. 如何实现工具栏的平滑隐藏?

    recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
    
    
            }
    
    
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
    
                scrollD = scrollD + dy;
                Log.d("key", "DY is .." + (dy + scrollD));
    
                if (scrollD >= 500) {
                  // code to hide
                }
    
                if (scrollD <= 450) {
    
    
                 // code to show
    
                }
            }
        });
    

【问题讨论】:

  • 你想要 FadeIn/FadeOut 效果还是只是 slideDown/SlideUp ?

标签: android android-toolbar onscrolllistener


【解决方案1】:

使用 CoordinatorLayout 代替线性/相对布局,并将以下属性添加到工具栏。

app:layout_scrollFlags="scroll|enterAlways"

CoordinatorLayout 通过在用户向下滚动时隐藏工具栏并在用户向上滚动时再次显示来处理工具栏的可见性。

代码:

<?xml version="1.0" encoding="utf-8"?>

<!-- $Id$ -->

<android.support.design.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">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

     <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways"  />

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

参考此链接:https://mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling(part3)/

【讨论】:

    【解决方案2】:

    我也在寻找相同的解决方案并找到了这个。 和我一起工作很好。

    隐藏工具栏

    mToolbar.animate().translationY(-mToolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();
    

    显示工具栏:

    mToolbar.animate().translationY(mToolbar.getTop()).setInterpolator(new AccelerateInterpolator()).start();
    

    在回收器视图的滚动监听器上调用这些行。

    现在,因为监听器为您提供了工具栏的 dx 和 dy 值。 所以在上面的代码行中,代替 mToolbar.getTop() 你可以写:

    int heightDelta += dy;
        bothToolbarLayouts.animate().translationY(-heightDelta).setInterpolator(new AccelerateInterpolator()).start();
    

    瞧,你完成了!

    或者为了更好地理解它,请关注this link

    【讨论】: