web-dev-qa-db-fra.com

Android: Ajouter un séparateur entre les éléments de RecyclerView

J'utilise RecyclerView avec un coin arrondi, pour le faire, j'ai utilisé ci-dessous XML:

view_rounded.xml: - 

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <solid Android:color="#008f8471"/>
    <stroke Android:width="2dp" Android:color="#ffffff" />
    <corners Android:radius="10dp"/>
</shape>

fragment_main.xml: - 

<Android.support.v7.widget.RecyclerView
    Android:id="@+id/recycler_view"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@drawable/view_rounded"/>

adapter_main.xml: - 

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/LinearLayout1"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="vertical">

    <TextView
        Android:id="@+id/textTitle"
        style="@style/AppTheme.ListTextView"
        />

</LinearLayout>

style.xml: - 

<style name="AppTheme.ListTextView" parent="Android:Widget.Material.TextView">
  <item name="Android:gravity">left</item>
  <item name="Android:layout_width">match_parent</item>
  <item name="Android:layout_height">wrap_content</item>
  <item name="Android:textAllCaps">false</item>
  <item name="Android:padding">10dp</item>
  <item name="Android:textAppearance">@Android:style/TextAppearance.DeviceDefault.Medium</item>
  <item name="Android:textColor">@color/tabsScrollColor</item> 
  <item name="Android:textStyle">bold</item> 
</style>

Obtenir (sans séparateur d'article):

enter image description here

Obligatoire (avec séparateur d'article):

enter image description here

androidxmlandroid-recyclerviewandroid-styles
13
Sun

J'ai fait comme ça:

onCreateView () of Fragment:

RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerView);
recyclerView.addItemDecoration(new SimpleDividerItemDecoration(getActivity()));

SimpleDividerItemDecoration.Java :

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

    public SimpleDividerItemDecoration(Context context) {
        mDivider = context.getResources().getDrawable(R.drawable.recycler_horizontal_divider);
    }

    @Override
    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);
        }
    }
}

recycler_horizontal_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="#2EC590" />

</shape>

J'espère que ceci vous aidera.

5
Hiren Patel

vous devriez essayer d'ajouter Divider 

mListview.addItemDecoration(new DividerItemDecoration(this.getActivity(), LinearLayout.VERTICAL));
4
Thuy Nguyen

RecyclerView n’a aucun paramètre associé au diviseur pour l’afficher. Au lieu de cela, vous devez étendre une classe à partir de ItemDecoration et utiliser la méthode addItemDecoration () pour afficher le diviseur.

Créez une classe nommée DividerItemDecoration.Java et collez le code ci-dessous.

DividerItemDecoration.Java 

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

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

    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;

    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;

    private Drawable mDivider;

    private int mOrientation;

    public DividerItemDecoration(Context context, int orientation) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        setOrientation(orientation);
    }

    public void setOrientation(int orientation) {
        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
            throw new IllegalArgumentException("invalid orientation");
        }
        mOrientation = orientation;
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

    public void drawVertical(Canvas c, RecyclerView parent) {
        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 top = child.getBottom() + params.bottomMargin;
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    public void drawHorizontal(Canvas c, RecyclerView parent) {
        final int top = parent.getPaddingTop();
        final int bottom = parent.getHeight() - parent.getPaddingBottom();

        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 left = child.getRight() + params.rightMargin;
            final int right = left + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
        } else {
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
        }
    }
}

Ouvrez Activity.Java et définissez la décoration d’article à l’aide de la méthode addItemDecoration () avant de configurer l’adaptateur.

recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));

// set the adapter
recyclerView.setAdapter(mAdapter);
3
Arpit Patel

RecyclerView fonctionne différemment de ListViews. Vous devez ajouter ItemDecorators pour la vue recycleur. Comme le dit la documentation,

ItemDecoration permet à l'application d'ajouter un dessin spécial et un décalage de présentation à des vues d'élément spécifiques à partir du jeu de données de l'adaptateur. Cela peut être utile pour tracer des séparations entre les éléments, les surbrillances, les limites de regroupement visuel, etc.

Jetez un oeil sur ce lien: https://developer.Android.com/reference/Android/support/v7/widget/RecyclerView.ItemDecoration.html

2
Riyaz Ahamed

Pour ajouter des séparateurs à votre liste de recyclage, vous devez utiliser decorator - https://Gist.github.com/alexfu/0f464fc3742f134ccd1e après avoir ajouté une ligne à votre projet recyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.VERTICAL_LIST));

1
Viktor Yakunin

Eh bien, ce que j’ai fait pour y parvenir, c’est la première fois que j’ai créé la mise en page de ma ligne d’adaptateur. 

    <LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/LinearLayout1"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="vertical">
    <View
    Android:id="@+id/lineView"
    Android:layout_width="match_parent"
    Android:layout_height="2px"
    Android:background="@Android:color/black"/>
    <TextView
        Android:id="@+id/textTitle"
        style="@style/AppTheme.ListTextView"
        />

   </LinearLayout>

Ensuite, dans mon adaptateur, j'ai vérifié la première ligne et modifié la visibilité de viewLine en invisible.

@Override
public void onBindViewHolder(ChildInfoViewHolder holder, final int position) {
    if(position == 0){
        holder.viewLine.setVisibility(View.INVISIBLE);
    }
//...
}

public static class MyViewHolder extends RecyclerView.ViewHolder{
    protected View viewLine;
    public ChildInfoViewHolder(View view) {
        super(view);
        viewLine = view.findViewById(R.id.viewLine);
        //... 
    }
}
1
Sushant

Essayez celui-ci: Un très joli solution de Michel-F. Portzert

public class ClippedListView extends ListView {

    public ClippedListView(Context context) {
        super(context);
    }

    public ClippedListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
        protected void dispatchDraw(Canvas canvas) {
        float radius = 10.0f;
        Path clipPath = new Path();
        RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
        clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
        canvas.clipPath(clipPath);
        super.dispatchDraw(canvas);
    }
}
0
NickF

Définissez le sélecteur à l'arrière-plan de l'élément de liste de votre mise en page si vous utilisez un adaptateur personnalisé.

0
vs.thaakur

vous définissez list_selector à la fois pour textview et listview. Utilisez list_selector uniquement pour listview et si vous souhaitez également appliquer un effet de survol sur textview, créez-en un autre, list_selector_textview qui n'inclut pas la propriété <corners Android:radius="10dp".

0
Irfan Ali

Cette ligne de code a fonctionné pour moi:

recyclerView.addItemDecoration(new DividerItemDecoration(context, DividerItemDecoration.HORIZONTAL));

Pour la ligne verticale, passez le second argument sous la forme DividerItemDecoration.VERTICAL.

0
Avishkar Ramjeet

Essayez ceci à partir de Référence Android: ListView avec coins arrondis

Tout d’abord, nous avons besoin des éléments dessinables pour les arrière-plans des entrées de la liste: contenu suivant:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

<item>
  <shape>
        <stroke Android:width="1px" Android:color="#ffbbbbbb" />
  </shape>
</item>
<item Android:bottom="1dp" Android:left="1dp" Android:right="1dp">
 <shape >
       <solid Android:color="#ffffffff" />
 </shape>
</item>
</layer-list>

Pour les coins arrondis, créez un autre xml, "rounded_corner_top.xml":

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

<item>
  <shape>
        <stroke Android:width="1dp" Android:color="#ffbbbbbb" />
        <corners Android:topLeftRadius="20dp"
    Android:topRightRadius="20dp"
     />
  </shape>
</item>
<item Android:top="1dp" Android:left="1dp" Android:right="1dp" Android:bottom="1dp">
 <shape >
       <solid Android:color="#ffffffff" />
      <corners Android:topLeftRadius="20dp"
    Android:topRightRadius="20dp"
     />
 </shape>
 </item>

 </layer-list>

L'implémentation de la partie inférieure est à peu près la même chose, juste avec bottomLeftRadius et bottomRightRadius. (peut-être aussi en créer un avec tous les coins arrondis, si la liste ne comporte qu'une entrée) dossier pouvant être dessiné ("selector_rounded_corner_top.xml") comme suit:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/rounded_corner_top_click"
      Android:state_pressed="true" />
    <item Android:drawable="@drawable/rounded_corner_top_click"
      Android:state_focused="true" />
    <item Android:drawable="@drawable/rounded_corner_top" />
</selector>

Maintenant, faites la même chose pour les autres arrière-plans de la liste . Il ne reste plus qu'à assigner les bons arrière-plans dans notre ListAdapter comme suit:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    //...      
    //skipping the view reuse stuff

   if (position == 0 && entry_list.size() == 1) {
            view.setBackgroundResource(R.drawable.selector_rounded_corner);
        } else if (position == 0) {
            view.setBackgroundResource(R.drawable.selector_rounded_corner_top);
        } else if (position == entry_list.size() - 1) {
            view.setBackgroundResource(R.drawable.selector_rounded_corner_bottom);
        } else {
            view.setBackgroundResource(R.drawable.selector_middle);
        }

       //...
       //skipping the filling of the view
   }
0
SelvaMariappan

Essaye ça

custom_rounded_list.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <gradient
        Android:startColor="#ff2521"
        Android:endColor="#2f5511"
        Android:angle="270"/>
    <padding
        Android:bottom="5dp"
        Android:left="5dp"
        Android:right="5dp"
        Android:top="5dp" />
    <corners
        Android:bottomRightRadius="7dp"
        Android:bottomLeftRadius="7dp"
        Android:topLeftRadius="7dp"
        Android:topRightRadius="7dp" />
</shape>

Votre listview:

<ListView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:id="@+id/mylst"
    Android:background="@drawable/custom_rounded_list" />
0
Online98

Modifiez votre ListView comme ci-dessous.Ajoutez list_bg comme arrière-plan de votre ListView. Spécifiez également un remplissage pour le haut et le bas de la liste. Sinon, le premier et le dernier élément de la liste chevaucheront les coins arrondis affichant des coins rectangulaires.

<ListView
    Android:id="@+id/listView"
    Android:layout_height="wrap_content"
    Android:layout_width="match_parent"
    Android:background="@drawable/list_bg"
    Android:paddingTop="10dp"
    Android:paddingBottom="10dp"
    Android:fastScrollEnabled="true"
    Android:choiceMode="singleChoice" />
0
Dominic D'Souza

Juste une ligne ...

recyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), null));

C'est tout

0
Ravi

Utilisez ce xml dessinable pour la vue de liste de forme de courbe et définissez l’arrière-plan de votre vue Liste ou de tout modèle 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
           <corners Android:radius="6dp" />

            <padding Android:bottom="3dp" Android:left="3dp" Android:right="3dp" Android:top="3dp" />
        </shape>
0
Surender Kumar

Le problème vient du fait que vous définissez l’arrière-plan avec des angles non seulement pour la vue liste, mais également pour l’élément. Vous devez créer des arrière-plans distincts pour les éléments (avec sélecteur) et un pour la vue liste avec coins.

list_bg.xml 

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <solid Android:color="#008f8471"/>
    <stroke Android:width="1dip" Android:color="#ffffff" />
    <corners Android:radius="10dp"/>
    <padding Android:left="0dip" Android:top="0dip" Android:right="0dip" Android:bottom="0dip" />
</shape>

Vous pouvez maintenant configurer ce dessin comme fond d’écran de votre vue liste.

<ListView
    Android:id="@+id/listView"
    Android:layout_height="wrap_content"
    Android:layout_width="match_parent"
    Android:background="@drawable/list_bg.xml"
    Android:fastScrollEnabled="true"
    Android:choiceMode="singleChoice" />

Et pour les éléments de la vue liste, vous pouvez utiliser le sélecteur pour disposer de la fonctionnalité de survol: list_item_selector.xml 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/list_item_selected" Android:state_pressed="true"/>
    <item Android:drawable="@drawable/list_item_selected" Android:state_pressed="false" Android:state_selected="true"/>
    <item Android:drawable="@Android:color/transparent"/>

Où list_item_selected est: list_item_selected.xml 

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <solid Android:color="#4d8f8471"/>
    <stroke Android:width="1dip" Android:color="#ffffff" />
</shape>

Et après cela, vous pouvez configurer ce sélecteur pour l'élément dans votre code XML:

<TextView
    Android:id="@+id/textView"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"        
    Android:background="@drawable/list_item_selector" />

Ainsi, votre vue en liste aura toujours le même arrière-plan avec les coins, et l'arrière-plan des éléments de la vue en liste sera sans coins et sera modifié dans l'état sélectionné ou pressé.

0
Rostyslav Roshak