Android - 网格中项目之间的RecyclerView间距

Question

在我的Android应用程序中,我使用a RecyclerView来显示网格中的项目GridLayoutManager.在GridView中,为了指定元素之间的间距,我将设置horizo​​ntalSpacing和verticalSpacing属性.

那么,我怎么能这样做RecyclerView呢？

Answer 1

我没有使用GridLayout测试它,但对于LinearLayout,我只是为每个listitem的根布局设置一个边距.我想如果你想要所有项目之间的空间相同(比方说8dp),你必须这样做:

1. 将layout_padding 4 dp设置为RecyclerView.
2. 将layout_margin 4 dp设置为每个listitem.

这样你就可以在每个项目周围保持8 dp的恒定.

下面的代码是一个水平的RecyclerView,它显示正确间距为8 dp的图像:

<!-- fragment_layout.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layoutManager="android.support.v7.widget.LinearLayoutManager"
        tools:listitem="@layout/list_item" />

</LinearLayout>

<!-- list_item.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:layout_margin="4dp">

    <ImageView
        android:layout_width="@dimen/thumbnail_size"
        android:layout_height="@dimen/thumbnail_size"
        android:contentDescription="@string/image_content_desc" />

</LinearLayout>

编辑:我意识到项目视图需要有一个父ViewGroup,所以我更新了片段.

Answer 2

您必须为此使用一个ItemDecorator：

像这样：

public class EqualSpaceItemDecoration extends RecyclerView.ItemDecoration {

    private final int mSpaceHeight;

    public EqualSpaceItemDecoration(int mSpaceHeight) {
        this.mSpaceHeight = mSpaceHeight;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
                               RecyclerView.State state) {
        outRect.bottom = mSpaceHeight;
        outRect.top = mSpaceHeight;
        outRect.left = mSpaceHeight;
        outRect.right = mSpaceHeight;
    }
}

Answer 3

在 中RecyclerView，可以使用 添加项目之间的间距ItemDecoration。\n在此之前，让我们做一些数学运算来找出列表项周围的边距。

\n

在这里我们得到等间距的区域。在每个区域中，我们必须找到它们的边距并将其返回到outRect. 为了等间距和等大小，如果你正确地进行数学计算，你会发现这些偏移值不是常量，它们根据列索引和行索引而改变。让我们推导出偏移值的方程。

\n

有外缘

\n

在第一种情况下，我们考虑边缘周围的边距。

\n

\n

For 0 and 1,\nd + w + a = d \xe2\x88\x92 a + w + c\nc = 2a\n\nFor 0 and 2,\nd + w + a = d \xe2\x88\x92 c + w + e\ne = a + c\ne = 3a\n\nIf you see the pattern here,\nright = a, 2a, 3a, ... , (n + 1) \xc3\x97 a\nright = (n\xe1\xb5\xa2 + 1) \xc3\x97 a\n\nna = d\na = d \xc3\xb7 n\nright = (n\xe1\xb5\xa2 + 1) \xc3\x97 d \xc3\xb7 n\n\nPattern of left side,\nleft = d, d \xe2\x88\x92 a, d \xe2\x88\x92 2a, d \xe2\x88\x92 3a, ... , d \xe2\x88\x92 na\nleft = d \xe2\x88\x92 n\xe1\xb5\xa2 \xc3\x97 a\nleft = d \xe2\x88\x92 n\xe1\xb5\xa2 \xc3\x97 d \xc3\xb7 n\n\nn\xe1\xb5\xa2 - Column index\n

\n

无外缘

\n

在这里，我们在不考虑边缘的情况下进行数学计算。

\n

\n

For 0 and 1,\nw + a = d \xe2\x88\x92 a + w + c\nc = 2a \xe2\x88\x92 d\n\nFor 0 and 2,\nw + a = d \xe2\x88\x92 c + w + e\ne = 3a \xe2\x88\x92 2d\n\nThe pattern here is,\nright = a, 2a \xe2\x88\x92 d, 3a \xe2\x88\x92 2d, ... , (n + 1) \xc3\x97 a - nd\nright = (n\xe1\xb5\xa2 + 1) \xc3\x97 a - n\xe1\xb5\xa2d\n\n(n + 1) \xc3\x97 a \xe2\x88\x92 nd = 0\na = nd \xc3\xb7 (n + 1)\n\n\xe2\x88\xb4 right = d \xe2\x88\x92 d \xc3\x97 (n\xe1\xb5\xa2 + 1) \xc3\xb7 q\nq = n + 1\nq - Column count\nn\xe1\xb5\xa2 - Column index\n\nleft = 0, d \xe2\x88\x92 a, 2(d \xe2\x88\x92 a), ... , n(d \xe2\x88\x92 a)\nleft = n\xe1\xb5\xa2(d \xe2\x88\x92 a)\nleft = n\xe1\xb5\xa2 \xc3\x97 d \xc3\xb7 q\n

\n

让我们为此编写代码......

\n

class SpacingItemDecoration(\n    private val spacing: Int,\n    private val includeEdge: Boolean,\n    private val headerRowCount: Int = 0\n) : RecyclerView.ItemDecoration() {\n\n    override fun getItemOffsets(\n        outRect: Rect,\n        view: View,\n        parent: RecyclerView,\n        state: RecyclerView.State\n    ) {\n        val columnCount = getColumnCount(parent)\n        val position = parent.getChildAdapterPosition(view) - headerRowCount * columnCount\n        if (position >= 0) {\n            val rowCount = getRowCount(parent, columnCount)\n            val orientation = getOrientation(parent)\n            val columnIndex = position % columnCount\n            val rowIndex = position / columnCount\n            if (includeEdge) {\n                when (orientation) {\n                    RecyclerView.VERTICAL -> {\n                        outRect.left = getStartOffsetWithEdge(spacing, columnIndex, columnCount)\n                        outRect.right = getEndOffsetWithEdge(spacing, columnIndex, columnCount)\n                        outRect.top = getStartOffsetWithEdge(spacing, rowIndex, rowCount)\n                        outRect.bottom = getEndOffsetWithEdge(spacing, rowIndex, rowCount)\n                    }\n                    RecyclerView.HORIZONTAL -> {\n                        outRect.top = getStartOffsetWithEdge(spacing, columnIndex, columnCount)\n                        outRect.bottom = getEndOffsetWithEdge(spacing, columnIndex, columnCount)\n                        outRect.left = getStartOffsetWithEdge(spacing, rowIndex, rowCount)\n                        outRect.right = getEndOffsetWithEdge(spacing, rowIndex, rowCount)\n                    }\n                }\n            } else {\n                when (orientation) {\n                    RecyclerView.VERTICAL -> {\n                        outRect.left = getStartOffsetWithoutEdge(spacing, columnIndex, columnCount)\n                        outRect.right = getEndOffsetWithoutEdge(spacing, columnIndex, columnCount)\n                        outRect.top = getStartOffsetWithoutEdge(spacing, rowIndex, rowCount)\n                        outRect.bottom = getEndOffsetWithoutEdge(spacing, rowIndex, rowCount)\n                    }\n                    RecyclerView.HORIZONTAL -> {\n                        outRect.top = getStartOffsetWithoutEdge(spacing, columnIndex, columnCount)\n                        outRect.bottom = getEndOffsetWithoutEdge(spacing, columnIndex, columnCount)\n                        outRect.left = getStartOffsetWithoutEdge(spacing, rowIndex, rowCount)\n                        outRect.right = getEndOffsetWithoutEdge(spacing, rowIndex, rowCount)\n                    }\n                }\n            }\n        } else {\n            outRect.left = 0\n            outRect.right = 0\n            outRect.top = 0\n            outRect.bottom = 0\n        }\n    }\n\n    private fun getColumnCount(parent: RecyclerView) = when (val layoutManager = parent.layoutManager) {\n        is GridLayoutManager -> layoutManager.spanCount\n        is StaggeredGridLayoutManager -> layoutManager.spanCount\n        else -> 1\n    }\n\n    private fun getRowCount(parent: RecyclerView, columnCount: Int) =\n        parent.adapter?.itemCount?.div(columnCount)?.minus(headerRowCount)\n\n    private fun getOrientation(parent: RecyclerView) = when (val layoutManager = parent.layoutManager) {\n        is LinearLayoutManager -> layoutManager.orientation\n        is GridLayoutManager -> layoutManager.orientation\n        is StaggeredGridLayoutManager -> layoutManager.orientation\n        else -> RecyclerView.VERTICAL\n    }\n\n    private fun getStartOffsetWithEdge(spacing: Int, columnIndex: Int, columnCount: Int?): Int {\n        if (columnCount == null) return spacing\n        return spacing - spacing * columnIndex / columnCount\n    }\n\n    private fun getEndOffsetWithEdge(spacing: Int, columnIndex: Int, columnCount: Int?): Int {\n        if (columnCount == null) return 0\n        return spacing * (columnIndex + 1) / columnCount\n    }\n\n    private fun getStartOffsetWithoutEdge(spacing: Int, columnIndex: Int, columnCount: Int?): Int {\n        if (columnCount == null) return 0\n        return spacing * columnIndex / columnCount\n    }\n\n    private fun getEndOffsetWithoutEdge(spacing: Int, columnIndex: Int, columnCount: Int?): Int {\n        if (columnCount == null) return spacing\n        return spacing - spacing * (columnIndex + 1) / columnCount\n    }\n\n}\n

\n