RecyclerView 支持网格布局,我们使用GridLayoutManager来设置为网格布局,在使用网格布局时遇到Item之间间隔的问题,以下以每行三个为例来讲解。
每行显示三个图片,设置图片宽度恒定(eg :100dp)后,在不设置分隔的情况下,recyclerview会自动计算空隙宽度,然后填充到每个Item右边,如下图所示。但这种布局往往不满足我们的使用习惯,我们一般需要使图片左右靠边,中间间隙自动填充,因此我们需要移动item的位置。如下所示,需要将第二个、第三个Item右移。
下面开始介绍我们的实现方案,我们所需的工作就是计算每个item所需的移动距离,计算的过程后面介绍,现在假设我们已经计算出这个距离,为dividerWidth,那么我们只需要以下代码就ok了。
private final int SPAN_COUNT = 3;
gridLayoutManager = new GridLayoutManager(this, SPAN_COUNT, LinearLayoutManager.VERTICAL, false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return SPAN_COUNT/3;
}
});
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
GridLayoutManager.LayoutParamslayoutParams = (GridLayoutManager.LayoutParams) view.getLayoutParams();
int spanSize =layoutParams.getSpanSize();
if(spanSize ==eachItemCount){
int spanIndex =layoutParams.getSpanIndex();
int itemPosition =spanIndex/eachItemCount;//eachItemCount每个item所占空间
outRect.left =dividerWidth*itemPosition;//dividerWidth每份间隔宽度(item左侧间距)下面会具体介绍.
}
outRect.bottom =dividerHeight;//item底部间距
}
设置完以上代码就可以正常工作了,下面简单介绍下他是怎么工作的:
outRect结构如下所示,及矩形的数据结构,四个值分别代表目标Item四周的距离,如下图所示:
public final class Rect implements Parcelable {
public int left;
public int top;
public int right;
public int bottom;}
跟下源码定位到以下代码(版本V7-25.0.1):
Rect getItemDecorInsetsForChild(View child) {
final LayoutParams lp = (LayoutParams) child.getLayoutParams();
...
final Rect insets = lp.mDecorInsets;
insets.set(0, 0, 0, 0);
final int decorCount = mItemDecorations.size();//mItemDecorations为分割线的集合,因此GridLayout可以设置多个分隔线
for (int i = 0; i < decorCount; i++) {
mTempRect.set(0, 0, 0, 0);
//此处调用我们重写的函数,insets是Item的四周间距,此处加上我们设置的间距
mItemDecorations.get(i).getItemOffsets(mTempRect, child, this, mState);
insets.left += mTempRect.left;
insets.top += mTempRect.top;
insets.right += mTempRect.right;
insets.bottom += mTempRect.bottom;
}
lp.mInsetsDirty = false;
return insets;
}
其实写这篇文章的主要原因是Item移动位置的计算,以下以每行三个为例计算每个item移动的位置:
上图中空白处和为1,则每个空白为1/3,移动后一共两个空白,故每个占1/2,
显然第二个Item需要右移(1/2-1/3 = 1/6)的位置,那么第三个item需要移动自己的1/6距离+第二个item移动的位置1/6,即2/6。因此我们在计算空白的宽度时将其分为6份。
@Px int eachDividerWidth = (UISizeUtils.getScreenWidth(this)-UISizeUtils.dip2px(this,100)*SPAN_COUNT)/6;//把空白分为6份
DividerGridLayout dividerGridLayout = new DividerGridLayout(1,eachDividerWidth,UISizeUtils.dip2px(this,10));
因此计算出每份距离后,在getItemOffsets方法中根据spanIndex来计算每个Item距离左侧的距离
outRect.left的距离,为dividerWidth*itemPosition。
if(spanSize ==eachItemCount){
int spanIndex =layoutParams.getSpanIndex();
int itemPosition =spanIndex/eachItemCount;//eachItemCount每个item所占空间
outRect.left =dividerWidth*itemPosition;//dividerWidth每份间隔宽度(item左侧间距)
}
将其推广到每行四个Item时,每个每个空白为1/4,移动后每个空白占1/3,因此每个Item需要移动(1/3-1/4 = 1/12),每行5个Item时每个移动(1/4-1/5 = 1/20),归纳总结。对于每行N个Item,每个Item需要移动(1/(N*(N-1)))的位置。