一RecyclerView做到QQ空間相冊布局

加入 LINE@ 趣聞不漏接

看什麼看！點我呀！

全棧工程師，免費入門到精通！

作者丨丶E

https://www.jianshu.com/p/c5edc5883d83

前言

效果圖：

看到這布局自然會想到用RecyclerView來做，用ItemDecoration繪制日期那條分割線，每行3列的GridLayoutManager

但是有個問題，如果不是正好3列、怎麼去控制末尾的留白呢？

內容目錄

我的做到思路是這樣的:

GridLayoutManager中有個setSpanSizeLookup方法，getSpanSize返回值就是控制每行有幾列的

gridLayoutManager.setSpanSizeLookup(newGridLayoutManager.SpanSizeLookup(){@OverridepublicintgetSpanSize(intposition){returnsetSpanSize(position,mAdapter.getDatas());}});

不了解的可以轉至:

https://www.jianshu.com/p/675883c26ef2

也就是說使用該方法我可以控制每一行的列數、只要我再控制其長度就OK了

在數據實體中添加一個value、用來記錄當前圖片和前面差了幾個空白，從而確定留白的距離

privateintsetSpanSize(intposition,List<AlbumBean>listEntities){intcount;intd;if((position+1<listEntities.size())&&position>0){if(!listEntities.get(position).getSubId().equals(listEntities.get(position+1).getSubId())){mAdapter.getItem(position+1).value=2-(mAdapter.getItem(position).value+position)%3+mAdapter.getItem(position).value;d=2-(mAdapter.getItem(position).value+position)%3;if(d==2){count=3;}elseif(d==1){count=2;}else{count=1;}}else{mAdapter.getItem(position+1).value=mAdapter.getItem(position).value;count=1;}}elseif(position==0){if(mAdapter.getDatas().size()>1){if((!listEntities.get(position).getSubId().equals(listEntities.get(position+1).getSubId()))){mAdapter.getItem(1).value=2;count=3;}else{count=1;mAdapter.getItem(1).value=0;}}else{count=1;}}else{count=1;}returncount;}

publicclassEaseItemDecorationextendsRecyclerView.ItemDecoration{privatefinalDrawablemDivider;privateList<?extendsAlbumBean>mDatas;privatePaintmPaint;privateRectmBounds;privateintmTitleHeight;privatestaticintCOLOR_TITLE_BG=Color.parseColor("#ffffff");privatestaticintCOLOR_TITLE_FONT=Color.parseColor("#333333");privatestaticintmTitleFontSize;privateintwidth;privatestaticfinalint[]ATTRS=newint[]{android.R.attr.listDivider};publicEaseItemDecoration(Contextcontext,List<?extendsAlbumBean>datas){super();mDatas=datas;mPaint=newPaint();mBounds=newRect();finalTypedArraya=context.obtainStyledAttributes(ATTRS);mDivider=a.getDrawable(0);mTitleHeight=(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,90,context.getResources().getDisplayMetrics());mTitleFontSize=(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,16,context.getResources().getDisplayMetrics());mPaint.setTextSize(mTitleFontSize);mPaint.setAntiAlias(true);width=SmallUtil.getScreenWidth(context)/3;}publicvoidsetmDatas(List<?extendsAlbumBean>mDatas){this.mDatas=mDatas;}@OverridepublicvoidonDraw(Canvasc,RecyclerViewparent,RecyclerView.Statestate){super.onDraw(c,parent,state);finalintleft=parent.getPaddingLeft();finalintright=parent.getWidth()-parent.getPaddingRight();finalintchildCount=parent.getChildCount();for(inti=0;i<childCount;i++){finalViewchild=parent.getChildAt(i);finalRecyclerView.LayoutParamsparams=(RecyclerView.LayoutParams)child.getLayoutParams();intposition=params.getViewLayoutPosition();//我記得Rv的itemposition在重置時可能為-1.保險點判斷一下吧if(position>-1){if(position==0){drawTitleArea(c,left,right,child,params,position);}else{if(null!=mDatas.get(position).getSubId()&&!mDatas.get(position).getSubId().equals(mDatas.get(position-1).getSubId())){//不為空且跟前一個tag不一樣了，說明是新的分類，也要titledrawTitleArea(c,left,right,child,params,position);}else{}}}}}/***繪制Title區域背景和文字的方法*/privatevoiddrawTitleArea(Canvasc,intleft,intright,Viewchild,RecyclerView.LayoutParamsparams,intposition){//最先調用，繪制在最下層mPaint.setColor(COLOR_TITLE_BG);c.drawRect(left,child.getTop()-params.topMargin-mTitleHeight,right,child.getTop()-params.topMargin,mPaint);mPaint.setColor(COLOR_TITLE_FONT);mPaint.setTextSize(SmallUtil.sp2px(17));Stringdate=mDatas.get(position).getTitle();mPaint.getTextBounds(date,0,date.length(),mBounds);c.drawText(date,(width*3)/2-mBounds.width()/2,child.getTop()-params.topMargin-mTitleHeight/2,mPaint);}@OverridepublicvoidonDrawOver(Canvasc,finalRecyclerViewparent,RecyclerView.Statestate){//最後調用繪制在最上層}@OverridepublicvoidgetItemOffsets(RectoutRect,Viewview,RecyclerViewparent,RecyclerView.Statestate){super.getItemOffsets(outRect,view,parent,state);intposition=((RecyclerView.LayoutParams)view.getLayoutParams()).getViewLayoutPosition();if(position>-1&&position<mDatas.size()){if(position+1<mDatas.size()){if(null!=mDatas.get(position).getSubId()&&!mDatas.get(position).getSubId().equals(mDatas.get(position+1).getSubId())){intd=2-(mDatas.get(position).value+position)%3;if(isNewLine(position,mDatas)){outRect.set(0,mTitleHeight,width*d+mDivider.getIntrinsicHeight(),mDivider.getIntrinsicHeight());}else{outRect.set(0,0,width*d+mDivider.getIntrinsicHeight(),mDivider.getIntrinsicHeight());}}else{if(isNewLine(position,mDatas)){outRect.set(0,mTitleHeight,mDivider.getIntrinsicHeight(),mDivider.getIntrinsicHeight());}else{outRect.set(0,0,mDivider.getIntrinsicHeight(),mDivider.getIntrinsicHeight());}}}else{if(isNewLine(position,mDatas)){outRect.set(0,mTitleHeight,mDivider.getIntrinsicHeight(),mDivider.getIntrinsicHeight());}else{outRect.set(0,0,mDivider.getIntrinsicHeight(),mDivider.getIntrinsicHeight());}}}}privatebooleanisNewLine(intposition,List<?extendsAlbumBean>mDatas){booleanisNew=false;if(position==0||position==1||position==2)returntrue;intsize=position>2?position-3:0;for(inti=size;i<position;i++){if(null!=mDatas.get(i).getSubId()&&!mDatas.get(i).getSubId().equals(mDatas.get(i+1).getSubId())){isNew=true;break;}}returnisNew;}}