Wie man Trennlinien und Abstände zwischen Elementen in RecyclerView hinzufügt

Question

Dies ist ein Beispiel dafür, wie es vorher in der ListView-Klasse gemacht werden konnte, unter Verwendung der Parameter divider und dividerHeight:

Ich sehe jedoch keine solche Möglichkeit in der RecyclerView-Klasse.

In diesem Fall ist es okay, Margins zu definieren und/oder eine benutzerdefinierte Trennlinie direkt in das Layout eines Listenelements hinzuzufügen oder gibt es einen besseren Weg, um mein Ziel zu erreichen?

Answer 1

Oktober 2016 Update

Die Version 25.0.0 der Android Support Library führte die DividerItemDecoration Klasse ein:

DividerItemDecoration ist eine RecyclerView.ItemDecoration, die als Trennlinie zwischen Elementen eines LinearLayoutManager verwendet werden kann. Es unterstützt sowohl die Ausrichtungen HORIZONTAL als auch VERTICAL.

Verwendung:

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

---

Vorherige Antwort

Einige Antworten verwenden entweder Methoden, die inzwischen veraltet sind, oder geben keine vollständige Lösung. Daher habe ich versucht, eine kurze, aktuelle Zusammenfassung zu erstellen.

---

Im Gegensatz zur ListView Klasse hat die RecyclerView Klasse keine parameterbezogenen Trennliniendetails. Stattdessen müssen Sie ItemDecoration, eine innere Klasse von RecyclerView, erweitern:

Ein ItemDecoration ermöglicht es der Anwendung, spezielle Zeichen- und Layoutoffsets zu bestimmten Elementansichten aus dem Datensatz des Adapters hinzuzufügen. Dies kann nützlich sein, um Trennlinien zwischen Elementen, Highlights, visuelle Gruppierungsrahmen und mehr zu zeichnen.

Alle ItemDecorations werden in der Reihenfolge gezeichnet, in der sie hinzugefügt wurden, bevor die Elementansichten (in onDraw()) und nach den Elementen (in onDrawOver(Canvas, RecyclerView, RecyclerView.State)).

Vertical Abstand ItemDecoration

Erweitern Sie ItemDecoration, fügen Sie einen benutzerdefinierten Konstruktor hinzu, der den Platz Höhe als Parameter akzeptiert, und überschreiben Sie die Methode getItemOffsets():

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

Wenn Sie keinen Platz unter dem letzten Element einfügen möchten, fügen Sie die folgende Bedingung hinzu:

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

Hinweis: Sie können auch die Eigenschaften outRect.top, outRect.left und outRect.right für den gewünschten Effekt anpassen.

Trennlinien-ItemDecoration

Erweitern Sie ItemDecoration und überschreiben Sie die Methode onDraw():

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

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

    private Drawable divider;

    /**
     * Standard-Trennlinie wird verwendet
     */
    public DividerItemDecoration(Context context) {
        final TypedArray styledAttributes = context.obtainStyledAttributes(ATTRS);
        divider = styledAttributes.getDrawable(0);
        styledAttributes.recycle();
    }

    /**
     * Benutzerdefinierte Trennlinie wird verwendet
     */
    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);
        }
    }
}

Sie können entweder den ersten Konstruktor aufrufen, der die Standard-Android-Trennattribut verwendet, oder den zweiten, der Ihr eigenes Drawable verwendet, zum Beispiel drawable/divider.xml:

Hinweis: Wenn Sie möchten, dass die Trennlinien über Ihren Elementen gezeichnet werden, überschreiben Sie stattdessen die Methode onDrawOver().

Verwendung

Fügen Sie Ihre neue Klasse, z. B. VerticalSpaceItemDecoration oder DividerSpaceItemDecoration, zu RecyclerView hinzu, zum Beispiel im onCreateView()-Methode Ihres Fragments:

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

    //ItemDecoration hinzufügen
    recyclerView.addItemDecoration(new VerticalSpaceItemDecoration(VERTICAL_ITEM_SPACE));
    //oder
    recyclerView.addItemDecoration(new DividerItemDecoration(getActivity()));
    //oder
    recyclerView.addItemDecoration(
            new DividerItemDecoration(getActivity(), R.drawable.divider));

    recyclerView.setAdapter(...);

    return rootView;
}

---

Es gibt auch Lucas Rochas Bibliothek, die den Item-Dekorationsprozess vereinfachen soll. Ich habe es jedoch noch nicht ausprobiert.

Zu den Funktionen gehören unter anderem:

• Eine Sammlung von Standard-Item-Dekorationen einschließlich:
• Elementabstand Horizontale/Vertikale Trennlinien.
• Listenelement

Answer 2

Einfach hinzufügen

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

Sie müssen auch die Abhängigkeit hinzufügen
implementation 'com.android.support:recyclerview-v7:28.0.0'

Zur Anpassung können Sie auch eine benutzerdefinierte Zeichnung hinzufügen:

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

Sie können jede benutzerdefinierte Zeichnung verwenden, zum Beispiel:

Answer 3

Könnte ich Ihre Aufmerksamkeit auf diese spezielle Datei auf GitHub von Alex Fu lenken: link

Es handelt sich um die DividerItemDecoration.java Beispieldatei, die "gerade aus den Support-Demos extrahiert wurde".

Nachdem ich diese Datei in mein Projekt importiert und sie als Elementdekoration für das Recycler-View hinzugefügt habe, konnte ich schöne Trennlinien erhalten.

So sieht mein onCreateView in meinem Fragment aus, das das Recyclerview enthält:

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

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

    return rootView;
}

Ich bin sicher, dass zusätzliches Styling gemacht werden kann, aber es ist ein Ausgangspunkt. :)

Answer 4

Eine einfache ItemDecoration-Implementierung für gleichmäßige Abstände zwischen allen Elementen:

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;

        // Füge oberen Rand nur für das erste Element hinzu, um doppelten Abstand zwischen Elementen zu vermeiden
        if(parent.getChildAdapterPosition(view) == 0) {
            outRect.top = space;
        }
    }
}

Answer 5

Das Einfachste ist, die Hintergrundfarbe für RecyclerView und eine andere Hintergrundfarbe für die Elemente festzulegen. Hier ist ein Beispiel...

Und das TextView Element (es kann jedoch alles sein) mit einem unteren Rand von "x" dp oder px.

Die Ausgabe...