在RecyclerView列表滚动的时候显示或者隐藏Toolbar

先看一下效果：

本文将讲解如何实现类似于Google+应用中，当列表滚动的时候，ToolBar（以及悬浮操作按钮）的显示与隐藏(向下滚动隐藏，向上滚动显示)，这种效果在Material Design 清单中有提到：

“在合适的地方，当列表向下滚动，app bar可以退出屏幕，以便为内容区域留下更多的空间；而当列表向上滚动回来的时候，app bar又重新显示出来”。

注：这里的向下滚动是指滚动到下面查看更多内容，相对应的手势操作其实是往上。同理向上滚动是指查看前面的内容，而手势其实是向下。

虽然此文我们将使用RecyclerView作为列表，但是这种实现方式适用于任何可以滚动的容器（某些情况下也许要稍微多做点工作，比如listview）。我想到了两种实现的方式：

1. 在列表的上面加个padding。

2. 为列表加个header。

我打算只写出第二种实现方式，因为有很多人询问关于如何给RecyclerView加上header的问题，因此借着这个机会就一起讲了。但是我也会非常简单的描述一下第一种实现方法。

开始

首先添加必要的库

 dependencies {
     compile fileTree(include: ['*.jar'], dir: 'libs')
     androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
         exclude group: 'com.android.support', module: 'support-annotations'
     })
     compile 'com.android.support:appcompat-v7:25.3.1'
     compile 'com.android.support.constraint:constraint-layout:1.0.2'
     testCompile 'junit:junit:4.12'
     compile 'com.android.support:design:26.0.0-alpha1'
     compile 'com.android.support:cardview-v7:26.0.0-alpha1'
     compile 'com.jakewharton:butterknife:8.7.0'
     compile 'com.jakewharton:butterknife-compiler:8.7.0'
     compile 'de.greenrobot:eventbus:3.0.0-beta1'
 }

创建activity的布局：

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

     <android.support.v7.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
         android:background="@color/colorPrimaryDark"
         tools:layout_editor_absoluteX="8dp"
         tools:layout_editor_absoluteY="0dp" />

     <android.support.v7.widget.RecyclerView
         android:id="@+id/rv_content"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

 </LinearLayout>

下面转向MainActivity的代码：

 package recycler.huolongluo.hideonscrollexample;

 import android.os.Bundle;
 import android.support.v7.app.AppCompatActivity;
 import android.support.v7.widget.LinearLayoutManager;
 import android.support.v7.widget.RecyclerView;
 import android.support.v7.widget.Toolbar;
 import android.util.Log;
 import android.view.View;
 import android.view.animation.AccelerateInterpolator;
 import android.view.animation.DecelerateInterpolator;

 import java.util.ArrayList;
 import java.util.List;

 import butterknife.BindView;
 import butterknife.ButterKnife;

 public class MainActivity extends AppCompatActivity {
     private static final String TAG = "MainActivity";

     @BindView(R.id.toolbar)
     Toolbar toolbar;
     @BindView(R.id.rv_content)
     RecyclerView rv_content;

     private List<String> datas;
     private MyAdapter myAdapter;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         ButterKnife.bind(this);
         initData();
         initView();
     }

     private void initView() {
         myAdapter = new MyAdapter(this, datas);
         rv_content.setLayoutManager(new LinearLayoutManager(this));
         rv_content.setAdapter(myAdapter);

         /**
          * 实现RecyclerView上下滑动的显示和隐藏
          * */
         rv_content.addOnScrollListener(new 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);
                 Log.e(TAG, "onScrolled dy: " + dy);
                 Log.e(TAG, "onScrolled dx: " + dx);
                 Log.e(TAG, "-------------------- onScrolled: --------------------");
                 if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
                     // TODO: 2017/7/16 0016 隐藏toolbar
                     hideViews();
 //                    toolbar.setVisibility(View.GONE);
                     controlsVisible = false;
                     scrolledDistance = 0;
                 } else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
                     // TODO: 2017/7/16 0016 显示toolbar
                     showViews();
 //                    toolbar.setVisibility(View.VISIBLE);
                     controlsVisible = true;
                     scrolledDistance = 0;
                 }
                 if ((controlsVisible && dy > 0) || (!controlsVisible && dy < 0)) {
                     scrolledDistance += dy;
                 }
             }
         });
     }

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

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

     private void initData() {
         if (datas == null) {
             datas = new ArrayList<>();
         }
         for (int i = 0; i < 20; i++) {
             datas.add("Item " + i);
         }
     }
 }

如你所见，这是一个很小的类，只实现了onCreate，做了如下几件事情：

1.初始化Toolbar

2.初始化数据源

3.初始化RecyclerView

现在来看下适配器Adapter的写法，适配器前，我先把需要用到的两个不同布局的item画出来了。一个item作为RecyclerView的头部，一个item作为RecyclerView的内容。

item_head.xml：

 <?xml version="1.0" encoding="utf-8"?>
 <View xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/view_head"
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:orientation="vertical" />

item_content.xml：

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v7.widget.CardView 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="wrap_content"
     android:layout_gravity="center"
     android:layout_margin="20dp"
     android:orientation="vertical"
     app:cardCornerRadius="10dp">

     <TextView
         android:id="@+id/tv_title"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:padding="20dp"
         android:text="Item "
         android:textSize="20sp" />

 </android.support.v7.widget.CardView>

布局很简单，只需注意其高度要和Toolbar一致。

接下来我们看适配器MyAdapter.java：

 package recycler.huolongluo.hideonscrollexample;

 import android.content.Context;
 import android.support.v7.widget.RecyclerView;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.TextView;

 import java.util.List;

 /**
  * Created by Administrator on 2017/7/16 0016.
  */

 class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

     private Context context;
     private List<String> datas;
     private LayoutInflater inflater;

     public MyAdapter(Context context, List<String> datas) {
         this.context = context;
         this.datas = datas;
         inflater = LayoutInflater.from(context);
     }

     @Override
     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
         if (viewType == 0) {
             return new ViewHolderHead(inflater.inflate(R.layout.item_head, parent, false));
         } else {
             return new ViewHolderContent(inflater.inflate(R.layout.item_content, parent, false));
         }
     }

     @Override
     public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
         if (holder instanceof ViewHolderContent) {
             ((ViewHolderContent) holder).tv_title.setText(datas.get(position - 1));
         }
     }

     @Override
     public int getItemCount() {
         return datas.size() + 1;
     }

     @Override
     public int getItemViewType(int position) {
         if (position == 0) {
             return 0;
         } else {
             return 1;
         }
     }

     public class ViewHolderContent extends RecyclerView.ViewHolder {
         private TextView tv_title;

         public ViewHolderContent(View itemView) {
             super(itemView);
             tv_title = (TextView) itemView.findViewById(R.id.tv_title);
         }
     }

     public class ViewHolderHead extends RecyclerView.ViewHolder {
         private View view_head;

         public ViewHolderHead(View itemView) {
             super(itemView);
             view_head = (View) itemView.findViewById(R.id.view_head);
         }
     }
 }

到这里就已经全部写完了，

下面是关于上面代码的解释:

1.需要定义Recycler显示的item的类型。RecyclerView是一个非常灵活的控件，当某些item的布局和其他item有区别的时候，我们一般要用到item类型。这也正是我们这里需要的-第一个item是header，不同于其他item。

2.我们需要告诉Recycler，item想要显示的类型。getItemViewType方法将根据position返回一个item的类型（int类型，具体值由你根据项目需求自己定义）。

3.需要修改onCreateViewHolder()和onBindViewHolder()方法,在item类型为非0的时候绑定或者返回一个普通item，在item类型为0的时候返回或绑定一个header item。

4.需要修改getItemCount()-在原有的基数上+1因为多了个header

正如你所看到的，所有关键代码都在一个onScrolled()方法中。其dx, dy参数分别是横向和纵向的滚动距离，准确是的是两个滚动事件之间的偏移量，而不是总的滚动距离。

基本的思路如下：

1.计算出滚动的总距离（deltas相加），但是只在Toolbar隐藏且上滚或者Toolbar未隐藏且下滚的时候，因为我们只关心这两种情况。

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

2.如果总的滚动距离超多了一定值（这个值取决于你自己的设定，越大，需要滑动的距离越长才能显示或者隐藏），我们就根据其方向显示或者隐藏Toolbar（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;
 }

最后，toolbar的显示和隐藏是通过动画来控制的，一句搞定。

基本上是正确的，但是还有点bug-如果你的滑动距离的触发值太小，在隐藏Toolbar的时候会在列表的顶部留下一段空白区域（最开始，随着滚动空白区域会消失），幸好解决起来也很简单。只需检测第一个item是否可见，只有当不可见的时候才执行上面的逻辑。

于是，在重写的addOnScrollListener方法里面，最新的代码是这样的：

 /**
          * 实现RecyclerView上下滑动的显示和隐藏
          * */
         rv_content.addOnScrollListener(new RecyclerView.OnScrollListener() {
             private static final int HIDE_THRESHOLD = 20;
             private int scrolledDistance = 0;
             private boolean controlsVisible = true;

             int firstVisibleItem = ((LinearLayoutManager) rv_content.getLayoutManager()).findFirstVisibleItemPosition();

             @Override
             public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                 super.onScrolled(recyclerView, dx, dy);
                 Log.e(TAG, "onScrolled dy: " + dy);
                 Log.e(TAG, "onScrolled dx: " + dx);
                 Log.e(TAG, "-------------------- onScrolled: --------------------");
                 if (firstVisibleItem == 0) {
                     if (!controlsVisible) {
                         showViews();
                         controlsVisible = true;
                     }
                 } else {
                     if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
                         // TODO: 2017/7/16 0016 隐藏toolbar
                         hideViews();
 //                    toolbar.setVisibility(View.GONE);
                         controlsVisible = false;
                         scrolledDistance = 0;
                     } else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
                         // TODO: 2017/7/16 0016 显示toolbar
                         showViews();
 //                    toolbar.setVisibility(View.VISIBLE);
                         controlsVisible = true;
                         scrolledDistance = 0;
                     }
                 }
                 if ((controlsVisible && dy > 0) || (!controlsVisible && dy < 0)) {
                     scrolledDistance += dy;
                 }
             }
         });