RecyclerView查看项目装饰:间距和分隔线

Question

下面是我如何为RecyclerView项目设置间距。它被设计用于网格和列表。间隔很有效。

我搞不懂的是如何插入分隔线。如有任何帮助，我们将不胜感激。

旁注:如果你有比我现在做的更好的方法来实现间距，我会非常感激:)

public class ItemOffsetDecoration extends RecyclerView.ItemDecoration {

    private int numOfColumns;
    private int listSize;
    private int offsetInDp;
    private boolean isGridView;
    private boolean canScrollHorizontally;
    private boolean isBottomRow = false;


    public ItemOffsetDecoration(RecyclerView.LayoutManager manager, int listSize, int offsetInDp) {
        this(manager, 1, listSize, offsetInDp);
    }

    public ItemOffsetDecoration(RecyclerView.LayoutManager manager, int numOfColumns, int listSize, int offsetInDp) {
        this.numOfColumns = numOfColumns;
        this.listSize = listSize;
        this.offsetInDp = PixelConversionUtils.dpToPx(offsetInDp);

        this.isGridView = manager instanceof GridLayoutManager;
        this.canScrollHorizontally = manager.canScrollHorizontally();
    }

    @Override
    public void getItemOffsets(Rect outRect, View view,
                               RecyclerView parent, RecyclerView.State state) {

        // only do left/right spacing if grid or horizontal list
        if (isGridView || canScrollHorizontally) {
            outRect.left = offsetInDp;
            outRect.right = offsetInDp;
        }

        // only do top/bottom spacing if grid or vertical list
        if (isGridView || !canScrollHorizontally) {
            int pos = parent.getChildAdapterPosition(view);
            boolean isNotTopRow = pos >= numOfColumns;

            // Don't add top spacing to top row
            if (isNotTopRow) {
                outRect.top = offsetInDp;
            }

            int columnIndex = ((GridLayoutManager.LayoutParams) view.getLayoutParams()).getSpanIndex();

            if (pos >= (listSize - numOfColumns) && columnIndex == 0) {
                isBottomRow = true;
            }

            // Don't add bottom spacing to bottom row
            if (!isBottomRow && pos < (listSize - numOfColumns)) {
                outRect.bottom = offsetInDp;
            }
        }
    }
}

下面是我想要做的一个快速视觉效果：

以下是我所知道的:

这是我想要的：

Answer 1

哈哈……事实上，我已经试过这样做除法器了，虽然有点滑稽：首先让你用深颜色查看背景，然后让item_view背景为白色，然后为每个项目添加marginbottom-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_marginBottom="2dp"
    android:layout_height="wrap_content">

    <TextView
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent" />

</LinearLayout>

Answer 2

尝试放置以下 XML 代码段以获取分隔符：

<View android:layout_width="match_parent"
      android:layout_height="1dp"
      android:layout_marginLeft="72dp"
      android:layout_marginRight="16dp"
      android:background="123e4152"/>

您可以将它放在recyclerView的项目布局中您的项目下面。也可以调整页边距和背景来适应你的列表。

Answer 3

您可以通过以下方式实现所需的外观：

>

首先，创建一个可绘制的分隔符，在本例中，我使用了一个简单的形状，但您可以使用默认的线分隔符或任何其他可绘制的：

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <size android:height="2dp" />
    <size android:width="2dp" />
    <solid android:color="#000000" />
</shape>

其次，在＜code＞ItemOffsetDecoration＜/code＞中，声明可绘制并初始化它：

public class ItemOffsetDecoration extends RecyclerView.ItemDecoration {

    private Drawable mDivider;

    ...

    public ItemOffsetDecoration(...) {
        mDivider = ContextCompat.getDrawable(context, R.drawable.item_divider);
    }
}

第三，重写onDrawOver()方法:

public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    if (isGridView) {
        drawVerticalDivider(c, parent);
    } else {
        drawVerticalDivider(c, parent);
        drawHorizontalDivider(c, parent);
    }

}

其中＜code＞drawVerticalDivider（）

public void drawVerticalDivider(Canvas c, RecyclerView parent) {
    if (parent.getChildCount() == 0) return;

    final int childCount = parent.getChildCount();

    for (int i = 0; i < childCount; i++) {
        View child = parent.getChildAt(i);
        RecyclerView.LayoutParams params =
                (RecyclerView.LayoutParams) child.getLayoutParams();

        int left = child.getLeft() - params.leftMargin - offsetInDp;
        int right = child.getRight() + params.rightMargin + offsetInDp;
        int top = child.getBottom() + params.bottomMargin + offsetInDp;
        int bottom = top + mDivider.getIntrinsicHeight();
        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }
}

public void drawHorizontalDivider(Canvas c, RecyclerView parent) {
    final int childCount = parent.getChildCount();

    for (int i = 0; i < childCount; i++) {
        View child = parent.getChildAt(i);
        RecyclerView.LayoutParams params =
                (RecyclerView.LayoutParams) child.getLayoutParams();

        int left = child.getRight() + params.rightMargin + offsetInDp;
        int right = left + mDivider.getIntrinsicWidth();
        int top = child.getTop() - params.topMargin - offsetInDp;
        int bottom = child.getBottom() + params.bottomMargin + offsetInDp;
        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }
}

线性和网格布局管理器的结果: