web-dev-qa-db-fra.com

Android - RecyclerVoir l'espacement entre les éléments d'une grille

Dans mon application Android, j'utilise RecyclerView pour afficher les éléments d'une grille à l'aide de GridLayoutManager. Dans un GridView, afin de spécifier l'espacement entre les éléments, je voudrais définir les propriétés horizontalSpacing et verticalSpacing .

Alors, comment puis-je faire la même chose sur une RecyclerView?

androidgridviewandroid-recyclerviewandroid-gridview
14
Ernestina Juan

Je ne l'ai pas testé avec GridLayout, mais pour LinearLayout, je règle simplement une marge sur la disposition racine de chaque élément de liste. Je suppose que si vous voulez le même espace entre tous les éléments (disons 8dp), vous devrez faire ceci:

  1. Définissez layout_padding 4 dp sur RecyclerView.
  2. Définissez layout_margin 4 dp sur chaque élément de liste.

De cette façon, vous auriez une constante de 8 dp autour de chaque article.

Le code ci-dessous est un RecyclerView horizontal qui affiche des images avec un espacement correct de 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>

EDIT: J'ai réalisé que la vue d'élément doit avoir un ViewGroup parent, alors j'ai mis à jour l'extrait de code.

15
josemigallas

vous devez utiliser un ItemDecorator pour cela:

comme ça:

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;
}
4
Cold Fire
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;
}

La réponse ci-dessus produira des largeurs de marge inégales où les images se rencontrent.

La solution ci-dessous produit des marges égales 

 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