地表最強 RecyclerView 分割線 Y_DividerItemDecoration 2.0

鬆大聖發表於2017-06-14

前言

自上一次發表 《媽媽再也不用擔心我的Recyclerview分割線了》 一轉眼已經過去兩個多月了,中間很多網友提了不少問題和期望。這段時間一直在起早貪黑的趕專案,有時候閒下來偷偷優化了程式碼但是沒提交到github,也沒時間寫文件。昨天專案第一階段剛結束我就靜下心來將程式碼重新進行了梳理和改造。寫完我就感覺如果上次 1.0 是《媽媽再也不擔心》系列的話,那這一次 2.0 稱為《地表最強》系列絕不為過。

首先,再次丟擲我對分割線最終奧義的理解。

分割線的奧義

無外乎兩點:

  • 在哪裡顯示(哪個Item?Item的上下左右?)
  • 顯示什麼 (寬多少?啥顏色?padding?...)

1.0 版和 2.0 版最大的區別在於,1.0 對分割線的控制粒度只細分到了每個條目,而 2.0 版是可以單獨精確的控制到每一個條目的每一條邊的,跟分割線的最終奧義已經很接近了,你說牛逼不牛逼。

先上專案地址...

Y_DividerItemDecoration 專案地址

Y_DividerItemDecoration

接下來我們來詳細看一下 2.0 版到底有哪些牛逼的特性...

2.0 Features

  • LinearLayoutManager和GridViewLayoutManager通用
  • 以每個item的上、下、左、右每條邊為控制單位
  • 可以單獨控制每邊是否顯示
  • 可以單獨控制每邊的顏色
  • 可以單獨控制每邊的寬度
  • 可以單獨控制每邊的 startPadding 和 endPadding

來看效果圖

地表最強 RecyclerView 分割線 Y_DividerItemDecoration 2.0
圖1 LinearLayoutManager

地表最強 RecyclerView 分割線 Y_DividerItemDecoration 2.0
圖2 大分割線GridViewLayoutManager

地表最強 RecyclerView 分割線 Y_DividerItemDecoration 2.0
圖2 普通GridViewLayoutManager

地表最強 RecyclerView 分割線 Y_DividerItemDecoration 2.0
圖3 異型GridViewLayoutManager

已解決的 1.0 時存在的問題

  1. 不能設定分割線的padding(如圖1)
  2. 分割線作為ItemDecoration佔用了item的寬度,分割線細的時候不明顯,分割線寬的時候可明顯看到有無分割線的item寬度明顯不一樣(解決方案是將中間分割線的寬度分攤到兩邊的item上,如圖2)

Usage

之所以版本號一下提到了 2.0 ,還有一個很重要的原因就是使用的API發生了很大改變,使用了建造者模式(話說現在不使用建造者模式的開源專案還能叫使用者友好的開源專案嗎?小調侃一下,勿噴 0.0),更科學清晰了,對比起來 1.0 就是鄉村野夫。

Step 1

將依賴加入你專案的build.gradle中:

compile 'com.yanyusong.y_divideritemdecoration:y_divideritemdecoration:2.0'複製程式碼

Step 2

新建一個物件實現抽象類 Y_DividerItemDecoration ,在 getDivider(int itemPosition) 中定義在itemPosition時條目的分割線情況,有無、顏色、寬度、startpadding 和 endpadding 。

    private class DividerItemDecoration extends Y_DividerItemDecoration {

        private DividerItemDecoration(Context context) {
            super(context);
        }

        @Override
        public Y_Divider getDivider(int itemPosition) {
            Y_Divider divider = null;
            switch (itemPosition % 2) {
                case 0:
                    //每一行第一個顯示rignt和bottom
                    divider = new Y_DividerBuilder()
                            .setRightSideLine(true, 0xff666666, 10, 0, 0)
                            .setBottomSideLine(true, 0xff666666, 20, 0, 0)
                            .create();
                    break;
                case 1:
                    //第二個顯示Left和bottom
                    divider = new Y_DividerBuilder()
                            .setLeftSideLine(true, 0xff666666, 10, 0, 0)
                            .setBottomSideLine(true, 0xff666666, 20, 0, 0)
                            .create();
                    break;
                default:
                    break;
            }
            return divider;
        }
    }複製程式碼

Step 3

給RecyclerView新增剛才實現的ItemDecoration

 recyclerView.addItemDecoration(new DividerItemDecoration(this));複製程式碼

讚賞

如果Y_DividerItemDecoration節省了你大量的時間,可否給我買一袋咖啡,讓我更加有動力去把它做得更好呢,謝謝!?

地表最強 RecyclerView 分割線 Y_DividerItemDecoration 2.0
支付寶

相關文章