版權宣告：本文為博主原創文章，未經博主允許不得轉載
系列教程：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有什麼用，不清楚的可以看下這兩篇部落格
簡單來說，我們實現分組及粘性頭部效果分三步
- 重寫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) {
}
}));
複製程式碼效果如圖