Android上使用RecyclerView实现顶部悬浮标题效果的Sticky Title View

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

目前很多的项目都在使用顶部悬浮标题的效果，很明显，这的确是一个比较人性化，用户体验效果比较好的UI交互效果，对于这个效果，有很多种实现方式，如果说要用RecyclerView来实现一个分类信息展示，并且要用到顶部标题栏悬浮显示当前分类的效果，应该怎么实现呢？

先来看个效果。

大概就这么一个效果，建议大家看效果时候，忽略左边的list列表，因为没有做关联，左边就是一个摆设。

实现这么一个效果，需要怎么去分析和实习那呢，其实从这样一个效果来看，我个人应该会先想到这样几个问题:

1. 这种不规则的GridView的是如何实现的？

2.使用RecyclerView实现不规则GridView，每个item之间的分割距离又是如何控制实现的？

3. 这种顶部悬浮效果又是如何实现的？

这是两个主要的问题。
OK，我还是主要围绕这两个问题，一步一步来实现。

一、首先这个不规则的GridView是如何实现的呢?

我们知道首先RecyclerView在使用的时候，可以设置一个LayoutManager，LayoutManager常用的有LinearLayoutManager和GridLayoutManager，

从名字上来说，很明显，前者是更偏向实现一个横纵向的ListView，而后者更倾向实现横纵向的GridView。

那么无疑，今天主角肯定是GridLayoutManager了。

说到这里，必须要贴出今天涉及到布局文件了。

主界面的MainActivity.java的布局文件，很简单第一个RecyclerView就是左边的List，这个可以忽略，其实就是一个摆设。

我们今天的实现都在这个FrameLayout中，这个会在代码中填充成一个Fragment。

activity_main.xml

<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f0f0f0"
android:orientation="horizontal"
android:weightSum=""> <android.support.v7.widget.RecyclerView
android:id="@+id/left_class_recyvler"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="" /> <FrameLayout
android:id="@+id/fragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="" /></LinearLayout>

那么接下来就来贴一下Fragment的xml布局文件吧。

detail_fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/detail_fragment_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <android.support.v7.widget.RecyclerView
android:id="@+id/detail_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView></LinearLayout>

也是一样极其简单，就一个RecyclerView，今天实现这个功能就主要跟这个RecycerView打交道了。

OK，布局文件准备好了，那我们肯定要准备Grid中item 的布局文件了，可是大家通过上面的图片可以看出，里面其实是有两中不同风格的布局文件的，一个绿色的标题，

一个是黄色的item，那么这样个情况下，毫无疑问我们是要准备两个item布局文件的，一个是title的布局文件，一个普通的item布局文件。

普通item的layout布局文件:

common_rv_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:background="@android:color/holo_orange_dark"
android:orientation="vertical"> <TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" /></LinearLayout>

title类型的laytout布局文件：

detail_title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical"> <TextView
android:layout_gravity="center"
android:id="@+id/title_textview"
android:textSize="20sp"
android:gravity="left|center_vertical"
android:background="#09a33d"
android:layout_width="match_parent"
android:layout_height="match_parent" /></LinearLayout>

当然还有描述grid item的java bean对象。

package com.zhg.views.stickytitlerecyclerview;/**
* Created by User on 2017/7/21.
*/public class DetailBean {
private boolean isTitle;
private String name;
private String tag=null; public boolean isTitle() {
return isTitle;
} public void setTitle(boolean title) {
isTitle = title;
} public String getName() {
return name;
} public void setName(String name) {
this.name = name;
} public String getTag() {
return tag;
} public void setTag(String tag) {
this.tag = tag;
}
}

用一个变量isTitle来标记，item是普通item还是title，tag是用来标记item是属于那个分类的(如上图的，分类1，分类2......分类n)。

OK，现在基本铺路已经完成了，各个布局文件都已经出来了，剩下的就是脑补逻辑代码了。

当然这里，肯定就是先实现一个Adapter了咯，那么这个adapter该怎么写呢？

package com.zhg.views.stickytitlerecyclerview;import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import java.util.ArrayList;
import java.util.List;
import java.util.zip.Inflater;/**
* Created by User on 2017/7/21.
*/public abstract class BaseRecyclerAdapter<T> extends RecyclerView.Adapter<BaseViewHolder> {
protected List<T> mList = new ArrayList<>();
protected OnItemClickListener mListener;
protected Context mContext;
public final static int ITEM_VIEW_TYPE_TITLE = ;
public final static int ITEM_VIEW_TYPE_NORMAL = ;
protected LayoutInflater mInflater; public void setOnItemClickListener(OnItemClickListener listener){
this.mListener = listener;
} public BaseRecyclerAdapter(Context context,List<T> list){
mInflater = LayoutInflater.from(context);
this.mContext = context;
if(list!=null)
this.mList = list;
} public abstract BaseViewHolder getHolder(View itemView,int itemType,OnItemClickListener listener); public abstract int getLayoutId(int viewType); @Override
public BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = mInflater.inflate(getLayoutId(viewType),parent,false);
return getHolder(itemView,viewType,mListener);
} @Override
public void onBindViewHolder(BaseViewHolder holder, int position) {
holder.bindViewHolder(mList.get(position));
} @Override
public int getItemViewType(int position) {
return ;
} @Override
public int getItemCount() {
return mList == null ? : mList.size();
}}

可以看到，我们首先写可一个抽象的BaseRecyclerAdapter.java的，很明显，我们真正的Adapter是要去继承这个抽象的Adapter
抽象类很简单咯，无非定义了两个抽象方法，让子类去做具体实现了，一个是getLayoutId()方法，这理所当然是让子类提供具体的layout布局id索引了，另一个是getHolder(View itemView,int itemType,OnItemClickListener listener)，用来创建ViewHodler的接口，这个也是需要子类去实现，很正常，毕竟每个RecyclerView 的Adapter的的ViewHolder都可能不一样，所以让子类去做具体实现了。

package com.zhg.views.stickytitlerecyclerview;import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;import java.util.ArrayList;
import java.util.List;/**
* Created by User on 2017/7/21.
*/public class DetailRecyclerViewAdapter extends BaseRecyclerAdapter<DetailBean> {
public DetailRecyclerViewAdapter(Context context ,List<DetailBean> list){
super(context,list);
} @Override
public int getItemViewType(int position) {
if(position >= && position < mList.size()){
return mList.get(position).isTitle() ? ITEM_VIEW_TYPE_TITLE : ITEM_VIEW_TYPE_NORMAL;
}
return ITEM_VIEW_TYPE_NORMAL;
} @Override
public int getItemCount() {
return mList == null ? : mList.size();
} @Override
public BaseViewHolder getHolder(View itemView,int viewType, OnItemClickListener listener) {
return new DetailViewHolder(itemView,viewType,listener);
} @Override
public int getLayoutId(int viewType) {
return viewType == ITEM_VIEW_TYPE_TITLE ? R.layout.detail_title : R.layout.common_rv_item;
} public class DetailViewHolder extends BaseViewHolder<DetailBean>{ public DetailViewHolder(View itemView,int viewType,OnItemClickListener listener) {
super(itemView,viewType, listener);
} @Override
public void bindViewHolder(DetailBean detailBean) {
mTextView.setText(detailBean.getName());
}
}
}

可以看到，构造方法中需要传递一个泛型的List集合，List集合数据元素类型必须为DetailBean类型的
这里主要看getItemViewType这个方法，在这个方法中，其实这个方法很好理解，这个方法根据position，从list集合中获取DetailBean，判断这个对象是否为title类型，如果是的话就返回title类型的int类型标记，，如果不是就返回普通类型的int类型标记。
然后就是实现覆盖上面所述的两个抽象方法，也是根据itemViewType标记来返回相应的layout布局文件。

其他的无非就是创建ViewHolder了，其他的没有什么可讲的。

接下来我们在fragment中，创建adapter，初始化ReceyclerView对象，初始化数据，给RecyclerView设置adapter，看看运行之后是什么效果呢。

package com.zhg.views.stickytitlerecyclerview;import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import java.util.ArrayList;
import java.util.List;/**
* Created by User on 2017/7/21.
*/public class DetailFragment extends Fragment {
private RecyclerView mRecyclerView;
private DetailRecyclerViewAdapter mAdapter;
private List<DetailBean> mList;
private GridLayoutManager mLayoutManager;
public DetailFragment(){
initData();
} private void initData() {
mList = new ArrayList<>();
for(int i = ; i < ; i++){
DetailBean bean = new DetailBean();
bean.setTitle(true);
bean.setTag(i+"");
bean.setName("分类"+i);
mList.add(bean);
for(int j = ; j < ; j++){
bean = new DetailBean();
bean.setTitle(false);
bean.setTag(i+"");
bean.setName(j+"");
mList.add(bean);
}
}
} @Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = initView(inflater,container);
mRecyclerView = (RecyclerView) view.findViewById(R.id.detail_recycler);
mAdapter = new DetailRecyclerViewAdapter(getActivity(),mList);
mLayoutManager = new GridLayoutManager(getActivity(),); mRecyclerView.setLayoutManager(mLayoutManager);
mRecyclerView.setAdapter(mAdapter);
return view;
} private View initView(LayoutInflater inflater, @Nullable ViewGroup container) {
View view = inflater.inflate(R.layout.detail_fragment_layout,container,false);
return view;
}
}

我们可以看到，initData中初始化了数据，初始化了一个list集合，装的都是DetailBean对象，也就是每一个item，包括title类型的，然后就是findViewById找到RecyclerView，初始化adapter，给RecyvlerView设置adapter，设置了一个GridLayoutManager类型的布局管理器，在创建布局管理的时候，第二个参数，传递了一个3，这个就是说，这个Grid是个3列的grid，其他的没啥好解释的，直接运行看看什么效果把。

ok，效果出来了，但是有一个很明显的问题，似乎除了有个绿色的，字体大点，item之外，其他的都是一样，该怎么实现我们最终效果之中的那种不规则的那种效果呢？

这里面就有一个小技巧了，我之前转载过一篇博客，里面也重点介绍了这个小技巧，对这个还不清楚的，点击如下博客链接进行补充，如下:

http://blog.csdn.net/q178266871/article/details/50716502
那就是GridLayoutManager.setSpanSizeLookup方法，这个方法需要传入一个SpanSizeLookup对象，这个类会有一个必须实现的方法，getSpanSize(int position)，有了这个position，可以对指定position的item的span大小进行控制，我们上面的代码，可以看出，我们设置了3个列，其实也就是3个span的空间，那么我们要实现这个效果，似乎也很简单了，我们利用这个接口，根据position拿到DetailBean对象，判断对象的isTitle是否为标题，如果是标题，那就让这个position对应的item占3个span就行了，其余的占一个span就行了，我们把这个加上试试效果吧。

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = initView(inflater,container);
mRecyclerView = (RecyclerView) view.findViewById(R.id.detail_recycler);
mAdapter = new DetailRecyclerViewAdapter(getActivity(),mList);
mLayoutManager = new GridLayoutManager(getActivity(),);
mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return mList.get(position).isTitle()?:;
}
}); mRecyclerView.setLayoutManager(mLayoutManager);
mRecyclerView.setAdapter(mAdapter);
return view;
}

OK，这个效果看起来是没有问题了。

二、使用RecyclerView实现不规则GridView，每个item之间的分割距离又是如何控制实现的？

那么上面的效果我们看到了，大致的那种不规则的Grid已经实现了，但是现在这种item之间的分割是怎么实现呢？

我们知道RecyclerView，是可以设置一个RecyclerView.ItemDecoration来设置分割效果，所以毫无疑问，我们自己实现一个分割Decoration来设置给RecyclerView。

看以看到，其他几个覆盖的方法，我们都没有做具体处理，我们主要在getItemOffsets方法中对每个item的上下左右偏移做了处理。

这个我们也是利用的DetailBean这个对象来实现，用这个方式实现还是比较简单的。

具体什么逻辑和方法，大家结合这个接口和前面的效果图看看，哈哈哈，对于getIemOffsets如何实现item之间的排列和分割，可以看看大神的博客对这个原理的说明，博客地址如下:http://blog.csdn.net/shangmingchao/article/details/51456319

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = initView(inflater,container);
mRecyclerView = (RecyclerView) view.findViewById(R.id.detail_recycler);
mAdapter = new DetailRecyclerViewAdapter(getActivity(),mList);
mLayoutManager = new GridLayoutManager(getActivity(),);
mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return mList.get(position).isTitle()?:;
}
});
mRecyclerView.addItemDecoration(new GridDividerItemDecoration(getActivity(),mList));
mRecyclerView.setLayoutManager(mLayoutManager);
mRecyclerView.setAdapter(mAdapter);
return view;
}

三. 这种顶部悬浮效果又是如何实现的？

那么这种效果如何实现呢，其实RecyclerView是可以设置多个RecyclerView.ItemDecoration的，那么我们可以另外再自己写一个RecyclerView.ItemDecoration来实现绘制顶部的悬浮标题了。

package com.zhg.views.stickytitlerecyclerview;import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.text.TextUtils;
import android.util.Log;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import java.lang.reflect.Type;
import java.util.List;/**
* Created by User on 2017/7/24.
*/public class ItemHeaderDecoration extends RecyclerView.ItemDecoration {
private Context mContext;
private List<DetailBean> mList;
public static String currentTag = "";
private LayoutInflater mLayoutInflater;
private int mTitleHight = ;
private int mTitleTextSize = ;
public ItemHeaderDecoration(Context context , List<DetailBean> dataList) {
super();
this.mContext = context;
this.mList = dataList;
mTitleHight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,,context.getResources().getDisplayMetrics());
// mTitleTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, context.getResources().getDisplayMetrics());
this.mLayoutInflater = LayoutInflater.from(mContext);
} public static void setCurrentTag(String tag){
ItemHeaderDecoration.currentTag = tag;
} @Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
} @Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
} @Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
//获取到视图中第一个可见的item的position
int position = ((GridLayoutManager)parent.getLayoutManager()).findFirstVisibleItemPosition();
String tag = mList.get(position).getTag();
View child = parent.findViewHolderForLayoutPosition(position).itemView;
boolean flag = false;
if((position+) < mList.size()){
String suspensionTag = mList.get(position+).getTag();
if(null!=tag && !tag.equals(suspensionTag)){
Log.d("ZHG-TEST","!!!!!!!!!!!!!child.Height() = "+child.getHeight()+" , child.top = "+child.getTop()+" , mTitleHight = "+mTitleHight);
if(child.getHeight()+child.getTop() < mTitleHight){
c.save();
flag = true;
c.translate(,child.getHeight()+child.getTop()-mTitleHight);
}
}
}
View topTitleView = mLayoutInflater.inflate(R.layout.detail_title,parent,false);
TextView textView = (TextView) topTitleView.findViewById(R.id.title_textview);
//textView.setTextSize(mTitleTextSize);
textView.setText("分类"+tag);
int toDrawWidthSpec;//用于测量的widthMeasureSpec
int toDrawHeightSpec;//用于测量的heightMeasureSpec
RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) topTitleView.getLayoutParams();
if (lp == null) {
lp = new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);//这里是根据复杂布局layout的width height，new一个Lp
topTitleView.setLayoutParams(lp);
}
topTitleView.setLayoutParams(lp);
if (lp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
//如果是MATCH_PARENT，则用父控件能分配的最大宽度和EXACTLY构建MeasureSpec。
toDrawWidthSpec = View.MeasureSpec.makeMeasureSpec(parent.getWidth() - parent.getPaddingLeft() - parent.getPaddingRight(), View.MeasureSpec.EXACTLY);
} else if (lp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
//如果是WRAP_CONTENT，则用父控件能分配的最大宽度和AT_MOST构建MeasureSpec。
toDrawWidthSpec = View.MeasureSpec.makeMeasureSpec(parent.getWidth() - parent.getPaddingLeft() - parent.getPaddingRight(), View.MeasureSpec.AT_MOST);
} else {
//否则则是具体的宽度数值，则用这个宽度和EXACTLY构建MeasureSpec。
toDrawWidthSpec = View.MeasureSpec.makeMeasureSpec(lp.width, View.MeasureSpec.EXACTLY);
}
//高度同理
if (lp.height == ViewGroup.LayoutParams.MATCH_PARENT) {
toDrawHeightSpec = View.MeasureSpec.makeMeasureSpec(parent.getHeight() - parent.getPaddingTop() - parent.getPaddingBottom(), View.MeasureSpec.EXACTLY);
} else if (lp.height == ViewGroup.LayoutParams.WRAP_CONTENT) {
toDrawHeightSpec = View.MeasureSpec.makeMeasureSpec(parent.getHeight() - parent.getPaddingTop() - parent.getPaddingBottom(), View.MeasureSpec.AT_MOST);
} else {
toDrawHeightSpec = View.MeasureSpec.makeMeasureSpec(mTitleHight, View.MeasureSpec.EXACTLY);
}
//依次调用 measure,layout,draw方法，将复杂头部显示在屏幕上。
topTitleView.measure(toDrawWidthSpec, toDrawHeightSpec);
topTitleView.layout(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getPaddingLeft() + topTitleView.getMeasuredWidth(), parent.getPaddingTop() + topTitleView.getMeasuredHeight());
topTitleView.draw(c);//Canvas默认在视图顶部，无需平移，直接绘制
if (flag)
c.restore();//恢复画布到之前保存的状态
if (!TextUtils.equals(tag, currentTag)) {
currentTag = tag;
} }
}

在这里想说一下，绘制ItemDecoration了。onDraw()的绘制会先于ItemView的绘制，所以如果你在onDraw()方法中绘制的东西在ItemView边界内，就会被ItemView盖住。而onDrawOver()会在ItemView绘制之后再绘制，所以如果你在onDrawOver()方法中绘制的东西在ItemView边界内，就会盖住ItemView。简单点说，就是先执行ItemDecoration的onDraw()、再执行ItemView的onDraw()、再执行ItemDecoration的onDrawOver()。由于和RecyclerView使用的是同一个Canvas，所以你想在Canvas上画什么都可以，就像我们平时自定义View时写onDraw()方法一样。
所以我们要做悬浮title，那么首先肯定是在onDrawOver()中来实现了，这样的话，我们就能在Grid上面绘制一个浮起来的Title，但是不影响grid的itemview。
，最后把这个RecyclerView.ItemDecoration设置给RecyclerView，就能实现这个效果了。

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = initView(inflater,container);
mRecyclerView = (RecyclerView) view.findViewById(R.id.detail_recycler);
mAdapter = new DetailRecyclerViewAdapter(getActivity(),mList);
mLayoutManager = new GridLayoutManager(getActivity(),);
mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return mList.get(position).isTitle()?:;
}
});
mRecyclerView.addItemDecoration(new GridDividerItemDecoration(getActivity(),mList));
mRecyclerView.addItemDecoration(new ItemHeaderDecoration(getActivity(),mList));
mRecyclerView.setLayoutManager(mLayoutManager);
mRecyclerView.setAdapter(mAdapter);
return view;
}