RecyclerView設(shè)置間距和添加分割線的方法

更新時間：2022年09月05日 15:19:02 作者：Mondarzy

在使用RecyclerView布局，經(jīng)常需要調(diào)整間距和添加分割線以達(dá)到更美觀效果，這篇文章主要介紹了RecyclerView設(shè)置間距和添加分割線的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

使用RecyclerView布局，經(jīng)常需要調(diào)整間距和添加分割線以達(dá)到更美觀的效果，雖然一直接觸和使用，但卻從來沒有認(rèn)真研究過，經(jīng)常忘記如何使用，現(xiàn)在就來好好研究一番

先放上一個沒有分割線的效果圖

添加默認(rèn)的分割線

使用RecyclerView.addItemDecoration(ItemDecoration decor)方法，添加默認(rèn)的分割線
最簡單的方式就是，添加一個簡單的DividerItemDecoration類：

//添加默認(rèn)的分割線
recyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));

得到的效果圖

另外，可以使用DividerItemDecoration.setDrawble()傳入一個Drawable對象來定義我們想要的效果
繪制一個高度為2dp，顏色為綠色的矩形并將它傳入

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

? ? <solid android:color="#00ff00"/>

? ? <size android:height="2dp" />

</shape>

//添加默認(rèn)分割線
DividerItemDecoration decoration = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
decoration.setDrawable(getResources().getDrawable(R.drawable.divider_green));
recyclerView.addItemDecoration(decoration);

得到的效果圖

然后，我發(fā)現(xiàn)RecyclerView添加分割線還有一個重載方法：

RecyclerView.addItemDecoration(ItemDecoration decor, int index)

想也沒想，還以為是在指定的位置添加分割線，隨便打了個數(shù)字測試，結(jié)果程序閃退了
翻開源碼一看，原來內(nèi)部用了一個數(shù)組存儲添加進(jìn)來的ItemDecoration，怪不得方法名是addItemDecoration()而不是setItemDecoration()，也就是說RecyclerView可以添加多個ItemDecoration，那么就來試試吧：
繪制了三個矩形，顏色分別為綠色、紅色和藍(lán)色，高度分別為4dp、8dp和12dp，將它們都傳入

//添加默認(rèn)分割線
DividerItemDecoration decoration1 = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
decoration1.setDrawable(getResources().getDrawable(R.drawable.divider_green));
DividerItemDecoration decoration2 = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
decoration2.setDrawable(getResources().getDrawable(R.drawable.divider_red));
DividerItemDecoration decoration3 = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
decoration3.setDrawable(getResources().getDrawable(R.drawable.divider_blue));

recyclerView.addItemDecoration(decoration1);
recyclerView.addItemDecoration(decoration2);
recyclerView.addItemDecoration(decoration3);

效果圖：

換個順序傳入

recyclerView.addItemDecoration(decoration3);
recyclerView.addItemDecoration(decoration2);
recyclerView.addItemDecoration(decoration1);

效果圖：

很顯然，繪制順序是以內(nèi)部數(shù)組中的存儲順序?yàn)榛鶞?zhǔn)的，并且間距是由所有傳入的ItemDecoration的高度或?qū)挾裙餐嬎愕玫降模ㄋ詴霈F(xiàn)除了三種顏色外的灰色分割線）

添加自定義分割線

默認(rèn)的分割線效果不好，想要自定義分割線該怎么做？
很簡單，我們只需要自定義一個類去繼承ItemDecoration類，并重寫相關(guān)的方法就可以了。添加默認(rèn)分割線時使用的DividerItemDecoration也是如此。
編寫一個MyDecoration類，繼承RecyclerView.ItemDecoration類，Ctrl+O，發(fā)現(xiàn)除去已棄用的方法和構(gòu)造方法，ItemDecoration類主要有三個方法：

public void onDraw(Canvas c, RecyclerView parent, State state)
public void onDrawOver(Canvas c, RecyclerView parent, State state)
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state)

大概描述一下幾個方法的作用：

getItemOffsets()，獲取Item的偏移量，調(diào)整參數(shù)中outRect的相關(guān)值，可以實(shí)現(xiàn)類似padding的效果。
onDraw()，用這種方法繪制的任何內(nèi)容都將在繪制項(xiàng)目視圖之前繪制，繪圖的內(nèi)容將出現(xiàn)在視圖下方。
onDrawOver()，用這種方法繪制的任何內(nèi)容都將在繪制項(xiàng)目視圖之后繪制，繪圖的內(nèi)容會出現(xiàn)在視圖上方。

百聞不如一見，直接看實(shí)際效果

getItemOffsets()方法：

//添加自定義分割線
class MyDecoration extends RecyclerView.ItemDecoration {

?? ?@Override
?? ?public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
?? ??? ?super.getItemOffsets(outRect, view, parent, state);
?? ??? ?//設(shè)置間距
?? ??? ?outRect.bottom = 10;
?? ?}
}
//添加裝飾
recyclerView.addItemDecoration(new MyDecoration());

這里僅設(shè)置了底部間距，實(shí)現(xiàn)的效果類似之前使用的DividerItemDecoration

再給每個方向上都設(shè)置間距，看看效果

//添加自定義分割線
class MyDecoration extends RecyclerView.ItemDecoration {

?? ?@Override
?? ?public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
?? ??? ?super.getItemOffsets(outRect, view, parent, state);
?? ??? ?//設(shè)置間距
?? ??? ?outRect.left = 30;
? ? ? ? outRect.right = 50;
? ? ? ? outRect.top = 15;
? ? ? ? outRect.bottom = 10;
?? ?}
}
//添加裝飾
recyclerView.addItemDecoration(new MyDecoration());

可以看到，實(shí)現(xiàn)了類似padding的效果

onDraw()方法：

//添加自定義分割線
class MyDecoration extends RecyclerView.ItemDecoration {

?? ?@Override
?? ?public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
?? ??? ?super.getItemOffsets(outRect, view, parent, state);
?? ??? ?//設(shè)置間距
? ? ? ? outRect.bottom = 10;
? ? }
? ??
?? ?@Override
?? ?public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
? ? ?? ?super.onDraw(c, parent, state);
? ? ? ? Paint paint = new Paint();
? ? ? ? paint.setColor(Color.BLUE);
?? ??? ?//獲取item的數(shù)量
? ? ? ? int count = parent.getChildCount();
? ? ? ? //設(shè)置要繪制的矩形的left、right、top、bottom值
? ? ? ? int left = parent.getPaddingLeft();
? ? ? ? int right = parent.getWidth() - parent.getPaddingRight();
? ? ? ? for (int i = 0; i < count; i++){
? ? ? ? ?? ?//獲取對應(yīng)的item
?? ? ? ? ? ?View view = parent.getChildAt(i);
?? ? ? ? ? ?float top = view.getBottom();
?? ? ? ? ? ?float bottom = view.getBottom() + 10;
?? ? ? ? ? ?//繪制矩形
?? ? ? ? ? ?c.drawRect(left,top,right,bottom,paint);
? ? ?? ?}
?? ?}
}
recyclerView.addItemDecoration(new MyDecoration());

這里仍僅設(shè)置底部間距，并在onDraw()方法中實(shí)例化一個paint對象，設(shè)置顏色為藍(lán)色，用于最終的繪制。之后獲取item的數(shù)量，通過一個循環(huán)來繪制每一個item下方的分割線（當(dāng)然也可以通過某些條件判斷，以達(dá)到只繪制部分分割線的效果），這個分割線的頂部恰好是item的底部，分割線的底部則是item的底部+間距，所以有：

float top = view.getBottom();
float bottom = view.getBottom() + 10;
//繪制矩形
c.drawRect(left,top,right,bottom,paint);

實(shí)際效果圖：

onDrawOver()方法：

直接在剛才的基礎(chǔ)上，重寫onDrawOver()方法

@Override
public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
?? ?super.onDrawOver(c, parent, state);
? ? Paint paint = new Paint();
? ? paint.setColor(Color.RED);

? ? int count = parent.getChildCount();
? ? float left = parent.getRight() - 40;
? ? float right = parent.getRight();
? ? for (int i = 0; i < count; i++){
?? ? ? ?View view = parent.getChildAt(i);
?? ? ? ?float top = view.getTop();
?? ? ? ?//會覆蓋掉部分藍(lán)色分割線
?? ? ? ?float bottom = view.getBottom() + 5;
?? ? ? ?c.drawRect(left,top,right,bottom,paint);
?? ?}
}

之前說過，onDraw()方法繪圖的內(nèi)容將出現(xiàn)在視圖下方，而onDrawOver()方法的繪圖內(nèi)容會出現(xiàn)在視圖上方，因此這里的紅色分割線會略微覆蓋掉一部分之前的藍(lán)色分割線