2. 程式人生 > >Android自定義RecyclerView分割線，打造無邊緣分割線

Android自定義RecyclerView分割線，打造無邊緣分割線

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

前言：

 現在的RecyclerView幾乎已經完全取代ListView和GridView了，已經幾年沒使用ListView和GridView了，想當年還需要自己在getView方法中複用convertView。而現在的RecyclerView一出生就被設計成convertView複用的，儘管你不想複用（才怪）。RecyclerView功能如此強大的同時就會面臨許多需求，如給RecyclerView的item新增分割線，給RecyclerView新增下拉重新整理，上拉載入更多的功能等等。這篇文章就將為RecyclerView新增中間分割線做個簡單的介紹，其實給RecyclerView新增分割線並沒有你想象的那麼難，只要你肯動手，你就會擁有屬於你自己的分割線，想怎麼畫就怎麼畫。

實現效果圖：

這裡寫圖片描述   這裡寫圖片描述

為RecyclerView新增分割線需通過RecyclerView的addItemDecoration方法，addItemDecoration方法需接受一個ItemDecoration型別的物件。為此，我們首先需要自定義一個類繼承於ItemDecoration並實現getItemOffsets和SpaceItemDecoration兩個方法，步驟如下。

  1. 重寫getItemOffsets方法，給每個Item設定合適的偏移量（left，top，right，bottom）；
  2. 重寫onDraw方法，給每個item繪製分隔線（矩形）。

1. 重寫getItemOffsets

 這個方法在RecyclerView渲染item的時候通過getItemOffsets方法的Rect型別的引數outRect的left，top，right，bottom四個屬性為item設定相應的偏移量，如：

public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    super.getItemOffsets(outRect, view, parent, state);
    // 獲取位置
    int position = parent.getChildAdapterPosition
 
(view);
    view.setTag(position);

    RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
    if(layoutManager instanceof GridLayoutManager) {
        GridLayoutManager gridLayoutManager = (GridLayoutManager) layoutManager;
        GridLayoutManager.SpanSizeLookup spanSizeLookup = gridLayoutManager.getSpanSizeLookup();
        mSpanCount =  gridLayoutManager.getSpanCount();
        mMaxSpanGroupIndex = spanSizeLookup.getSpanGroupIndex(parent.getAdapter().getItemCount() - 1, mSpanCount);
        int spanSize = spanSizeLookup.getSpanSize(position);
        int spanIndex = spanSizeLookup.getSpanIndex(position, mSpanCount);
        int spanGroupIndex = spanSizeLookup.getSpanGroupIndex(position, mSpanCount);
        Log.d(TAG, "getItemOffsets: spanIndex:" + spanIndex);
        if (spanSize <mSpanCount && spanIndex != 0) {
            // 左邊需要偏移
            outRect.left = mSpace;
        }
        if(spanGroupIndex != 0) {
            outRect.top = mSpace;
        }
    }else if(layoutManager instanceof LinearLayoutManager){
        LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
        if(position != 0) {
            if (linearLayoutManager.getOrientation() == LinearLayoutManager.HORIZONTAL) {
                outRect.left = mSpace;
            } else {
                outRect.top = mSpace;
            }
        }
    }
}

 在上面getItemOffsets方法中首先通過RecyclerView的getChildAdapterPosition方法獲得item在Adapter中的位置並設定給它的tag屬性儲存下來，然後判斷佈局管理器的型別。如果佈局管理器是GridLayoutManager型別，那麼就需要判斷當前Item不是位於該行的第一個（spanIndex != 0）並且沒有佔據一行（spanSize < mSpanCount）的時候就需要給Item設定left偏移量為我們的Space，如果當Item所在的行不是第一行（spanGroupIndex != 0）的時候需要給Item設定top偏移。當佈局管理器為LinearLayoutManager的時候那就更簡單了，先判斷當前Item的position是不是第一個，如果不是第一個那麼再判斷佈局管理器是橫向還是縱向的，如果是橫向，那麼設定Item的left偏移量為Space，反之設定Item的top偏移量為Space。

2. 重寫onDraw，繪製分割線

 由於佈局管理器的不同，繪製分割線的方法也不同，所以首先需要先判斷一下佈局管理器的型別

**
* 繪製分割線
 * @param c
 * @param parent
 * @param state
 */
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDraw(c, parent, state);
    RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
    if(layoutManager instanceof GridLayoutManager) {
        drawSpace(c, parent);
    }else if(layoutManager instanceof LinearLayoutManager){
        LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
        if(linearLayoutManager.getOrientation() == LinearLayoutManager.HORIZONTAL){
            // 畫豎直分割線
            drawVertical(c,parent);
        }else{
            // 畫橫向分割線
            drawHorizontal(c,parent);
        }
    }
}
  • 如果佈局管理器為GridLayoutManager方法，那麼我們就通過drawSpace方法完成分割線的繪製，如下：
/**
 * 繪製分割線
 * @param canvas
 * @param parent
 */
private void drawSpace(Canvas canvas, RecyclerView parent) {
    GridLayoutManager gridLayoutManager = (GridLayoutManager) parent.getLayoutManager();
    int spanCount = gridLayoutManager.getSpanCount();
    GridLayoutManager.SpanSizeLookup spanSizeLookup = gridLayoutManager.getSpanSizeLookup();
    int childCount = parent.getChildCount();
    int top,bottom,left,right;
    for(int i=0;i<childCount;i++){
        // 繪製思路，以繪製bottom和left為主，top和right不繪製，需要判斷出當前的item是否位於邊緣，位於邊緣的item不繪製bottom和left，你懂得
        View child = parent.getChildAt(i);
        int position = (int) child.getTag();
        RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();

        int spanGroupIndex = spanSizeLookup.getSpanGroupIndex(position, spanCount);
        int spanSize = spanSizeLookup.getSpanSize(position);
        int spanIndex = spanSizeLookup.getSpanIndex(position, spanCount);
        // 畫bottom分割線,如果沒到達底部，繪製bottom
        if(spanGroupIndex < mMaxSpanGroupIndex) {
            top = child.getBottom() + layoutParams.bottomMargin;
            bottom = top + mSpace;
            left = child.getLeft() - layoutParams.leftMargin; // 不需要外邊緣
            right = child.getRight() + layoutParams.rightMargin + mSpace;
            canvas.drawRect(left, top, right, bottom, mPaint);
        }
        // 畫left分割線
       if (spanSize != mSpanCount && spanIndex!=0) {
            // 左邊需要分割線，開始繪製
           top = child.getTop() - layoutParams.topMargin;
           bottom = child.getBottom() + layoutParams.bottomMargin;
           left = child.getLeft() - layoutParams.leftMargin - mSpace;
           right = left + mSpace;
           canvas.drawRect(left, top, right, bottom, mPaint);
        }
    }
}

 這裡你需要理解的是繪製思路，我們先判斷當前Item所在的行是否位於最後一行，如果不是最後一行，那麼需要繪製底部分割線（橫向）。需要注意的是計算分割線的right需加上Space，不然豎直分割線和水平分割線交界處就會出現空白。噹噹前Item所佔的SpanSize不是整行，並且當前Item的所在的行標不為0的時候（spanSize != mSpanCount && spanIndex!=0）需要繪製豎直分割線。

  • 如果佈局管理器是LinearLayoutManager，那麼我們需要判斷佈局方法是縱向還是橫向，如果是縱向，那麼我們需要繪製橫線（底部），如果是橫向，那麼我們需要繪製豎線（右側）。
private void drawHorizontal(Canvas c, RecyclerView parent) {
    // 畫豎直分割線
    LinearLayoutManager linearLayoutManager = (LinearLayoutManager) parent.getLayoutManager();
    int top,bottom,left,right;
    for(int i=0;i<parent.getChildCount();i++){
        View child = parent.getChildAt(i);
        int position = (int) child.getTag();
        // 判斷是否位於邊緣
        if(position == linearLayoutManager.getItemCount()-1) continue;
        RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
        top = child.getBottom()+layoutParams.bottomMargin;
        bottom = top + mSpace;
        left = child.getLeft() - layoutParams.leftMargin;
        right = child.getRight() + layoutParams.rightMargin;
        c.drawRect(left,top,right,bottom,mPaint);
    }
}

private void drawVertical(Canvas c, RecyclerView parent) {
    // 畫豎直分割線
    LinearLayoutManager linearLayoutManager = (LinearLayoutManager) parent.getLayoutManager();
    int top,bottom,left,right;
    for(int i=0;i<parent.getChildCount();i++){
        View child = parent.getChildAt(i);
        int position = (int) child.getTag();
        // 判斷是否位於邊緣
        if(position == 0) continue;
        RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
        top = child.getTop()-layoutParams.topMargin;
        bottom = child.getBottom()+layoutParams.bottomMargin;
        left = child.getLeft() - layoutParams.leftMargin - mSpace;
        right = left + mSpace;
        c.drawRect(left,top,right,bottom,mPaint);
    }
}

到這裡為止，一個item內部無邊緣的分割線就繪製完了，整個繪製過程中需要理解的是我們繪製的思路以Item left偏移和top偏移以畫底部分割線和畫右側分割線並判斷Item是否位於邊緣而決定要不要繪製分割線達到無邊緣效果。如果你對於上面的偏移量的計算不是很清楚的話你不妨動手將上面的程式碼敲一遍並改變left，top，right，bottom看看效果，只有這樣你才能理解這幾個偏移量的含義。點此，github直通車，也檢視如下完整程式碼：

package com.lt.demo;

import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;


/**
 * Created by lt on 2018/4/9.
 */
public class SpaceItemDecoration extends RecyclerView.ItemDecoration{

    private static final java.lang.String TAG = "SpaceItemDecoration";
    private int mSpanCount;
    private int mSpace;
    private Paint mPaint;
    private int mMaxSpanGroupIndex;

    /**
     * 獲取Item的偏移量
     * @param outRect
     * @param view
     * @param parent
     * @param state
     */
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        // 獲取位置
        int position = parent.getChildAdapterPosition(view);
        view.setTag(position);

        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        if(layoutManager instanceof GridLayoutManager) {
            GridLayoutManager gridLayoutManager = (GridLayoutManager) layoutManager;
            GridLayoutManager.SpanSizeLookup spanSizeLookup = gridLayoutManager.getSpanSizeLookup();
            mSpanCount =  gridLayoutManager.getSpanCount();
            mMaxSpanGroupIndex = spanSizeLookup.getSpanGroupIndex(parent.getAdapter().getItemCount() - 1, mSpanCount);
            int spanSize = spanSizeLookup.getSpanSize(position);
            int spanIndex = spanSizeLookup.getSpanIndex(position, mSpanCount);
            int spanGroupIndex = spanSizeLookup.getSpanGroupIndex(position, mSpanCount);
            Log.d(TAG, "getItemOffsets: spanIndex:" + spanIndex);
            if (spanSize <mSpanCount && spanIndex != 0) {
                // 左邊需要偏移
                outRect.left = mSpace;
            }
            if(spanGroupIndex != 0) {
                outRect.top = mSpace;
            }
        }else if(layoutManager instanceof LinearLayoutManager){
            LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
            if(position != 0) {
                if (linearLayoutManager.getOrientation() == LinearLayoutManager.HORIZONTAL) {
                    outRect.left = mSpace;
                } else {
                    outRect.top = mSpace;
                }
            }
        }
    }

    public SpaceItemDecoration(int space, int spaceColor) {
        this.mSpace = space;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(spaceColor);
        mPaint.setStyle(Paint.Style.FILL);
    }

    /**
     * 繪製分割線
     * @param c
     * @param parent
     * @param state
     */
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        if(layoutManager instanceof GridLayoutManager) {
            drawSpace(c, parent);
        }else if(layoutManager instanceof LinearLayoutManager){
            LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
            if(linearLayoutManager.getOrientation() == LinearLayoutManager.HORIZONTAL){
                // 畫豎直分割線
                drawVertical(c,parent);
            }else{
                // 畫橫向分割線
                drawHorizontal(c,parent);
            }
        }
    }

    private void drawHorizontal(Canvas c, RecyclerView parent) {
        // 畫豎直分割線
        LinearLayoutManager linearLayoutManager = (LinearLayoutManager) parent.getLayoutManager();
        int top,bottom,left,right;
        for(int i=0;i<parent.getChildCount();i++){
            View child = parent.getChildAt(i);
            int position = (int) child.getTag();
            // 判斷是否位於邊緣
            if(position == linearLayoutManager.getItemCount()-1) continue;
            RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
            top = child.getBottom()+layoutParams.bottomMargin;
            bottom = top + mSpace;
            left = child.getLeft() - layoutParams.leftMargin;
            right = child.getRight() + layoutParams.rightMargin;
            c.drawRect(left,top,right,bottom,mPaint);
        }
    }

    private void drawVertical(Canvas c, RecyclerView parent) {
        // 畫豎直分割線
        LinearLayoutManager linearLayoutManager = (LinearLayoutManager) parent.getLayoutManager();
        int top,bottom,left,right;
        for(int i=0;i<parent.getChildCount();i++){
            View child = parent.getChildAt(i);
            int position = (int) child.getTag();
            // 判斷是否位於邊緣
            if(position == 0) continue;
            RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
            top = child.getTop()-layoutParams.topMargin;
            bottom = child.getBottom()+layoutParams.bottomMargin;
            left = child.getLeft() - layoutParams.leftMargin - mSpace;
            right = left + mSpace;
            c.drawRect(left,top,right,bottom,mPaint);
        }
    }

    /**
     * 繪製分割線
     * @param canvas
     * @param parent
     */
    private void drawSpace(Canvas canvas, RecyclerView parent) {
        GridLayoutManager gridLayoutManager = (GridLayoutManager) parent.getLayoutManager();
        int spanCount = gridLayoutManager.getSpanCount();
        GridLayoutManager.SpanSizeLookup spanSizeLookup = gridLayoutManager.getSpanSizeLookup();
        int childCount = parent.getChildCount();
        int top,bottom,left,right;
        for(int i=0;i<childCount;i++){
            // 繪製思路，以繪製bottom和left為主，top和right不繪製，需要判斷出當前的item是否位於邊緣，位於邊緣的item不繪製bottom和left，你懂得
            View child = parent.getChildAt(i);
            int position = (int) child.getTag();
            RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();

            int spanGroupIndex = spanSizeLookup.getSpanGroupIndex(position, spanCount);
            int spanSize = spanSizeLookup.getSpanSize(position);
            int spanIndex = spanSizeLookup.getSpanIndex(position, spanCount);
            // 畫bottom分割線,如果沒到達底部，繪製bottom
            if(spanGroupIndex < mMaxSpanGroupIndex) {
                top = child.getBottom() + layoutParams.bottomMargin;
                bottom = top + mSpace;
                left = child.getLeft() - layoutParams.leftMargin; // 不需要外邊緣
                right = child.getRight() + layoutParams.rightMargin + mSpace;
                canvas.drawRect(left, top, right, bottom, mPaint);
            }
            // 畫left分割線
           if (spanSize != mSpanCount && spanIndex!=0) {
                // 左邊需要分割線，開始繪製
               top = child.getTop() - layoutParams.topMargin;
               bottom = child.getBottom() + layoutParams.bottomMargin;
               left = child.getLeft() - layoutParams.leftMargin - mSpace;
               right = left + mSpace;
               canvas.drawRect(left, top, right, bottom, mPaint);
            }
        }
    }
}

相關推薦

Android自定義RecyclerView分割線，打造無邊緣分割線

前言：  現在的RecyclerView幾乎已經完全取代ListView和GridView了，已經幾年沒使用ListView和GridView了，想當年還需要自己在getView方法中複用convertView。而現在的RecyclerView一出生就被設計成

織夢dede自定義內容分頁，datalist運用實例

專家 list 默認 記錄 ext 列表 include 分頁 讀取 在/plus文件夾中新建一個ceshi.php文件。。<?php require(dirname(__FILE__)."/../include/common.inc.php"); require_o

Android 自定義陰影Shadow顏色，大小等樣式

最近在專案碰到一個比較頭疼的專案，設計師需要給ui圖中的一些按鈕之類的東西新增陰影。乍一看設計圖，這沒啥嘛，咱們Android中不是有這個屬性嘛，於是擼起袖子開搞： <TextView android:id="@+id/btn_test_perf

Android 自定義數字選擇器，可以根據自己的需求更改

實現效果如下： 還是以往的套路，先把那些專案所需要的給展示出來。 values下的資料夾，attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styl

android 自定義控制元件邊框，顏色，線條，圓滑程度

1，在drawable資料夾中右鍵，new->drawableresource file，彈出一個視窗。 2，將selector改為shape，輸入,該xml的名字table_shape，點選確定，接下來就將原來的控制元件變成圓滑控制元件。（drawable/ tab

android自定義圓形進度條，實現動態畫圓效果

自定義圓形進度條效果圖如下：應用場景如動態顯示分數等。 view的自定義屬性如下attr.xml <?xml version="1.0" encoding="UTF-8"?> <resources> <declare-style

Android 自定義多行EditText，監聽最多輸入字元數字顯示

帶數字指示的EditText 定義所需屬性attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="LinesEditVi

android 自定義類似91遊，360應用內懸浮球（不使用系統懸浮框）

專案需要，製作類似360，UC類似遊戲內的懸浮球 1.開始使用的是系統的懸浮，新增系統許可權android.permission.SYSTEM_ALERT_WINDOW，獲取windowManager , 設定佈局引數，新增view來實現， 優點：處於系統最上層，一次新增，

Android 自定義RatingBar控制元件，顯示不全問題

最近專案要用到 自定義RatingBar控制元件 但是自定義好了樣式發現，星星只顯示一半，於是在網上找各種解決方法。 最後竟然是直接把資源圖片，移動到較高解析度的資料夾裡面。 我的解決做法如下，如果有更好的方法，請留言告知。 一，先寫一個drawable，設定好backg

Android自定義圖片選取器，類似微信樣式，自帶裁剪功能，適配Android7.0

不知道為什麼README文件在github上排版格式全亂了，所以寫個部落格當文件看吧 ImagePicker 這是一個Android使用的自定義圖片選擇器，眾所周知，Android碎片化問題嚴重，其中就包括圖片選擇的問題，呼叫系統相簿選擇圖片或裁剪圖片時

Android 自定義RecyclerView 實現真正的Gallery效果

上一篇部落格我使用自定義HorizontalScrollView寫了一個具有HorizontalScrollView效果和ViewPager特性的橫向圖片輪播，詳見：Android 自定義 HorizontalScrollView 打造再多圖片（控制元件）也不怕 OOM 的橫

Android 自定義View高階特效，神奇的貝塞爾曲線

初始化引數 private static final String TAG = "BIZIER"; private static final int LINEWIDTH = 5; private static final int POINTWIDTH = 10; private Context mContex

Android自定義View初體驗，實現圓形TextView的三種方式

自定義view對我來說一直是比較恐懼的，但是萬事開頭難，今天總結一下自己實現圓形TextView的三種方式。 首先來說一下自定義view的三種方式： 一，自繪控制元件： 自繪控制元件就是說介面展示的內容就是我們在ondraw（）方法中繪製出來的，繼承Vie

Android自定義圓弧進度條，手動控制進度

一.展示Android開發中由於需求的不同會遇到各種各樣的進度條，本文實現一個自定義手動控制的進度條，先來看一下效果：通過按鈕控制進度條進度2.通過滑動進度條上的按鈕控制進度二.實現如上展示效果可見，圓弧所跨弧度為270，其中可將繪製分為6個部分：進度條的圓弧指標的圖片圓弧上

Android 自定義進度條ColorfulProgressBar，原理簡單、效果很棒

Android-ColorfulProgressBar 簡介: 這是一個自定義的Progressbar，效果看著還行吧，滾動的雙色斜條作為進度條，有點類似Bootstrap風格。原生Progress的基本操作都有，自行觀摩我的原始碼吧，挺簡單的。

Android自定義View的屬性，attr format取值型別

原文連結 1. reference：參考某一資源ID。 （1）屬性定義： <declare-styleable name = "名稱"> <attr name = "background" format = "reference" />

Android-自定義類似excel表格，雙向滑動的ListView

效果圖： 主要程式碼： /** * Created by monty on 2017/8/31. */ public class PanelListLayout extends FrameLayout { private static

Android自定義View之IndicatorView，顯示當前tab頁所處位置的View

概述 Android IndicatorView的靈感來源於SlidingTabView，雖然有句“不重複”造輪子在先，本著練手的目的，還是寫了一個功能較為簡單的類似view。 其比SlidingTabView在功能上欠缺的一點是：暫時沒有新增“當內容顯示不

Android自定義Seekbar滑動條，Pop提示跟隨滑動按鈕一起滑動

由於專案需要做出此效果，自定義寫了一個。 效果圖 思路： 原始的seekbar只有滑動條並沒有下方的提示文字，所以我們必須要繼承Seekbar重寫這個控制元件。 程式碼： 在values資料夾下新建attrs.xml,用於設定跟隨滑動按鈕的文字大小，顏色，背景。

Android自定義圓角矩形ImageView，支援Glide載入圖片及顏色填充

前言：  之前用到圓角的情況大都是自定義一個shape背景drawable及用到v7包下的CardView包裹View實現圓角矩形效果，還有就是在使用者圓形頭像的時候需要使用到圓角矩形（圓形可以看做是特殊的圓角矩形），諸如Button，Editext，Text