2018年01月01日阅读 4114

Android 从零开始实现RecyclerView分组及粘性头部效果

版权声明：本文为博主原创文章，未经博主允许不得转载

系列教程：Android开发之从零开始系列

源码：AnliaLee/android-RecyclerViews，欢迎star

大家要是看到有错误的地方或者有啥好的建议，欢迎留言评论

最近项目中要实现列表分组和粘性头部的效果，网上翻了很多资料和开源库，感觉都不是太好用，有的扩展性不强有的用起来又太复杂，于是决定自己动手造轮子。行动之前，研究了许多前人的源码，决定了几点开发方向

尽可能方便用户使用，减少调用的代码量及与其他类的耦合度
使用RecyclerView实现列表功能
自定义RecyclerView.ItemDecoration绘制分组Item和粘性头部
通过layoutInflater.inflate获取layout中的布局并传入ItemDecoration进行绘制（方便用户布局分组Item）
在ItemDecoration中提供接口让用户对列表数据进行分组和设置分组Item的显示内容

目前GroupItemDecoration第一阶段已开发完成（会继续更新和扩展功能），源码及示例已上传至Github，具体效果如图

GroupItemDecoration使用简介

GroupItemDecoration目前只支持LinearLayoutManager.VERTICAL类型，使用流程如下

拷贝package com.anlia.library.group路径下的文件到你的项目中
inflate你写好的布局

LayoutInflater layoutInflater = LayoutInflater.from(this);
View groupView = layoutInflater.inflate(R.layout.item_group,null);
复制代码

调用recyclerView.addItemDecoration添加GroupItemDecoration

recyclerView.addItemDecoration(new GroupItemDecoration(this,groupView,new GroupItemDecoration.DecorationCallback() {
	@Override
	public void setGroup(List<GroupItem> groupList) {
		//设置分组，GroupItem(int startPosition)，例如：
		GroupItem groupItem = new GroupItem(0);
		groupItem.setData("name","第1组");
		groupList.add(groupItem);

		groupItem = new GroupItem(5);
		groupItem.setData("name","第2组");
		groupList.add(groupItem);
	}

	@Override
	public void buildGroupView(View groupView, GroupItem groupItem) {
		//构建groupView，通过groupView.findViewById找到内部控件（暂不支持点击事件等），例如
		TextView textName = (TextView) groupView.findViewById(R.id.text_name);
		textName.setText(groupItem.getData("name").toString());
	}
}));
复制代码

如果还是不清楚可以去看下demo

在我们自定义ItemDecoration之前首先得了解ItemDecoration有什么用，不清楚的可以看下这两篇博客

RecyclerView之ItemDecoration由浅入深

深入理解 RecyclerView 系列之一：ItemDecoration

简单来说，我们实现分组及粘性头部效果分三步

重写ItemDecoration.getItemOffsets在RecyclerView中为GroupView预留位置
重写ItemDecoration.onDraw在上一步预留的位置中绘制GroupView
重写ItemDecoration.onDrawOver绘制顶部悬停的GroupView（粘性头部）

我们按顺序一步步讲，首先，创建GroupItemDecoration继承自ItemDecoration，在初始化方法中获取用户设置的GroupView，并提供接口给用户设置分组相关

public class GroupItemDecoration extends RecyclerView.ItemDecoration {
	private Context context;
    private View groupView;
    private DecorationCallback decorationCallback;

    public GroupItemDecoration(Context context,View groupView,DecorationCallback decorationCallback) {
        this.context = context;
        this.groupView = groupView;
        this.decorationCallback = decorationCallback;
    }

    public interface DecorationCallback {
        /**
         * 设置分组
         * @param groupList
         */
        void setGroup(List<GroupItem> groupList);

        /**
         * 构建GroupView
         * @param groupView
         * @param groupItem
         */
        void buildGroupView(View groupView, GroupItem groupItem);
    }
}
复制代码

然后重写getItemOffsets方法，根据用户设置的分组为GroupView预留位置,其中最主要的是测量出GroupView的宽高和位置。measureView方法中按着View的绘制顺序调用View.measure和View.layout，只有先完成了这两步，才能将View绘制到屏幕上，关于如何测量View大家可以看下这篇博客Android如何在初始化的时候获取加载的布局的宽高。接下来是具体的实现代码

public class GroupItemDecoration extends RecyclerView.ItemDecoration {
    //省略部分代码...
    private List<GroupItem> groupList = new ArrayList<>();//用户设置的分组列表
    private Map<Object,GroupItem> groups = new HashMap<>();//保存startPosition与分组对象的对应关系
    private int[] groupPositions;//保存分组startPosition的数组
    private int positionIndex;//分组对应的startPosition在groupPositions中的索引
	
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        if(!isLinearAndVertical(parent)){//若RecyclerView类型不是LinearLayoutManager.VERTICAL，跳出（下同）
            return;
        }

        if(isFirst){
            measureView(groupView,parent);//绘制View需要先测量View的大小及相应的位置
            decorationCallback.setGroup(groupList);//获取用户设置的分组列表
            if(groupList.size()==0){//若用户没有设置分组，跳出（下同）
                return;
            }
            groupPositions = new int[groupList.size()];
            positionIndex = 0;

            int a = 0;
            for(int i=0;i<groupList.size();i++){//保存groupItem与其startPosition的对应关系
                int p = groupList.get(i).getStartPosition();
                if(groups.get(p)==null){
                    groups.put(p,groupList.get(i));
                    groupPositions[a] = p;
                    a++;
                }
            }
            isFirst = false;
        }

        int position = parent.getChildAdapterPosition(view);
        if(groups.get(position)!=null){
			//若RecyclerView中该position对应的childView之前需要绘制groupView，则为其预留相应的高度空间
            outRect.top = groupViewHeight;
        }
    }

    /**
     * 测量View的大小和位置
     * @param view
     * @param parent
     */
    private void measureView(View view,View parent){
        if (view.getLayoutParams() == null) {
            view.setLayoutParams(new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        }

        int widthSpec = View.MeasureSpec.makeMeasureSpec(parent.getWidth(), View.MeasureSpec.EXACTLY);
        int childWidth = ViewGroup.getChildMeasureSpec(widthSpec,
                parent.getPaddingLeft() + parent.getPaddingRight(), view.getLayoutParams().width);

        int childHeight;
        if(view.getLayoutParams().height > 0){
            childHeight = View.MeasureSpec.makeMeasureSpec(view.getLayoutParams().height, View.MeasureSpec.EXACTLY);
        } else {
            childHeight = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);//未指定
        }

        view.measure(childWidth, childHeight);
        view.layout(0,0,view.getMeasuredWidth(),view.getMeasuredHeight());

        groupViewHeight = view.getMeasuredHeight();
    }

    /**
     * 判断LayoutManager类型，目前GroupItemDecoration仅支持LinearLayoutManager.VERTICAL
     * @param parent
     * @return
     */
    private boolean isLinearAndVertical(RecyclerView parent){
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        if (!(layoutManager instanceof LinearLayoutManager)) {
            return false;
        }else {
            if(((LinearLayoutManager) layoutManager).getOrientation()
                    != LinearLayoutManager.VERTICAL){
                return false;
            }
        }
        return true;
    }
}
复制代码

在RecyclerView为GroupView预留了空间后，我们需要重写onDraw方法将其绘制出来。为了保证将所有用户设置的分组都绘制出来，我们要遍历RecyclerView所有的childView，当循环到该childView的position能找到对应的GroupItem时，便在该childView的上方绘制出GroupView（该位置正是之前预留的空间），具体代码如下

@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
	super.onDraw(c, parent, state);
	if(groupList.size()==0 || !isLinearAndVertical(parent)){
		return;
	}

	int childCount = parent.getChildCount();
	for (int i = 0; i < childCount; i++) {
		View child = parent.getChildAt(i);
		float left = child.getLeft();
		float top = child.getTop();

		int position = parent.getChildAdapterPosition(child);
		if(groups.get(position)!=null){
			c.save();
			c.translate(left,top - groupViewHeight);//将画布起点移动到之前预留空间的左上角
			decorationCallback.buildGroupView(groupView,groups.get(position));//通过接口回调得知GroupView内部控件的数据
			measureView(groupView,parent);//因为内部控件设置了数据，所以需要重新测量View
			groupView.draw(c);
			c.restore();
		}
	}
}
复制代码

接下来是绘制粘性头部，由两部分特效构成

保持当前childView对应的分组GroupView始终保持在RecyclerView顶部
当用户滑动RecyclerView使得上一组或下一组的GroupView“碰撞”到顶部的GroupView时，将会朝用户滑动的方向将其推开

推动特效主要是通过相邻组GroupView的top位置关系来实现，为了更好地理解相邻组的关系及接下来的代码逻辑，博主简单介绍一下分组逻辑：

RecyclerView可视范围（当前屏幕中显示的）内的分组划分为“上一组(pre)”、“当前组(cur)”和“下一组(next)”，这三组的划分依据如下

next组由cur组决定，跟在cur组后的那一组就是next组
RecyclerView最上方的childView如果是某组的第一个child，则该组为cur组，若该childView完全离开屏幕，则该组为pre组，按顺序其后面的组就为cur组

具体代码如下（表达能力有限，实在没搞明白的童鞋可以调试一下代码看看各个判断分支的跳入时机）：

@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
	super.onDrawOver(c, parent, state);
	if(groupList.size()==0 || !isStickyHeader || !isLinearAndVertical(parent)){
		return;
	}
	int childCount = parent.getChildCount();
	Map<Object,Object> map = new HashMap<>();

	//遍历当前可见的childView，找到当前组和下一组并保存其position索引和GroupView的top位置
	for (int i = 0; i < childCount; i++) {
		View child = parent.getChildAt(i);
		float top = child.getTop();
		int position = parent.getChildAdapterPosition(child);
		if(groups.get(position)!=null){
			positionIndex = searchGroupIndex(groupPositions,position);
			if(map.get("cur")==null){
				map.put("cur", positionIndex);
				map.put("curTop",top);
			}else {
				if(map.get("next")==null){
					map.put("next", positionIndex);
					map.put("nextTop",top);
				}
			}
		}
	}

	c.save();
	if(map.get("cur")!=null){//如果当前组不为空，说明RecyclerView可见部分至少有一个GroupView
		indexCache = (int)map.get("cur");
		float curTop = (float)map.get("curTop");
		if(curTop-groupViewHeight<=0){//保持当前组GroupView一直在顶部
			curTop = 0;
		}else {
			map.put("pre",(int)map.get("cur")-1);
			if(curTop - groupViewHeight < groupViewHeight){//判断与上一组的碰撞，推动当前的顶部GroupView
				curTop = curTop - groupViewHeight*2;
			}else {
				curTop = 0;
			}
			indexCache = (int)map.get("pre");
		}

		if(map.get("next")!=null){
			float nextTop = (float)map.get("nextTop");
			if(nextTop - groupViewHeight < groupViewHeight){//判断与下一组的碰撞，推动当前的顶部GroupView
				curTop = nextTop - groupViewHeight*2;
			}
		}

		c.translate(0,curTop);
		if(map.get("pre")!=null){//判断顶部childView的分组归属，绘制对应的GroupView
			drawGroupView(c,parent,(int)map.get("pre"));
		}else {
			drawGroupView(c,parent,(int)map.get("cur"));
		}
	}else {//否则当前组为空时，通过之前缓存的索引找到上一个GroupView并绘制到顶部
		c.translate(0,0);
		drawGroupView(c,parent,indexCache);
	}
	c.restore();
}

/**
 * 绘制GroupView
 * @param canvas
 * @param parent
 * @param index
 */
private void drawGroupView(Canvas canvas,RecyclerView parent,int index){
	if(index<0){
		return;
	}
	decorationCallback.buildGroupView(groupView,groups.get(groupPositions[index]));
	measureView(groupView,parent);
	groupView.draw(canvas);
}

/**
 * 查询startPosition对应分组的索引
 * @param groupArrays
 * @param startPosition
 * @return
 */
private int searchGroupIndex(int[] groupArrays, int startPosition){
	Arrays.sort(groupArrays);
	int result = Arrays.binarySearch(groupArrays,startPosition);
	return result;
}
复制代码

目前GroupItemDecoration的1.0.0版本实现思路就全部讲完了，后续更新还会解决GroupView内部控件各种事件的响应问题以及扩展更多的功能，如果大家看了感觉还不错麻烦点个赞，你们的支持是我最大的动力~

更新（GroupItem的点击与长按事件）

本次更新追加了新的接口，可以监听GroupItem的点击与长按事件（暂不支持GroupItem的子控件）

recyclerView.addOnItemTouchListener(new GroupItemClickListener(groupItemDecoration,new GroupItemClickListener.OnGroupItemClickListener() {
	@Override
	public void onGroupItemClick(GroupItem groupItem) {
	
	}

	@Override
	public void onGroupItemLongClick(GroupItem groupItem) {
	
	}
}));
复制代码

Android 从零开始实现RecyclerView分组及粘性头部效果

Android 从零开始实现RecyclerView分组及粘性头部效果

GroupItemDecoration使用简介

更新（GroupItem的点击与长按事件）

Recommend

如何使用ReactNative优雅快速开发一个属于自己的app - 简书

JavaScript 中的继承：ES3、ES5 和 ES6

JavaScript30秒，从入门到放弃之Array（三）

Android 热修复 - 各框架原理学习及对比

尝试写个UC浏览器（堆叠视图A）

常用的Javascript设计模式 - 文章 - 伯乐在线

Vue 组件通信之 Bus

新年新起点：从零配置 Mac 前端环境速查

原本只是想装个系统结果变成了这个样子OTZ

与你一起写小程序

About Joyk