web-dev-qa-db-ja.com

Android-グリッド内のアイテム間のRecyclerViewの間隔

私のAndroidアプリでは、RecyclerViewを使用してグリッド内のアイテムを表示するためにGridLayoutManagerを使用しています。GridViewでは、間隔を指定するために要素間では、horizo​​ntalSpacingおよびverticalSpacingプロパティを設定します。

それで、どのようにRecyclerViewでも同じことができますか？

androidgridviewandroid-recyclerviewandroid-gridview
14
Ernestina Juan

GridLayoutではテストしていませんが、LinearLayoutでは、各リスト項目のルートレイアウトにマージンを設定するだけです。すべてのアイテム間で同じスペースが必要な場合（たとえば8dp）、これを行う必要があります。

  1. Layout_padding 4 dpをRecyclerViewに設定します。
  2. Layout_margin 4 dpを各リスト項目に設定します。

この方法では、すべてのアイテムの周りに一定の8 dpがあります。

以下のコードは、8 dpの正しい間隔で画像を表示する水平なRecyclerViewです。

<!-- 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が必要であることがわかったため、スニペットを更新しました。

18
josemigallas

そのために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;
    }
}
5
ColdFire
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;           

        }

    }
0
Thejashwini Dev