目前很多的项目都在使用顶部悬浮标题的效果，很明显，这的确是一个比较人性化，用户体验效果比较好的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="4"> <android.support.v7.widget.RecyclerView android:id="@+id/left_class_recyvler" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <FrameLayout android:id="@+id/fragment" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="3" /> </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 = 1; public final static int ITEM_VIEW_TYPE_NORMAL = 0; 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 0; } @Override public int getItemCount() { return mList == null ? 0 : 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 >=0 && 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 ? 0 : 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 = 0 ; i < 15 ; i++){ DetailBean bean = new DetailBean(); bean.setTitle(true); bean.setTag(i+""); bean.setName("分类"+i); mList.add(bean); for(int j = 0 ; j < 10 ; 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(),3); 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(),3); mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { return mList.get(position).isTitle()?3:1; } }); mRecyclerView.setLayoutManager(mLayoutManager); mRecyclerView.setAdapter(mAdapter); return view; }
OK，这个效果看起来是没有问题了。
二、使用RecyclerView实现不规则GridView，每个item之间的分割距离又是如何控制实现的？
那么上面的效果我们看到了，大致的那种不规则的Grid已经实现了，但是现在这种item之间的分割是怎么实现呢？
我们知道RecyclerView，是可以设置一个RecyclerView.ItemDecoration来设置分割效果，所以毫无疑问，我们自己实现一个分割Decoration来设置给RecyclerView。
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.view.View; import java.util.List; /** * Created by User on 2017/7/25. */ public class GridDividerItemDecoration extends RecyclerView.ItemDecoration { private Context mContext; private List<DetailBean> mList; public GridDividerItemDecoration(Context context, List<DetailBean> list) { super(); mContext = context; mList = list; } @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) { if (parent.getLayoutManager() instanceof GridLayoutManager) { int position = parent.getChildAdapterPosition(view); DetailBean bean = mList.get(position); if (bean != null && bean.isTitle()) { outRect.set(0, 0, 0, 0); } else if ("0".equals(bean.getName()) || "1".equals(bean.getName())) { outRect.set(0, 5, 5, 0); } else if ("2".equals(bean.getName()) || "5".equals(bean.getName()) || "8".equals(bean.getName())) { outRect.set(0, 5, 0, 0); } else if ("9".equals(bean.getName())) { outRect.set(0, 5, 5, 5); } else { outRect.set(0, 5, 5, 0); } } else if (parent.getLayoutManager() instanceof LinearLayoutManager) { outRect.set(0, 0, 0, 5); } else { super.getItemOffsets(outRect, view, parent, state); } } @Override public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDrawOver(c, parent, state); } }
看以看到，其他几个覆盖的方法，我们都没有做具体处理，我们主要在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(),3); mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { return mList.get(position).isTitle()?3:1; } }); 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 = "0"; private LayoutInflater mLayoutInflater; private int mTitleHight = 50; private int mTitleTextSize = 20; public ItemHeaderDecoration(Context context , List<DetailBean> dataList) { super(); this.mContext = context; this.mList = dataList; mTitleHight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50,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+1) < mList.size()){ String suspensionTag = mList.get(position+1).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(0,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(),3); mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { return mList.get(position).isTitle()?3:1; } }); mRecyclerView.addItemDecoration(new GridDividerItemDecoration(getActivity(),mList)); mRecyclerView.addItemDecoration(new ItemHeaderDecoration(getActivity(),mList)); mRecyclerView.setLayoutManager(mLayoutManager); mRecyclerView.setAdapter(mAdapter); return view; }
源码下载地址: