本文討論的是關于自定義ItemDecoration容易被忽略的問題,此文適合有過自定義ItemDecoration經驗的同學閱讀,還沒有學習過的可以先去看看相關文章再來看本文。
ItemDecoration 我相信只要使用過RecyclerView的同學肯定都比較熟悉了,我們在使用 RecyclerView 的時候一般都是用這個來畫分隔線的,不得不說十分的好用。但是在最近發現在使用自定義的ItemDecoration上遇到了一些細節上的問題,我這里自定義了一個GridDividerItemDecoration ,用于網格布局的分隔,大概效果如下圖所示:
繪制的邏輯大概是這樣的:當 itemView 不是最后一列或者最后一行的時候就繪制右側和底部分隔線,如果是最后一列時則不繪制右側分隔線,如果是最后一行則不繪制底部分隔線。
代碼大概是這樣的
if (isLastRow && isLastColumn) {//最后一行最后一列什么都不繪制
outRect.set(0, 0, 0, 0);
} else if (isLastRow) {// 如果是最后一行,則不需要繪制底部
outRect.set(0, 0, mDividerHeight, 0);
} else if (isLastColumn) {// 如果是最后一列,則不需要繪制右邊
outRect.set(0, 0, 0, mDividerHeight);
} else {
outRect.set(0, 0, mDividerHeight,
mDividerHeight);
}
這里的分割線設置的寬度只有1dp,看起來似乎沒有什么問題,但是如果把分隔線的寬度設置為20dp效果如下圖所示:
會明顯的感覺到最后一列itemView的寬度會比前幾列寬一些,具體的數值就是我們設置的 dividerWidth (也就是分隔線的寬度),正常情況下我們在自定義的 ItemDocration 設置 ItemOffsets 不會影響 itemView 的的大小,然而這里卻出現了這個問題(其實網上絕大部分流行的關于網格的ItemDocration都存在這個問題),什么原因呢,看看下面兩段源碼就會知道了
private void measureChild(View view, int otherDirParentSpecMode, boolean alreadyMeasured) {
final LayoutParams lp = (LayoutParams) view.getLayoutParams();
final Rect decorInsets = lp.mDecorInsets;
final int verticalInsets = decorInsets.top + decorInsets.bottom
+ lp.topMargin + lp.bottomMargin;
final int horizontalInsets = decorInsets.left + decorInsets.right
+ lp.leftMargin + lp.rightMargin;
final int availableSpaceInOther = getSpaceForSpanRange(lp.mSpanIndex, lp.mSpanSize);
final int wSpec;
final int hSpec;
if (mOrientation == VERTICAL) {
//最后一個參數用來標識在當前的mOrientation 下是否可以滾動,
//當mOrientation 是VERTICAL的時候水平方向肯定是不能滾動的
wSpec = getChildMeasureSpec(availableSpaceInOther, otherDirParentSpecMode,
horizontalInsets, lp.width, false);
hSpec = getChildMeasureSpec(mOrientationHelper.getTotalSpace(), getHeightMode(),
verticalInsets, lp.height, true);
} else {
hSpec = getChildMeasureSpec(availableSpaceInOther, otherDirParentSpecMode,
verticalInsets, lp.height, false);
wSpec = getChildMeasureSpec(mOrientationHelper.getTotalSpace(), getWidthMode(),
horizontalInsets, lp.width, true);
}
measureChildWithDecorationsAndMargin(view, wSpec, hSpec, alreadyMeasured);
}
public static int getChildMeasureSpec(int parentSize, int parentMode, int padding,
int childDimension, boolean canScroll) {
int size = Math.max(0, parentSize - padding);
int resultSize = 0;
int resultMode = 0;
if (canScroll) {
if (childDimension >= 0) {
resultSize = childDimension;
resultMode = MeasureSpec.EXACTLY;
} else if (childDimension == LayoutParams.MATCH_PARENT) {
switch (parentMode) {
case MeasureSpec.AT_MOST:
case MeasureSpec.EXACTLY:
resultSize = size;
resultMode = parentMode;
break;
case MeasureSpec.UNSPECIFIED:
resultSize = 0;
resultMode = MeasureSpec.UNSPECIFIED;
break;
}
} else if (childDimension == LayoutParams.WRAP_CONTENT) {
resultSize = 0;
resultMode = MeasureSpec.UNSPECIFIED;
}
} else {
if (childDimension >= 0) {
resultSize = childDimension;
resultMode = MeasureSpec.EXACTLY;
} else if (childDimension == LayoutParams.MATCH_PARENT) {
resultSize = size;
resultMode = parentMode;
} else if (childDimension == LayoutParams.WRAP_CONTENT) {
resultSize = size;
if (parentMode == MeasureSpec.AT_MOST || parentMode == MeasureSpec.EXACTLY) {
resultMode = MeasureSpec.AT_MOST;
} else {
resultMode = MeasureSpec.UNSPECIFIED;
}
}
}
//noinspection WrongConstant
return MeasureSpec.makeMeasureSpec(resultSize, resultMode);
}
由于我們這里討論的是垂直方向上的Grid,所以 mOrientation == VERTICA,從上面的代碼可以看出當我們的itemView寬度不是精確數值的時候,然后測量出的寬度就為 ** Math.max(0, parentSize - padding)**(這里的 padding 就是 <code>horizontalInsets = decorInsets.left + decorInsets.right + lp.leftMargin + lp.rightMargin</code>),原來這里在實際的寬度下還減去了ItemDecoration的左右偏移量,這也就解釋了上面的那個問題。有人會問我們可不可以把寬度設置為固定值呢?可以當然是可以的,但是又會出現其他問題,下來你可以去嘗試一下,這里我就不再去細究了。
一般情況下當 mOrientation == VERTICA 的時候itemView的寬度是 match_parent的,當 mOrientation == HORIZONTAL的時候itemView的高度就是 match_parent的,這樣才能更好的去適配各種屏幕的手機。
這里我們找到了問題的原因所在,應該怎樣去解決呢? 其實也很簡單,就是均勻的分配offset給每一個itemView。
下面我們來計算一下偏移量。
// 每一個itemView的總偏移量(left+right)
eachOffset =(spanCount-1)* dividerWidth / spanCount;
L0=0 , R0=eachOffset;
L1=dividerWidth-R0 , R1=eachOffset-L1;
L2=dividerWidth-R1 , R2=eachOffset-L2;
其中:
Ln:表示第n列itemView left 偏移量。
Rn:表示第n列itemView right 偏移量。
可能有些同學看到上面式子會有點凌亂,這里我直接告訴你最后推算出的結論好了,Ln 是一個以 dividerWidth-eachOffset 為差值的一個等差數列,Rn就等于 eachWidth-Ln。所以我們最后對 getItemOffsets 做了改進,代碼如下:
int left = 0;
int top = 0;
int right = 0;
int bottom = 0;
int eachWidth = (spanCount - 1) * mDividerHeight / spanCount;
int dl = mDividerHeight - eachWidth;
left = itemPosition % spanCount * dl;
right = eachWidth - left;
bottom = mDividerHeight;
if (isLastRow) {
bottom = 0;
}
outRect.set(left, top, right, bottom);
最后的效果圖如下:
完美的解決了上面出現的問題,這都是些細節上的問題,如果不怎么注意,還真的很難去注意到,以后如果遇到其他類似的問題也可以很容易的解決了。本文只是討論了在使用ItemDecoration其中的一個問題,并不算難,但是也很重要,所以大家在平時的開發中還是應該多多注意細節上的問題。
最后送上本文源碼地址:
順便給大家推薦一個十分強大的開源自定義的ItemDecoration ,適用于 LinearLayoutManager作為布局管理器的RecyclerView : RecyclerView-FlexibleDivider