ItemDecoration 是 RecyclerView 組件的一個非常有用的功能，用于添加自定義的裝飾項（如分隔線、邊距、背景等）到 RecyclerView 的每個 item 之間或周圍。12G28資訊網——每日最新資訊28at.com

recyclerView.addItemDecoration()

ItemDecoration主要的三個方法：12G28資訊網——每日最新資訊28at.com

1. onDraw(Canvas c, RecyclerView parent, RecyclerView.State state): 在 RecyclerView 的 canvas 上繪制自定義的裝飾項，通常用于繪制分隔線或背景。
2. onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state): 與 onDraw 類似，但繪制的內容會出現在 item 的視圖之上。在 item 視圖上方繪制內容（如高亮或選擇效果），可以使用這個方法。
3. getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state): 設置 item 的邊距。outRect 參數是一個 Rect 對象，可以設置它的 left、top、right 和 bottom 屬性來定義 item 的額外空間。這些額外的空間會用于繪制分隔線或邊距。

圖片12G28資訊網——每日最新資訊28at.com

• 圖1：代表了getItemOffsets()，可以實現類似padding的效果。
• 圖2：代表了onDraw()，可以實現類似繪制背景的效果，內容在上面。
• 圖3：代表了onDrawOver()，可以繪制在內容的上面，覆蓋內容。

分割線

實現分割線效果需要 getItemOffsets()和 onDraw()2個方法，首先用 getItemOffsets給item下方空出一定高度的空間（例子中是1dp），然后用onDraw繪制這個空間。12G28資訊網——每日最新資訊28at.com

public class SimpleDividerDecoration extends RecyclerView.ItemDecoration {    private int dividerHeight;    private Paint dividerPaint;    public SimpleDividerDecoration(Context context) {        dividerPaint = new Paint();        dividerPaint.setColor(context.getResources().getColor(R.color.colorAccent));        dividerHeight = context.getResources().getDimensionPixelSize(R.dimen.divider_height);    }    @Override    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {        super.getItemOffsets(outRect, view, parent, state);        outRect.bottom = dividerHeight;    }    @Override    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {        int childCount = parent.getChildCount();        int left = parent.getPaddingLeft();        int right = parent.getWidth() - parent.getPaddingRight();        for (int i = 0; i < childCount - 1; i++) {            View view = parent.getChildAt(i);            float top = view.getBottom();            float bottom = view.getBottom() + dividerHeight;            c.drawRect(left, top, right, bottom, dividerPaint);        }    }}

圖片12G28資訊網——每日最新資訊28at.com

標簽

標簽都是覆蓋在內容之上的，可以用onDrawOver()來實現，這里簡單實現一個顏色標簽。12G28資訊網——每日最新資訊28at.com

public class LeftAndRightTagDecoration extends RecyclerView.ItemDecoration {    private int tagWidth;    private Paint leftPaint;    private Paint rightPaint;    public LeftAndRightTagDecoration(Context context) {        leftPaint = new Paint();        leftPaint.setColor(context.getResources().getColor(R.color.colorAccent));        rightPaint = new Paint();        rightPaint.setColor(context.getResources().getColor(R.color.colorPrimary));        tagWidth = context.getResources().getDimensionPixelSize(R.dimen.tag_width);    }    @Override    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {        super.onDrawOver(c, parent, state);        int childCount = parent.getChildCount();        for (int i = 0; i < childCount; i++) {            View child = parent.getChildAt(i);            int pos = parent.getChildAdapterPosition(child);            boolean isLeft = pos % 2 == 0;            if (isLeft) {                float left = child.getLeft();                float right = left + tagWidth;                float top = child.getTop();                float bottom = child.getBottom();                c.drawRect(left, top, right, bottom, leftPaint);            } else {                float right = child.getRight();                float left = right - tagWidth;                float top = child.getTop();                float bottom = child.getBottom();                c.drawRect(left, top, right, bottom, rightPaint);            }        }    }}

圖片12G28資訊網——每日最新資訊28at.com

ItemDecoration組合

ItemDecoration是可以疊加的，可以將多個效果通過addItemDecoration方法疊加，將上面兩種效果疊加。12G28資訊網——每日最新資訊28at.com

recyclerView.addItemDecoration(new LeftAndRightTagDecoration(this));recyclerView.addItemDecoration(new SimpleDividerDecoration(this));

圖片12G28資訊網——每日最新資訊28at.com

Section分組

定義接口用來進行數據分組和獲取首字母，重寫getItemOffsets()和onDraw()方法，并根據數據進行分組處理。12G28資訊網——每日最新資訊28at.com

public interface DecorationCallback {        long getGroupId(int position);        String getGroupFirstLine(int position);    }

public class SectionDecoration extends RecyclerView.ItemDecoration {    private static final String TAG = "SectionDecoration";    private DecorationCallback callback;    private TextPaint textPaint;    private Paint paint;    private int topGap;    private Paint.FontMetrics fontMetrics;    public SectionDecoration(Context context, DecorationCallback decorationCallback) {        Resources res = context.getResources();        this.callback = decorationCallback;        paint = new Paint();        paint.setColor(res.getColor(R.color.colorAccent));        textPaint = new TextPaint();        textPaint.setTypeface(Typeface.DEFAULT_BOLD);        textPaint.setAntiAlias(true);        textPaint.setTextSize(80);        textPaint.setColor(Color.BLACK);        textPaint.getFontMetrics(fontMetrics);        textPaint.setTextAlign(Paint.Align.LEFT);        fontMetrics = new Paint.FontMetrics();        topGap = res.getDimensionPixelSize(R.dimen.sectioned_top);//32dp    }    @Override    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {        super.getItemOffsets(outRect, view, parent, state);        int pos = parent.getChildAdapterPosition(view);        Log.i(TAG, "getItemOffsets：" + pos);        long groupId = callback.getGroupId(pos);        if (groupId < 0) return;        if (pos == 0 || isFirstInGroup(pos)) {//同組的第一個才添加padding            outRect.top = topGap;        } else {            outRect.top = 0;        }    }    @Override    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {        super.onDraw(c, parent, state);        int left = parent.getPaddingLeft();        int right = parent.getWidth() - parent.getPaddingRight();        int childCount = parent.getChildCount();        for (int i = 0; i < childCount; i++) {            View view = parent.getChildAt(i);            int position = parent.getChildAdapterPosition(view);            long groupId = callback.getGroupId(position);            if (groupId < 0) return;            String textLine = callback.getGroupFirstLine(position).toUpperCase();            if (position == 0 || isFirstInGroup(position)) {                float top = view.getTop() - topGap;                float bottom = view.getTop();                c.drawRect(left, top, right, bottom, paint);//繪制紅色矩形                c.drawText(textLine, left, bottom, textPaint);//繪制文本            }        }    }        private boolean isFirstInGroup(int pos) {        if (pos == 0) {            return true;        } else {            long prevGroupId = callback.getGroupId(pos - 1);            long groupId = callback.getGroupId(pos);            return prevGroupId != groupId;        }    }    public interface DecorationCallback {        long getGroupId(int position);        String getGroupFirstLine(int position);    }}

recyclerView.addItemDecoration(new SectionDecoration(this, new SectionDecoration.DecorationCallback() {    @Override    public long getGroupId(int position) {        return Character.toUpperCase(dataList.get(position).getName().charAt(0));    }    @Override    public String getGroupFirstLine(int position) {        return dataList.get(position).getName().substring(0, 1).toUpperCase();    }}));

StickyHeader

頭部吸頂效果，header不動肯定是要繪制item內容之上，需要重寫onDrawOver()方法，其和Section實現一樣。12G28資訊網——每日最新資訊28at.com

public class PinnedSectionDecoration extends RecyclerView.ItemDecoration {    private static final String TAG = "PinnedSectionDecoration";    private DecorationCallback callback;    private TextPaint textPaint;    private Paint paint;    private int topGap;    private Paint.FontMetrics fontMetrics;    public PinnedSectionDecoration(Context context, DecorationCallback decorationCallback) {        Resources res = context.getResources();        this.callback = decorationCallback;        paint = new Paint();        paint.setColor(res.getColor(R.color.colorAccent));        textPaint = new TextPaint();        textPaint.setTypeface(Typeface.DEFAULT_BOLD);        textPaint.setAntiAlias(true);        textPaint.setTextSize(80);        textPaint.setColor(Color.BLACK);        textPaint.getFontMetrics(fontMetrics);        textPaint.setTextAlign(Paint.Align.LEFT);        fontMetrics = new Paint.FontMetrics();        topGap = res.getDimensionPixelSize(R.dimen.sectioned_top);    }    @Override    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {        super.getItemOffsets(outRect, view, parent, state);        int pos = parent.getChildAdapterPosition(view);        long groupId = callback.getGroupId(pos);        if (groupId < 0) return;        if (pos == 0 || isFirstInGroup(pos)) {            outRect.top = topGap;        } else {            outRect.top = 0;        }    }    @Override    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {        super.onDrawOver(c, parent, state);        int itemCount = state.getItemCount();        int childCount = parent.getChildCount();        int left = parent.getPaddingLeft();        int right = parent.getWidth() - parent.getPaddingRight();        float lineHeight = textPaint.getTextSize() + fontMetrics.descent;        long preGroupId, groupId = -1;        for (int i = 0; i < childCount; i++) {            View view = parent.getChildAt(i);            int position = parent.getChildAdapterPosition(view);            preGroupId = groupId;            groupId = callback.getGroupId(position);            if (groupId < 0 || groupId == preGroupId) continue;            String textLine = callback.getGroupFirstLine(position).toUpperCase();            if (TextUtils.isEmpty(textLine)) continue;            int viewBottom = view.getBottom();            float textY = Math.max(topGap, view.getTop());            if (position + 1 < itemCount) { //下一個和當前不一樣移動當前                long nextGroupId = callback.getGroupId(position + 1);                if (nextGroupId != groupId && viewBottom < textY ) {//組內最后一個view進入了header                    textY = viewBottom;                }            }            c.drawRect(left, textY - topGap, right, textY, paint);            c.drawText(textLine, left, textY, textPaint);        }    }}

圖片12G28資訊網——每日最新資訊28at.com

12G28資訊網——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-87958-0.htmlRecyclerView中ItemDecoration的精妙用法，實現自定義分隔線、邊距和背景效果

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 從簡單中窺見高端，徹底搞懂任務可中斷機制與任務插隊機制

下一篇： 總結CSS中各個屬性使用百分比（%）基準值