RecycleView 系列（4）--利用 ItemDecoration 实现粘性头部分组功能

前言

上一篇文章介绍了用 ItemDecoration 实现物流时间轴样式的一个例子，接下来，再来看一个比较常见的功能：粘性头部分组功能。

我们先来看一下今日头条中选取位置信息时的效果：

可以看到这个效果包含下面几个点：

• 数据分组展示
• 分组头部悬停
• 两个分组头部相遇时上面的分组头部被缓缓推出，同时透明度发生变化

下面就来借用 ItemDecoration 来一点点实现它。

在了解 ItemDecoration 之前，这个功能的实现可能会采取在 item 中包含用于展示城市数据的控件和展示头部分组的控件，然后只有每组的第一个数据展示分组控件，其余默认隐藏掉。那现在要用 ItemDecoration 来实现，其实也很简单，每个头部分组就是一种特殊的分割线，组内其他元素采用另一种分割线。

有了思路，然后让我们先开始造一点用于展示的数据，这里我把一些市区信息存在 json 文档中。为了便于我们在 ItemDecoration 类只进行分割线的绘制，所以我这里对数据提前进行处理，确保在绘制分割线之前，已经知道哪些数据是分组的头部，哪些数据是组内其他元素。

分组逻辑为：第一个数据肯定是分组的头部，然后从第二个数据开始，拿当前数据和上个数据进行比较，如果首字母相等，说明当前数据仍然是这个分组内的数据，如果不一样，说明产生了新的分组，那么当前这个数据就是这个分组的头部。

下面是部分进行数据处理的代码（默认数据已经按首字母分组）：

 List<CityBean> cityBeans = JSONArray.parseArray(cityJson, CityBean.class);
            if (cityBeans ==null && cityBeans.size() ==0){
                return;
            }
            for (int i = 0; i < cityBeans.size() ; i++) {
                CityBean cityBean = cityBeans.get(i);
                //获取当前数据的首字母
                String firstLetter = cityBean.getPinyin() ==null? "#" :cityBean.getPinyin().substring(0,1);
                cityBean.setFirstLetter(firstLetter);
                //第一个数据肯定是分组头部
                if (i ==0){
                    cityBean.setGroupFirst(true);
                }else {
                    //其余数据要跟上个数据进行比较
                    CityBean lastCityBean = cityBeans.get(i-1);
                    String lastLetter = lastCityBean.getPinyin() ==null? "#" :lastCityBean.getPinyin().substring(0,1);
                 //当前数据首字母和上个数据首字母相等，说明还是组内数据，不相等，出现新的分组，当前数据是分组头部
                    cityBean.setGroupFirst(!firstLetter.equals(lastLetter));
                }
                cityBeanList.add(cityBean);
            }

接下来我们来绘制分割线。首先需要设置 getItemOffsets（）方法，为 item 预留出分割线的位置（分组头部分割线高 20dp，其余组内元素分割线 1px）：

 /**
     * 设置 item  top方向的偏移量
     */
     private int topOffset ;
     
     public GroupDivider(Context context, List<CityBean> cityBeanList) {
        this.context = context;
        this.cityBeanList = cityBeanList;
        paint=  new Paint();
        paint.setAntiAlias(true);