Android - расстояние между элементами RecyclerView в сетке

В моем приложении Android я использую RecyclerView для отображения элементов в сетке с помощью GridLayoutManager. В GridView, чтобы указать расстояние между элементами, я бы установил свойства horizontalSpacing и verticalSpacing.

Итак, как я могу сделать то же самое в RecyclerView?

Ответ 1

Я не тестировал его с помощью GridLayout, но для LinearLayout я просто устанавливал маркер для каждого корневого макета listitem. Я предполагаю, что если вы хотите иметь одинаковое пространство между всеми элементами (скажем, 8dp), вам нужно будет сделать это:

  1. Установите layout_padding 4 dp в RecyclerView.
  2. Установите layout_margin 4 dp для каждого списка.

Таким образом, у вас будет постоянный 8 dp вокруг каждого элемента.


Код ниже представляет собой горизонтальное RecyclerView, которое отображает изображения с правильным интервалом 8 дп:

<!-- 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>

EDIT: Я понял, что в представлении элемента должна быть родительская ViewGroup, поэтому я обновил фрагмент.

Ответ 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;
}

Ответ 3

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;
}

Вышеприведенный ответ приведет к неравномерной ширине поля, где встречаются изображения.

Приведенное ниже решение дает ровные поля


 public void getItemOffsets (Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {        
        int position= parent.getChildAdapterPosition (view);
        int column = position% numberOfColumns;       
            outRect.left= margin-column*spacingPx/numberOfColumns;
            outRect.right= (column+1)* margin/numberOfColumns;
            outRect.top= margin;           

        }

    }