Comment ajouter des séparateurs et des espaces entre les articles dans RecyclerView?

ceci est un exemple de la façon dont il aurait pu être fait précédemment dans la classe ListView , en utilisant le divider et dividerHeight paramètres:

<ListView
    android:id="@+id/activity_home_list_view"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:divider="@android:color/transparent"
    android:dividerHeight="8dp"/>

cependant, je ne vois pas une telle possibilité dans la classe RecyclerView .

<android.support.v7.widget.RecyclerView
    android:id="@+id/activity_home_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"/>

dans ce cas, est-il correct de définir les marges et / ou d'ajouter une vue de diviseur personnalisée directement dans la mise en page d'un élément de liste ou y a-t-il un meilleur moyen d'atteindre mon but?

714
demandé sur vuhung3990 2014-07-08 00:01:19

30 réponses

Octobre 2016 Mise À Jour

la version 25.0.0 de Android Support Library introduit DividerItemDecoration classe:

Divideritemdécoration is a RecyclerView.Élément decoration qui peut être utilisé comme diviseur entre les éléments D'un gestionnaire de lignes. Il supporte les orientations Horizontales et verticales.

Utilisation:

DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
    layoutManager.getOrientation());
recyclerView.addItemDecoration(dividerItemDecoration);

réponse précédente

certaines réponses utilisent des méthodes qui sont devenues obsolètes, ou ne donnent pas une solution complète, donc j'ai essayé de faire un résumé court, à jour.


contrairement à ListView , la classe RecyclerView n'a aucun paramètre lié aux diviseurs. Au lieu de cela, vous devez étendre ItemDecoration , a RecyclerView s 'intérieur de la classe:

un Itemdécoration permet à l'application d'ajouter un dessin spécial et mise en page offset à des vues d'article spécifiques à partir de l'ensemble de données de l'adaptateur. Cela peut être utile pour dessiner des séparateurs entre les éléments, les points saillants, les limites de regroupement visuel et plus encore.

toutes les déclinaisons D'items sont dessinées dans l'ordre où elles ont été ajoutées, avant les vues d'items (dans onDraw()) et après les items (dans onDrawOver (Toile, RecyclerView, RecyclerView.État.)

Espacement Vertical ItemDecoration

étendre ItemDecoration , ajouter constructeur personnalisé qui prend la hauteur de l'espace comme paramètre et remplacer getItemOffsets() méthode:

public class VerticalSpaceItemDecoration extends RecyclerView.ItemDecoration {

    private final int verticalSpaceHeight;

    public VerticalSpaceItemDecoration(int verticalSpaceHeight) {
        this.verticalSpaceHeight = verticalSpaceHeight;
    }

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

si vous ne voulez pas insérer d'espace sous le dernier article, ajouter la condition suivante:

if (parent.getChildAdapterPosition(view) != parent.getAdapter().getItemCount() - 1) {
            outRect.bottom = verticalSpaceHeight;
}

Note: Vous pouvez également modifier outRect.top , outRect.left et outRect.right propriétés pour l'effet désiré.

Diviseur ItemDecoration

étendre ItemDecoration et remplacer onDraw() méthode:

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};

    private Drawable divider;

    /**
     * Default divider will be used
     */
    public DividerItemDecoration(Context context) {
        final TypedArray styledAttributes = context.obtainStyledAttributes(ATTRS);
        divider = styledAttributes.getDrawable(0);
        styledAttributes.recycle();
    }

    /**
     * Custom divider will be used
     */
    public DividerItemDecoration(Context context, int resId) {
        divider = ContextCompat.getDrawable(context, resId);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            int top = child.getBottom() + params.bottomMargin;
            int bottom = top + divider.getIntrinsicHeight();

            divider.setBounds(left, top, right, bottom);
            divider.draw(c);
        }
    }
}

vous pouvez soit appeler le premier constructeur qui utilise les attributs par défaut Android divider, ou le second qui utilise votre propre drawable, par exemple drawable/divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <size android:height="1dp" />
    <solid android:color="#ff992900" />
</shape>

Note: Si vous voulez que le diviseur soit tiré sur vos articles, remplacer onDrawOver() méthode à la place.

Utilisation

pour utiliser votre nouvelle classe, ajoutez VerticalSpaceItemDecoration ou DividerSpaceItemDecoration à RecyclerView , par exemple dans votre fragment onCreateView() méthode:

private static final int VERTICAL_ITEM_SPACE = 48;
private RecyclerView recyclerView;
private LinearLayoutManager linearLayoutManager;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_feed, container, false);

    recyclerView = (RecyclerView) rootView.findViewById(R.id.fragment_home_recycler_view);
    linearLayoutManager = new LinearLayoutManager(getActivity());
    recyclerView.setLayoutManager(linearLayoutManager);

    //add ItemDecoration
    recyclerView.addItemDecoration(new VerticalSpaceItemDecoration(VERTICAL_ITEM_SPACE));
    //or
    recyclerView.addItemDecoration(new DividerItemDecoration(getActivity()));
    //or
    recyclerView.addItemDecoration(
            new DividerItemDecoration(getActivity(), R.drawable.divider));

    recyclerView.setAdapter(...);

    return rootView;
}

il ya aussi bibliothèque de Lucas Rocha qui est censé simplifier le processus de décoration de l'article. N'ai pas essayé.

parmi ses caractéristiques sont:

  • , Une collection de stock décorations, y compris:
  • espacement entre éléments séparateurs horizontaux / verticaux.
  • article de la liste
956
répondu EyesClear 2016-10-25 11:04:51

il suffit d'ajouter

recyclerView.addItemDecoration(new DividerItemDecoration(getContext(),
                DividerItemDecoration.VERTICAL));

vous pouvez aussi avoir besoin d'ajouter la dépendance

compile 'com.android.support:recyclerview-v7:27.1.0'

EDIT:

pour le personnaliser un petit peu, vous pouvez ajouter un dessinable personnalisé:

DividerItemDecoration itemDecorator = new DividerItemDecoration(getContext(), DividerItemDecoration.VERTICAL);
itemDecorator.setDrawable(ContextCompat.getDrawable(getContext(), R.drawable.divider));

vous êtes libre d'utiliser n'importe quel tiroir personnalisé, par exemple:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="@color/colorPrimary"/>
    <size android:height="0.5dp"/>
</shape>
269
répondu Leo Droidcoder 2018-06-20 12:04:29

puis-je attirer votre attention sur ce dossier particulier sur Github par Alex Fu: https://gist.github.com/alexfu/0f464fc3742f134ccd1e

C'est la décoration de Divideritem.exemple de fichier java "tiré directement des démos de soutien".( https://plus.google.com/103498612790395592106/posts/VVEB3m7NkSS )

j'ai pu obtenir des lignes de diviseur bien après avoir importé ce fichier dans mon projet et l'ajouter comme une décoration d'objet à la vue du recycleur.

voici à quoi ressemble mon regard une fois dans mon fragment contenant le Recyclerview:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_recycler_view, container, false);

    mRecyclerView = (RecyclerView) rootView.findViewById(R.id.my_recycler_view);
    mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.VERTICAL_LIST));

    mRecyclerView.setHasFixedSize(true);
    mLayoutManager = new LinearLayoutManager(getActivity());
    mRecyclerView.setLayoutManager(mLayoutManager);
    mRecyclerView.setItemAnimator(new DefaultItemAnimator());

    return rootView;
}

je suis sûr que le style supplémentaire peut être fait, mais c'est un point de départ. :)

239
répondu Duy Nguyen 2014-07-21 18:29:25

Simple ItemDecoration mise en œuvre pour l'égalité des espaces entre tous les éléments.

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
    private int space;

    public SpacesItemDecoration(int space) {
        this.space = space;
    }

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

        // Add top margin only for the first item to avoid double space between items
        if(parent.getChildAdapterPosition(view) == 0) {
            outRect.top = space;
        }
    }
}
131
répondu SergeyA 2017-07-25 03:32:39

le plus simple est de définir la couleur de fond pour RecyclerView et une couleur de fond différente pour les articles. Ici est un exemple ...

<android.support.v7.widget.RecyclerView
    android:background="#ECEFF1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="vertical"/>

et le TextView item (It can be anything though) avec la marge inférieure " x " dp ou px.

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="1dp"
    android:background="#FFFFFF"/>

la sortie ...

enter image description here

93
répondu Madan Sapkota 2016-07-08 16:29:18

je pense que l'utilisation de diviseur simple vous aidera



pour ajouter divider à chaque article:

1 - Ajouter à drawable répertoire line_divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
    android:width="1dp"
    android:height="1dp" />
<solid android:color="#999999" />
</shape>

2-Créer la classe SimpleDividerItemDecoration

j'ai utilisé cet exemple pour définir cette classe:

https://gist.github.com/polbins/e37206fbc444207c0e92



package com.example.myapp;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import com.example.myapp.R;

public class SimpleDividerItemDecoration extends RecyclerView.ItemDecoration{
private Drawable mDivider;

public SimpleDividerItemDecoration(Resources resources) {
    mDivider = resources.getDrawable(R.drawable.line_divider);
}

public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    int left = parent.getPaddingLeft();
    int right = parent.getWidth() - parent.getPaddingRight();

    int childCount = parent.getChildCount();
    for (int i = 0; i < childCount; i++) {
        View child = parent.getChildAt(i);

        RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

        int top = child.getBottom() + params.bottomMargin;
        int bottom = top + mDivider.getIntrinsicHeight();

        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }
  }
}



3- dans activity or fragment that using RecyclerView, inside onreateview ajouter ce qui suit:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
 RecyclerView myRecyclerView = (RecyclerView) layout.findViewById(R.id.my_recycler_view);
 myRecyclerView.addItemDecoration(new SimpleDividerItemDecoration(getResources()));
 ....
 }



4- pour ajouter l'espacement entre les articles

vous avez juste besoin d'ajouter propriété de rembourrage à votre vue d'article

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:padding="4dp"
>
..... item structure
</RelativeLayout>
37
répondu Belal mazlom 2015-04-04 13:12:53

comme j'ai mis ItemAnimators . Le ItemDecorator n'entre ni ne sort avec l'animation.

j'ai simplement fini par avoir une ligne de vue dans mon fichier de mise en page de vue d'item de chaque item. Ça a résolu mon affaire. DividerItemDecoration estimé à beaucoup de sorcellerie pour un simple diviseur. Ou je pourrais rater son vrai usage.

<View
    android:layout_width="match_parent"
    android:layout_height="1px"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:background="@color/lt_gray"/>
25
répondu Javanator 2016-09-12 13:12:49

Puisqu'il n'y a pas de bonne façon de mettre en œuvre ceci encore correctement en utilisant la conception du matériel, je viens de faire le truc suivant pour ajouter un diviseur sur l'article de liste directement:

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/dividerColor"/>
21
répondu Yoann Hercouet 2016-04-13 18:22:09

OCTOBRE 2016 MISE À JOUR

Avec support library v25.0.0 Il y a enfin une implémentation par défaut des diviseurs horizontaux et verticaux de base disponibles!

https://developer.android.com/reference/android/support/v7/widget/DividerItemDecoration.html

12
répondu friday 2016-10-20 08:12:49

cela ne résout pas vraiment le problème, mais comme solution temporaire, vous pouvez définir la propriété useCompatPadding sur la carte dans votre disposition XML pour la faire mesurer comme elle le fait sur les versions pré-Lollipop.

card_view:cardUseCompatPadding="true"
9
répondu Kevin Grant 2014-12-13 20:13:56

ajoutez une marge à votre point de vue, ça a marché pour moi.

android:layout_marginTop="10dp"

si vous voulez juste ajouter espacement égal et que vous voulez le faire dans XML , il suffit de mettre padding à votre RecyclerView et quantité égale de layoutMargin à l'article que vous gonflez dans votre RecyclerView , et laissez la couleur de fond déterminer la couleur d'espacement.

9
répondu Quantum Mattter 2017-02-05 12:16:55

si quelqu'un cherche à ajouter, disons, un espacement de 10dp entre les articles, vous pouvez le faire en paramétrant un drawable à DividerItemDecoration :

DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(
    recyclerView.getContext(),
    layoutManager.getOrientation()
);

dividerItemDecoration.setDrawable(
    ContextCompat.getDrawable(getContext(), R.drawable.divider_10dp)
); 

divider_10dp est une ressource tirable contenant:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <size android:height="10dp"/>
    <solid android:color="@android:color/transparent"/>
</shape>
9
répondu Praveen Singh 2017-07-17 06:09:17

pour ceux qui sont à la recherche juste pour espaces entre les éléments dans le RecyclerView voir mon approche où vous obtenez des espaces égaux entre tous les éléments, sauf dans les premiers et derniers éléments où j'ai donné un plus grand rembourrage. Je n'applique le rembourrage qu'à gauche/droite en horizontal LayoutManager et en haut/bas en vertical LayoutManager .

public class PaddingItemDecoration extends RecyclerView.ItemDecoration {

    private int mPaddingPx;
    private int mPaddingEdgesPx;

    public PaddingItemDecoration(Activity activity) {
        final Resources resources = activity.getResources();
        mPaddingPx = (int) resources.getDimension(R.dimen.paddingItemDecorationDefault);
        mPaddingEdgesPx = (int) resources.getDimension(R.dimen.paddingItemDecorationEdge);
    }

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

        final int itemPosition = parent.getChildAdapterPosition(view);
        if (itemPosition == RecyclerView.NO_POSITION) {
            return;
        }
        int orientation = getOrientation(parent);
        final int itemCount = state.getItemCount();

        int left = 0;
        int top = 0;
        int right = 0;
        int bottom = 0;

        /** HORIZONTAL */
        if (orientation == LinearLayoutManager.HORIZONTAL) {
            /** all positions */
            left = mPaddingPx;
            right = mPaddingPx;

            /** first position */
            if (itemPosition == 0) {
                left += mPaddingEdgesPx;
            }
            /** last position */
            else if (itemCount > 0 && itemPosition == itemCount - 1) {
                right += mPaddingEdgesPx;
            }
        }
        /** VERTICAL */
        else {
            /** all positions */
            top = mPaddingPx;
            bottom = mPaddingPx;

            /** first position */
            if (itemPosition == 0) {
                top += mPaddingEdgesPx;
            }
            /** last position */
            else if (itemCount > 0 && itemPosition == itemCount - 1) {
                bottom += mPaddingEdgesPx;
            }
        }

        if (!isReverseLayout(parent)) {
            outRect.set(left, top, right, bottom);
        } else {
            outRect.set(right, bottom, left, top);
        }
    }

    private boolean isReverseLayout(RecyclerView parent) {
        if (parent.getLayoutManager() instanceof LinearLayoutManager) {
            LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();
            return layoutManager.getReverseLayout();
        } else {
            throw new IllegalStateException("PaddingItemDecoration can only be used with a LinearLayoutManager.");
        }
    }

    private int getOrientation(RecyclerView parent) {
        if (parent.getLayoutManager() instanceof LinearLayoutManager) {
            LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();
            return layoutManager.getOrientation();
        } else {
            throw new IllegalStateException("PaddingItemDecoration can only be used with a LinearLayoutManager.");
        }
    }
}

dimensions.xml

<resources>
    <dimen name="paddingItemDecorationDefault">10dp</dimen>
    <dimen name="paddingItemDecorationEdge">20dp</dimen>
</resources>
8
répondu Ryan Amaral 2016-09-12 14:48:24

c'est simple, vous n'avez pas besoin d'un code aussi compliqué

    DividerItemDecoration divider = new 
    DividerItemDecoration(mRVMovieReview.getContext(), 
    DividerItemDecoration.VERTICAL);
    divider.setDrawable(ContextCompat.getDrawable(getBaseContext(), 
       R.drawable.line_divider));
    mRVMovieReview.addItemDecoration(divider);

ajoutez ceci dans votre drawable : line_divider.xml

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
        <size android:height="1dp" />
        <solid android:color="@android:color/black" />
    </shape>
8
répondu Faheem 2017-08-28 07:48:56
  • voici un simple hack pour ajouter un diviseur
  • il suffit d'ajouter un arrière-plan à la disposition de votre article recycleur comme suit

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_border"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="5dp">
    
    <ImageView
        android:id="@+id/imageViewContactLogo"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginRight="10dp"
        android:src="@drawable/ic_user" />
    
    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.92"
        android:gravity="center|start"
        android:orientation="vertical">
    
    <TextView
        android:id="@+id/textViewContactName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />
    
    <TextView
        android:id="@+id/textViewStatusOrNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:singleLine="true"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceMedium" />
    </LinearLayout>
    
    <TextView
        android:id="@+id/textViewUnreadCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:padding="5dp"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/red"
        android:textSize="22sp" />
    
    <Button
        android:id="@+id/buttonInvite"
        android:layout_width="54dp"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_add_friend" />
    </LinearLayout>
    

créer la suite shape_border.xml dans le dossier drawable

  <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle" >
       <gradient
        android:angle="270"
        android:centerColor="@android:color/transparent"
        android:centerX="0.01"
        android:startColor="#000" />
    </shape>

voici le résultat final-une RecyclerView avec diviseur.

Here is final result - a RecyclerView with divider.

8
répondu O'one 2017-11-06 15:20:25

j'ai bifurqué le Divideritemdécoration d'un gist plus ancien et je l'ai simplifié pour s'adapter à mon cas d'utilisation, et je l'ai également modifié pour dessiner les diviseurs de la façon dont ils sont dessinés dans ListView, y compris un diviseur après le dernier article de liste. Cela permettra également de gérer les animations ItemAnimator verticales:

1) Ajoutez cette classe à votre projet:

public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
    private Drawable divider;

    public DividerItemDecoration(Context context) {
        try {
            final TypedArray a = context.obtainStyledAttributes(ATTRS);
            divider = a.getDrawable(0);
            a.recycle();
        } catch (Resources.NotFoundException e) {
            // TODO Log or handle as necessary.
        }
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        if (divider == null) return;
        if (parent.getChildAdapterPosition(view) < 1) return;

        if (getOrientation(parent) == LinearLayoutManager.VERTICAL)
            outRect.top = divider.getIntrinsicHeight();
        else
            throw new IllegalArgumentException("Only usable with vertical lists");
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (divider == null) {
            super.onDrawOver(c, parent, state);
            return;
        }

        final int left = parent.getPaddingLeft();
        final int right = parent.getWidth() - parent.getPaddingRight();
        final int childCount = parent.getChildCount();

        for (int i = 0; i < childCount; ++i) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int size = divider.getIntrinsicHeight();
            final int top = (int) (child.getTop() - params.topMargin - size + child.getTranslationY());
            final int bottom = top + size;
            divider.setBounds(left, top, right, bottom);
            divider.draw(c);

            if (i == childCount - 1) {
                final int newTop = (int) (child.getBottom() + params.bottomMargin + child.getTranslationY());
                final int newBottom = newTop + size;
                divider.setBounds(left, newTop, right, newBottom);
                divider.draw(c);
            }
        }
    }

    private int getOrientation(RecyclerView parent) {
        if (!(parent.getLayoutManager() instanceof LinearLayoutManager))
            throw new IllegalStateException("Layout manager must be an instance of LinearLayoutManager");
        return ((LinearLayoutManager) parent.getLayoutManager()).getOrientation();
    }
}

2) Ajouter le décorateur à votre RecylerView:

recyclerView.addItemDecoration(new DividerItemDecoration(getActivity()));
7
répondu Learn OpenGL ES 2015-08-04 22:44:14

issu d'une recherche google, ajouter ce Articledécoration à votre RecyclerView :

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

private Drawable mDivider;
private boolean mShowFirstDivider = false;
private boolean mShowLastDivider = false;


public DividerItemDecoration(Context context, AttributeSet attrs) {
    final TypedArray a = context
            .obtainStyledAttributes(attrs, new int[]{android.R.attr.listDivider});
    mDivider = a.getDrawable(0);
    a.recycle();
}

public DividerItemDecoration(Context context, AttributeSet attrs, boolean showFirstDivider,
        boolean showLastDivider) {
    this(context, attrs);
    mShowFirstDivider = showFirstDivider;
    mShowLastDivider = showLastDivider;
}

public DividerItemDecoration(Drawable divider) {
    mDivider = divider;
}

public DividerItemDecoration(Drawable divider, boolean showFirstDivider,
        boolean showLastDivider) {
    this(divider);
    mShowFirstDivider = showFirstDivider;
    mShowLastDivider = showLastDivider;
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
        RecyclerView.State state) {
    super.getItemOffsets(outRect, view, parent, state);
    if (mDivider == null) {
        return;
    }
    if (parent.getChildPosition(view) < 1) {
        return;
    }

    if (getOrientation(parent) == LinearLayoutManager.VERTICAL) {
        outRect.top = mDivider.getIntrinsicHeight();
    } else {
        outRect.left = mDivider.getIntrinsicWidth();
    }
}

@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    if (mDivider == null) {
        super.onDrawOver(c, parent, state);
        return;
    }

    // Initialization needed to avoid compiler warning
    int left = 0, right = 0, top = 0, bottom = 0, size;
    int orientation = getOrientation(parent);
    int childCount = parent.getChildCount();

    if (orientation == LinearLayoutManager.VERTICAL) {
        size = mDivider.getIntrinsicHeight();
        left = parent.getPaddingLeft();
        right = parent.getWidth() - parent.getPaddingRight();
    } else { //horizontal
        size = mDivider.getIntrinsicWidth();
        top = parent.getPaddingTop();
        bottom = parent.getHeight() - parent.getPaddingBottom();
    }

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

        if (orientation == LinearLayoutManager.VERTICAL) {
            top = child.getTop() - params.topMargin;
            bottom = top + size;
        } else { //horizontal
            left = child.getLeft() - params.leftMargin;
            right = left + size;
        }
        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }

    // show last divider
    if (mShowLastDivider && childCount > 0) {
        View child = parent.getChildAt(childCount - 1);
        RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
        if (orientation == LinearLayoutManager.VERTICAL) {
            top = child.getBottom() + params.bottomMargin;
            bottom = top + size;
        } else { // horizontal
            left = child.getRight() + params.rightMargin;
            right = left + size;
        }
        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }
}

private int getOrientation(RecyclerView parent) {
    if (parent.getLayoutManager() instanceof LinearLayoutManager) {
        LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();
        return layoutManager.getOrientation();
    } else {
        throw new IllegalStateException(
                "DividerItemDecoration can only be used with a LinearLayoutManager.");
    }
}
}
5
répondu kentarosu 2015-05-13 17:19:21

si vous voulez ajouter le même espace pour les articles, la manière la plus simple est d'ajouter le rembourrage haut+gauche pour RecycleView et les marges droite+bas pour les articles de carte.

dimensions.xml

<resources>
    <dimen name="divider">1dp</dimen>
</resources>

list_item.xml

<CardView
 android:layout_marginBottom="@dimen/divider"
 android:layout_marginRight="@dimen/divider">
 ...
</CardView>

liste.xml

<RecyclerView
 android:paddingLeft="@dimen/divider"
 android:paddingTop="@dimen/divider"
/>
4
répondu limitium 2015-05-28 18:14:03

nous pouvons décorer les articles en utilisant divers décorateurs attachés à la recyclerview tels que le Divideritemdécoration:

utilisez simplement ce qui suit ...tiré de la réponse de EyesClear

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

private static final int[] ATTRS = new int[]{android.R.attr.listDivider};

private Drawable mDivider;

/**
 * Default divider will be used
 */
public DividerItemDecoration(Context context) {
    final TypedArray styledAttributes = context.obtainStyledAttributes(ATTRS);
    mDivider = styledAttributes.getDrawable(0);
    styledAttributes.recycle();
}

/**
 * Custom divider will be used
 */
public DividerItemDecoration(Context context, int resId) {
    mDivider = ContextCompat.getDrawable(context, resId);
}

@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    int left = parent.getPaddingLeft();
    int right = parent.getWidth() - parent.getPaddingRight();

    int childCount = parent.getChildCount();
    for (int i = 0; i < childCount; i++) {
        View child = parent.getChildAt(i);

        RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

        int top = child.getBottom() + params.bottomMargin;
        int bottom = top + mDivider.getIntrinsicHeight();

        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }
}

} et puis utiliser ce qui précède comme suit

RecyclerView.ItemDecoration itemDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST);
recyclerView.addItemDecoration(itemDecoration);

cela affichera des diviseurs entre chaque élément de la liste comme indiqué ci-dessous:

enter image description here

et pour ceux qui sont à la recherche pour plus de détails peuvent consulter ce guide en utilisant le RecyclerView _ CodePath Android Cliffnotes

certaines réponses ici suggèrent l'utilisation de marges, mais le hic est que : Si vous ajoutez les marges supérieures et inférieures, elles apparaîtront toutes les deux ajoutées entre les articles et elles seront trop grandes. Si vous ajoutez un ou l'autre, il n'y aura pas de marge en haut ou en bas de l'ensemble de la liste. Si vous ajoutez la moitié de la distance au sommet, la moitié au fond, les marges extérieures sera trop petit.

ainsi, la seule solution esthétiquement correcte est le diviseur que le système sait où appliquer correctement: entre les articles mais pas au-dessus ou en dessous des articles.

s'il vous Plaît laissez-moi savoir de doutes dans les commentaires ci-dessous :)

4
répondu Anudeep Samaiya 2017-05-23 12:10:45

ce lien a fonctionné comme un charme pour moi:

https://gist.github.com/lapastillaroja/858caf1a82791b6c1a36

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.View;

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

    private Drawable mDivider;
    private boolean mShowFirstDivider = false;
    private boolean mShowLastDivider = false;


    public DividerItemDecoration(Context context, AttributeSet attrs) {
        final TypedArray a = context
                .obtainStyledAttributes(attrs, new int[]{android.R.attr.listDivider});
        mDivider = a.getDrawable(0);
        a.recycle();
    }

    public DividerItemDecoration(Context context, AttributeSet attrs, boolean showFirstDivider,
            boolean showLastDivider) {
        this(context, attrs);
        mShowFirstDivider = showFirstDivider;
        mShowLastDivider = showLastDivider;
    }

    public DividerItemDecoration(Drawable divider) {
        mDivider = divider;
    }

    public DividerItemDecoration(Drawable divider, boolean showFirstDivider,
            boolean showLastDivider) {
        this(divider);
        mShowFirstDivider = showFirstDivider;
        mShowLastDivider = showLastDivider;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
            RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        if (mDivider == null) {
            return;
        }
        if (parent.getChildPosition(view) < 1) {
            return;
        }

        if (getOrientation(parent) == LinearLayoutManager.VERTICAL) {
            outRect.top = mDivider.getIntrinsicHeight();
        } else {
            outRect.left = mDivider.getIntrinsicWidth();
        }
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (mDivider == null) {
            super.onDrawOver(c, parent, state);
            return;
        }

        // Initialization needed to avoid compiler warning
        int left = 0, right = 0, top = 0, bottom = 0, size;
        int orientation = getOrientation(parent);
        int childCount = parent.getChildCount();

        if (orientation == LinearLayoutManager.VERTICAL) {
            size = mDivider.getIntrinsicHeight();
            left = parent.getPaddingLeft();
            right = parent.getWidth() - parent.getPaddingRight();
        } else { //horizontal
            size = mDivider.getIntrinsicWidth();
            top = parent.getPaddingTop();
            bottom = parent.getHeight() - parent.getPaddingBottom();
        }

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

            if (orientation == LinearLayoutManager.VERTICAL) {
                top = child.getTop() - params.topMargin;
                bottom = top + size;
            } else { //horizontal
                left = child.getLeft() - params.leftMargin;
                right = left + size;
            }
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }

        // show last divider
        if (mShowLastDivider && childCount > 0) {
            View child = parent.getChildAt(childCount - 1);
            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
            if (orientation == LinearLayoutManager.VERTICAL) {
                top = child.getBottom() + params.bottomMargin;
                bottom = top + size;
            } else { // horizontal
                left = child.getRight() + params.rightMargin;
                right = left + size;
            }
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    private int getOrientation(RecyclerView parent) {
        if (parent.getLayoutManager() instanceof LinearLayoutManager) {
            LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();
            return layoutManager.getOrientation();
        } else {
            throw new IllegalStateException(
                    "DividerItemDecoration can only be used with a LinearLayoutManager.");
        }
    }
}

puis dans votre activité:

mCategoryRecyclerView.addItemDecoration(
    new DividerItemDecoration(this, null));

ou ceci si vous utilisez un fragment:

mCategoryRecyclerView.addItemDecoration(
    new DividerItemDecoration(getActivity(), null));
3
répondu Micro 2015-08-21 16:33:55

j'ai ajouté une ligne dans la liste comme ci-dessous

<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/dividerColor"/>

1px dessinera la ligne mince.

si vous voulez cacher le diviseur pour la dernière ligne alors divider.setVisiblity(View.GONE); sur le onBindViewHolder pour le dernier élément de la liste.

3
répondu Raja Peela 2016-07-01 11:49:01

trop tard mais pour GridLayoutManager j'utilise ceci:

public class GridSpacesItemDecoration : RecyclerView.ItemDecoration
{
    private int space;

    public GridSpacesItemDecoration(int space) {
        this.space = space;
    }

    public override void GetItemOffsets(Android.Graphics.Rect outRect, View view, RecyclerView parent, RecyclerView.State state)
    {
        var position = parent.GetChildLayoutPosition(view);

        /// Only for GridLayoutManager Layouts
        var manager = parent.GetLayoutManager() as GridLayoutManager;

        if (parent.GetChildLayoutPosition(view) < manager.SpanCount)
            outRect.Top = space;

        if (position % 2 != 0) {
            outRect.Right = space;
        }

        outRect.Left = space;
        outRect.Bottom = space;
    }
}

ce travail pour n'importe quel nombre de portée que vous avez.

Ollie.

3
répondu Ollie Strevel 2017-01-10 23:30:27

vous pouvez ajouter avec programaticly facilement.

si votre gestionnaire de mise en page est Linearlayout, alors vous pouvez utiliser:

Divideritemdécoration is a RecyclerView.Élément decoration qui peut être utilisé comme diviseur entre les éléments D'un gestionnaire LinearLayout. Il prend en charge orientations Horizontales et verticales.

 mDividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
         mLayoutManager.getOrientation());
 recyclerView.addItemDecoration(mDividerItemDecoration);

source

3
répondu Beyaz 2017-01-22 06:48:21

public class CommonItemSpaceDecoration extends RecyclerView.ItemDecoration {
    private int mSpace = 0;
    private boolean mVerticalOrientation = true;

    public CommonItemSpaceDecoration(int space) {
        this.mSpace = space;
    }

    public CommonItemSpaceDecoration(int space, boolean verticalOrientation) {
        this.mSpace = space;
        this.mVerticalOrientation = verticalOrientation;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.top = SizeUtils.dp2px(view.getContext(), mSpace);
        if (mVerticalOrientation) {
            if (parent.getChildAdapterPosition(view) == 0) {
                outRect.set(0, SizeUtils.dp2px(view.getContext(), mSpace), 0, SizeUtils.dp2px(view.getContext(), mSpace));
            } else {
                outRect.set(0, 0, 0, SizeUtils.dp2px(view.getContext(), mSpace));
            }
        } else {
            if (parent.getChildAdapterPosition(view) == 0) {
                outRect.set(SizeUtils.dp2px(view.getContext(), mSpace), 0, 0, 0);
            } else {
                outRect.set(SizeUtils.dp2px(view.getContext(), mSpace), 0, SizeUtils.dp2px(view.getContext(), mSpace), 0);
            }
        }


    }
}

cela ajoutera de l'espace dans le haut et le bas de chaque article(ou à gauche et à droite).Ensuite, vous pouvez le régler sur votre recyclerView.

recyclerView.addItemDecoration(new CommonItemSpaceDecoration(16));

SizeUtils.java

public class SizeUtils {
    public static int dp2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}
3
répondu wizChen 2017-02-28 09:16:06

une solution vraiment facile est d'utiliser RecyclerView-FlexibleDivider

ajouter dépendance:

compile 'com.yqritc:recyclerview-flexibledivider:1.4.0'

ajouter à votre recyclerview:

recyclerView.addItemDecoration(new HorizontalDividerItemDecoration.Builder(context).build());

et c'est fini!

2
répondu Cristan 2016-09-22 12:38:44

1.Un des moyens est en utilisant cardview et recycler view ensemble nous pouvons facilement ajouter l'effet comme divider. ex. https://developer.android.com/training/material/lists-cards.html

2.et l'autre est en ajoutant vue comme divider à list_item_layout de la vue du recycleur .

        <View
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorAccent" />
2
répondu vicky 2017-01-31 08:43:21

implémente sa propre version de RecyclerView.Itemdécoration

public class SpacingItemDecoration extends RecyclerView.ItemDecoration {
    private int spacingPx;
    private boolean addStartSpacing;
    private boolean addEndSpacing;

    public SpacingItemDecoration(int spacingPx) {
        this(spacingPx, false, false);
    }

    public SpacingItemDecoration(int spacingPx, boolean addStartSpacing, boolean addEndSpacing) {
        this.spacingPx = spacingPx;
        this.addStartSpacing = addStartSpacing;
        this.addEndSpacing = addEndSpacing;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        if (spacingPx <= 0) {
            return;
        }

        if (addStartSpacing && parent.getChildLayoutPosition(view) < 1 || parent.getChildLayoutPosition(view) >= 1) {
            if (getOrientation(parent) == LinearLayoutManager.VERTICAL) {
                outRect.top = spacingPx;
            } else {
                outRect.left = spacingPx;
            }
        }

        if (addEndSpacing && parent.getChildAdapterPosition(view) == getTotalItemCount(parent) - 1) {
            if (getOrientation(parent) == LinearLayoutManager.VERTICAL) {
                outRect.bottom = spacingPx;
            } else {
                outRect.right = spacingPx;
            }
        }
    }

    private int getTotalItemCount(RecyclerView parent) {
        return parent.getAdapter().getItemCount();
    }

    private int getOrientation(RecyclerView parent) {
        if (parent.getLayoutManager() instanceof LinearLayoutManager) {
            return ((LinearLayoutManager) parent.getLayoutManager()).getOrientation();
        } else {
            throw new IllegalStateException("SpacingItemDecoration can only be used with a LinearLayoutManager.");
        }
    }
}
1
répondu e.shishkin 2015-06-24 17:09:47

le RecyclerView est un peu différent du ListView . En fait, le RecyclerView a besoin d'une structure semblable à celle du ListView . Par exemple, un LinearLayout . Le LinearLayout a des paramètres pour la division de chaque élément. Dans le code ci-dessous, j'ai un RecyclerView composé de CardView objets dans un LinearLayout avec un "rembourrage" qui mettra un peu d'espace entre les articles. Si on réduit l'espace, on a une limite.

voici le recycleur vue dans recyclerview_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".ToDoList">

    <!-- A RecyclerView with some commonly used attributes -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/todo_recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

et voici à quoi ressemble chaque élément (et il montre comme divisé en raison de l'androïde:rembourrage dans la linéarité qui entoure tout.) dans un autre fichier: cards_layout.xml

<?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"
    **android:padding="@dimen/activity_vertical_margin"**>
    <!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:elevation="30dp"
        card_view:cardElevation="3dp">
            <TextView
                android:id="@+id/info_text"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
    </android.support.v7.widget.CardView>
</LinearLayout>
1
répondu fiacobelli 2015-07-25 05:33:27

j'ai une façon très simple d'ajouter un diviseur dans RecyclerView. Utilisez un adaptateur personnalisé pour modifier la disposition de la vue recycler et puis avec les éléments de la vue recycler ajouter LinearLayout avec une couleur d'arrière-plan (qui sera la couleur de séparation) et ajouter une hauteur de 1dp (ou selon votre exigence) et la largeur pour correspondre à parent.

voici un exemple de code.

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="18dp">

    <TextView
        android:id="@+id/list_row_SNO"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight=".8"
        android:layout_gravity="end"
        android:text="44."
        android:textAlignment="center"
        android:textSize="24sp"
        android:textColor="@color/colorBlack"
        android:fontFamily="sans-serif-condensed" />

    <TextView
        android:id="@+id/list_row_Heading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight=".2"
        android:layout_gravity="start"
        android:text="Student's application for leave and this what"
        android:textAlignment="textStart"
        android:textSize="24sp"
        android:textColor="@color/colorBlack"
        android:fontFamily="sans-serif-condensed" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/colorHighlight">
</LinearLayout>

1
répondu Nabajyoti Das 2017-02-04 09:07:25
public class VerticalItemDecoration extends RecyclerView.ItemDecoration {

private boolean verticalOrientation = true;
private int space = 10;

public VerticalItemDecoration(int value, boolean verticalOrientation) {
    this.space = value;
    this.verticalOrientation = verticalOrientation;
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
                           RecyclerView.State state) {
    //skip first item in the list
    if (parent.getChildAdapterPosition(view) != 0) {
        if (verticalOrientation) {
            outRect.set(space, 0, 0, 0);
        } else if (!verticalOrientation) {
            outRect.set(0, space, 0, 0);
        }
    }
}
}

mCompletedShippingRecyclerView.addItemDecoration(new VerticalItemDecoration(20,false)); 
1
répondu Amardeep 2017-02-09 11:52:49