自定義 ItemDecoration 這個問題你真的注意到了嗎

阿新 • • 發佈：2019-01-17

本文討論的是關於自定義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);
        }

12345678910

if(isLastRow&&isLastColumn){//最後一行最後一列什麼都不繪製outRect.set(0,0,0,0);}elseif(isLastRow){// 如果是最後一行，則不需要繪製底部outRect.set(0,0,mDividerHeight,0);}elseif(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);
    }

12345678910111213141516171819202122232425

privatevoidmeasureChild(View view,intotherDirParentSpecMode,booleanalreadyMeasured){finalLayoutParams lp=(LayoutParams)view.getLayoutParams();finalRect decorInsets=lp.mDecorInsets;finalintverticalInsets=decorInsets.top+decorInsets.bottom+lp.topMargin+lp.bottomMargin;finalinthorizontalInsets=decorInsets.left+decorInsets.right+lp.leftMargin+lp.rightMargin;finalintavailableSpaceInOther=getSpaceForSpanRange(lp.mSpanIndex,lp.mSpanSize);finalintwSpec;finalinthSpec;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);
        }

123456789101112131415161718192021222324252627282930313233343536373839404142434445

publicstaticintgetChildMeasureSpec(intparentSize,intparentMode,intpadding,intchildDimension,booleancanScroll){intsize=Math.max(0,parentSize-padding);intresultSize=0;intresultMode=0;if(canScroll){if(childDimension>=0){resultSize=childDimension;resultMode=MeasureSpec.EXACTLY;}elseif(childDimension==LayoutParams.MATCH_PARENT){switch(parentMode){caseMeasureSpec.AT_MOST:caseMeasureSpec.EXACTLY:resultSize=size;resultMode=parentMode;break;caseMeasureSpec.UNSPECIFIED:resultSize=0;resultMode=MeasureSpec.UNSPECIFIED;break;}}elseif(childDimension==LayoutParams.WRAP_CONTENT){resultSize=0;resultMode=MeasureSpec.UNSPECIFIED;}}else{if(childDimension>=0){resultSize=childDimension;resultMode=MeasureSpec.EXACTLY;}elseif(childDimension==LayoutParams.MATCH_PARENT){resultSize=size;resultMode=parentMode;}elseif(childDimension==LayoutParams.WRAP_CONTENT){resultSize=size;if(parentMode==MeasureSpec.AT_MOST||parentMode==MeasureSpec.EXACTLY){resultMode=MeasureSpec.AT_MOST;}else{resultMode=MeasureSpec.UNSPECIFIED;}}}//noinspection WrongConstantreturnMeasureSpec.makeMeasureSpec(resultSize,resultMode);}

由於我們這裡討論的是垂直方向上的Grid，所以 mOrientation == VERTICA，從上面的程式碼可以看出當我們的itemView寬度不是精確數值的時候，然後測量出的寬度就為 Math.max(0, parentSize – padding)（這裡的 padding 就是 horizontalInsets = decorInsets.left + decorInsets.right + lp.leftMargin + lp.rightMargin），原來這裡在實際的寬度下還減去了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;

其中：
L_n:表示第n列itemView left 偏移量。
R_n:表示第n列itemView right 偏移量。

可能有些同學看到上面式子會有點凌亂，這裡我直接告訴你最後推算出的結論好了，L_n 是一個以 dividerWidth-eachOffset 為差值的一個等差數列，R_n就等於 eachWidth-L_n。所以我們最後對 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);

123456789101112131415

intleft=0;inttop=0;intright=0;intbottom=0;inteachWidth=(spanCount-1)*mDividerHeight/spanCount;intdl=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

自定義 ItemDecoration 這個問題你真的注意到了嗎

自定義 ItemDecoration 這個問題你真的注意到了嗎

Android自定義View實現類似車來了軌跡圖

Spark自定義累加器的實現需要注意的細節（java版）

Android自定義View教你一步一步實現即刻點贊效果

只有懂這種程式語言人才能看懂這個笑話，你看懂了嗎？

Android自定義View：你需要一個簡單好用、含歷史搜尋記錄的搜尋框嗎？

android 自定義Button,滿足你對Button呈現樣式的一系列要求

RecycleView自定義ItemDecoration，實現時間軸效果

自定義控制元件-----自定義數字鍵盤，適配了正則表示式的帶輸出字串的控制元件

資料科學與資料分析傻傻分不清楚？看完這個你就懂了！

定義一個類，封裝矩形的長和寬；在定義一個類，繼承自定義的這個類，在繼承類中根據基類中封裝的矩形的長和寬求矩形的面積。

android自定義Toast——讓你應用別具一格

kafka訊息會不會丟失？為什麼？看了這個你就清楚了

自定義UTI 註冊你的APP所支援的檔案型別

自定義值型別一定不要忘了重寫Equals，否則效能和空間雙雙堪憂

Android開發入門的正確姿勢,你get到了嗎？

C#進階系列——WebApi 路由機制剖析：你準備好了嗎？

大學生求職難，關卡在哪？你真正懂了嗎？

PostgreSQL 圖形化客戶端工具的使用技巧你都get了嗎？

大數據的正確用法你get到了嗎？

自定義 ItemDecoration 這個問題你真的注意到了嗎

相關推薦