让 Toolbar 随着 RecyclerView 的滚动而显示/隐藏

在这篇文章中，我们将看到如何实现像Google+ 应用程序一样，当列表下滑时，Toolbar和FAB（包括其他的View）隐藏；当列表上滑时，Toolbar和FAB（包括其他的View）显示的效果；这种效果在Material Design Checklist提到过.

“在一些场景下，当屏幕向上滚动时，app bar将会从屏幕上移除，留出更多的空间供内容。相反，当向上滚动时，app bar应再次显示。

我们的目标效果如下图所示：

我们将使用RecyclerView为我们的List，当然，你也可以选择其他滚动控件（例如ListView，但它就意味着更多的编码。现在，我有两种具体的实现方法：

1. 给List设置padding
2. 给List添加一个headr

我只是决定执行第二个方案，因为我发现在如何给RecyclerView添加header这一问题上，有很多需要注意的地方，这是一个很好的机会去解决他们。
我也将简要描述第一个。

###我们开始吧

我们要创建一个工程，并添加如下依赖：

现在我们应该定义style.xml，我们的应用程序将使用Material的主题,但我们不使用ActionBar（取而代之是Toolbar）：

接下来是创建Activity的布局：

这是一个简单的布局，只有RecyclerView、Toolbar以及作为FAB的ImageButton。我们需要把它们放在一个FrameLayout，因为这样可以达到Toolbar覆盖RecyclerView的效果。如果我们不这样做，当我们隐藏Toolbar的时候在列表的上方将会有一个空白的空间。

让我们来看看MainActiviy的代码吧：

正如你所看到的，这是一个十分简单的类，它只实现onCreate()方法，做了以下事情：

1. 初始化 Toolbar
2. 获取FAB
3. 初始化 RecyclerView

现在我们将为RecylerView创建adapter。在这之前，我们需要添加list item的布局：

对应的ViewHolder如下:

我们的列表用于呈现带有文本的卡片 - 简单吧！

现在，我们看一下RecyclerAdapter的代码：

这个是RecyclerView.Adapter的基本实现。并没有什么特殊的东西。如果，你想深入了解 RecyclerView,我建议你好好的阅读一下Mark Allison的文章

我们写好以上代码，运行一下！截图如下：

等一下，那是什么？你注意到没有？Toolbar把我们的列表挡住了。那是因为我们在activity_main.xml中设置FrameLayout为根布局。在开始的时候，我们提到过，这里有两种解决方案。第一张就是给RecyclerView设置paddingTop，其高度和Toolbar保持一致。但是还有一些细节需要注意，因为默认情况下，控件的绘制区域是在padding里面的，所以我们需要将其关闭，具体代码如下:

<android.support.v7.widget.recyclerview
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingtop="?attr/actionBarSize"
    android:cliptopadding="false"
</android.support.v7.widget.recyclerview>

这样做，可以达到效果。但是，我想告诉你另一种实现方式-也许有点复杂，涉及增加了头的列表。

###为RecyclerView添加Header

首先，我们需要对Adapter做一些更改：

代码的具体思路如下：

1. 我们需要为Recycler展示的不同的Item定义不同的Item Type。RecyclerView是一个非常灵活的组件。当您希望为您的列表项目有不同的布局时，可以使用Item Type。而这正是我们想要做的，我们的第一个Item将是一个标题视图，不同于其他的项目(lines 3-4).
2. 我们需要告诉Recycler，返回哪个类型用于显示(lines 49-54).
3. 我们需要修改onCreateViewHolder和onBindViewHolder方法，根据type的不同TYPE_ITEM或者TYPE_HEAD，返回相应的item(lines 14-34).
4. 我们需要修改 getItemCount() - 返回的总数为数据集总数 + 1，因为我们还有一个Header（line 43-45）。现在，我们创建一个布局，并为其添加一个ViewHolder。

布局很简单。重要的是要注意的是，它的高度需要是等于Toolbar的高度。这是viewholder，也很简单：

public class RecyclerHeaderViewHolder extends RecyclerView.ViewHolder {
  public RecyclerHeaderViewHolder(View itemView) {
      super(itemView);
  }
}

好了，我们完成了！截图如上：

好多了，对吗？所以，综上所述，我们需要为RecyclerView增加了一个Header。它和Toolbar高度相同，它是一个空视图。toolbar刚好将其挡住，而其他的视图可以恰当好处的显示。接下来我们可以实现列表滚动时显示/隐藏视图。

###在列表滚动的时候显示/隐藏View

为了实现这个效果，我们将为RecyclerView创建一个类onscrolllistener。

public abstract class HidingScrollListener extends RecyclerView.OnScrollListener {
  private static final int HIDE_THRESHOLD = 20;
  private int scrolledDistance = 0;
  private boolean controlsVisible = true;

  @Override
  public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
        onHide();
        controlsVisible = false;
        scrolledDistance = 0;
    } else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
        onShow();
        controlsVisible = true;
        scrolledDistance = 0;
    }
    if((controlsVisible && dy>0) || (!controlsVisible && dy<0)) {
        scrolledDistance += dy;
    }
  }

  public abstract void onHide();
  public abstract void onShow();

}

真正起到作用的方法就是你现在看到的方法onscrolled()方法。它的参数——dx，dy是水平和垂直滚动的量。其实他们是每次滑动的变化量，是两个前后事件的差，不是总滚动距离。

基本的实现思路如下：

• 我们计算总的滚动距离（每一次滚动的总和）。但是，我们只关心View隐藏时的向上滑动或者View显示时的向下滑动，因为这些是我们所关心的场景。

  if((controlsVisible && dy>0) || (!controlsVisible && dy<0)) {

  scrolledDistance += dy;
  

  }

• 如果当滚动值超过某个阈值（你可以设置的值越大，需要滚动滚动更多的距离，才能看到显示/隐藏View的效果）。我们根据滚动的方向来显示/隐藏View（DY＞0意味着我们向下滚动，Dy＜0意味着我们滚动起来）。

  if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {

  onHide();
  controlsVisible = false;
  scrolledDistance = 0;
  

  } else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {

  onShow();
  controlsVisible = true;
  scrolledDistance = 0;
  

  }

• 事实上，我们不可能在Scroll Listener中显示/隐藏View，更为靠谱的做法是，将其抽象出来，调用show()/hide()方法，所以我们需要在回调中实现它们。

现在，我们需要给RecyclerView设置listener:

private void initRecyclerView() {
  RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
  recyclerView.setLayoutManager(new LinearLayoutManager(this));
  RecyclerAdapter recyclerAdapter = new RecyclerAdapter(createItemList());
  recyclerView.setAdapter(recyclerAdapter);
  //setting up our OnScrollListener
  recyclerView.setOnScrollListener(new HidingScrollListener() {
@Override
public void onHide() {
  hideViews();
}
@Override
public void onShow() {
  showViews();
}
  });
}

添加下面的方法，可以以动画的形式隐藏或显示View：

private void hideViews() {
  mToolbar.animate().translationY(-mToolbar.getHeight()).setInterpolator(new AccelerateInterpolator(2));

  FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) mFabButton.getLayoutParams();
  int fabBottomMargin = lp.bottomMargin;
  mFabButton.animate().translationY(mFabButton.getHeight()+fabBottomMargin).setInterpolator(new AccelerateInterpolator(2)).start();
}

private void showViews() {
  mToolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2));
  mFabButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();
}

我们必须把margin作为隐藏Toolbar的参数，否则就不能完全隐藏Fab。

是时候看一下我们的应用程序的效果了！滚动屏幕截图

它看起来挺不错的，但是有一些小细节需要调整 - 如果你处于列表的顶部，而滑动隐藏的阈值设置的很小，那么即使在列表为空的情况下，你也可以隐藏ToolBar.幸运的是，这个问题很容易解决。我们需要做的是检测列表的第一项是否是可见的，从而根据实际情况调整ToolBar的显示/隐藏。

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
  super.onScrolled(recyclerView, dx, dy);

  int firstVisibleItem = ((LinearLayoutManager) recyclerView.getLayoutManager()).findFirstVisibleItemPosition();
  //show views if first item is first visible position and views are hidden
  if (firstVisibleItem == 0) {
if(!controlsVisible) {
  onShow();
  controlsVisible = true;
}
  } else {
if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
  onHide();
  controlsVisible = false;
  scrolledDistance = 0;
} else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
  onShow();
  controlsVisible = true;
  scrolledDistance = 0;
}
  }

  if((controlsVisible && dy>0) || (!controlsVisible && dy<0)) {
scrolledDistance += dy;
  }
}

更改以后，当第一项是可见的时候，Header不会消失。接着向下滑的时候，其他的效果还是和之前的一样再次运行我们的项目，实际效果如下：

Yup! 现在看上去很不错哦！

这是我第一次写的博客，所以可能存在着一些错误，以后我会有所提高的。

And if you don’t want to use the method with adding a header, you can still use the second one with adding padding to the RecyclerView. Just add the padding and use HidingScrollListenerthat we’ve just created and it will work :)

如果你不想添加Head的方法，你仍然可以使用第二个加垫的recyclerview。只要加入我们刚刚创建的，它将填充和使用hidingscrolllistener：）

在下一个部分，我将告诉你如何做出像Google Play一样的效果。

如果你有什么疑问，你可以在下面的评论区评论。