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

本文討論的是關于自定義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其中的一個問題,并不算難,但是也很重要,所以大家在平時的開發中還是應該多多注意細節上的問題。

最后送上本文源碼地址:

  1. GridDividerItemDecoration

順便給大家推薦一個十分強大的開源自定義的ItemDecoration ,適用于 LinearLayoutManager作為布局管理器的RecyclerView : RecyclerView-FlexibleDivider

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,401評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,011評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,263評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,543評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,323評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,874評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,968評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,095評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,605評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,551評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,720評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,242評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,961評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,358評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,612評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,330評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,690評論 2 370

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,579評論 25 707
  • 基本使用RecyclerView的基本使用并不復雜,只需要提供一個RecyclerView.Apdater的實現用...
    龐哈哈哈12138閱讀 6,032評論 2 46
  • 這篇文章分三個部分,簡單跟大家講一下 RecyclerView 的常用方法與奇葩用法;工作原理與ListView比...
    LucasAdam閱讀 4,403評論 0 27
  • 愛一個人到底能到什么地步,《嫌疑人X的獻身》中的石神為了不可能在一起的靖子犯罪,愛一件事到底能到什么地步,《黑天鵝...
    唐三葬閱讀 263評論 0 0
  • 我的哲學老師給我上的第一堂上課是:“如何與這個世界相處?”大致可以分為三個部分——人與自己的關系、人與社會的管理、...
    我是微笑的云閱讀 322評論 0 0