RecyclerView에서 아이템 사이에 디바이더 및 여백 추가하기

Stack Overflow에 자주 검색, 등록되는 문제들과 제가 개발 중 찾아 본 문제들 중에서 나중에도 찾아 볼 것 같은 문제들을 정리하고 있습니다.

Stack Overflow에서 가장 먼저 확인하게 되는 가장 높은 점수를 받은 Solution과 현 시점에 도움이 될 수 있는 가장 최근에 업데이트(최소 점수 확보)된 Solution을 각각 정리하였습니다.

 

아래 word cloud를 통해 이번 포스팅의 주요 키워드를 미리 확인하세요.

How to add dividers and spaces between items in RecyclerView

RecyclerView에서 아이템 사이에 디바이더 및 여백 추가하기

 문제 내용 

This is an example of how it could have been done previously in the ListView class, using the divider and dividerHeight parameters:

이것은 이전에 ListView 클래스에서 구분자와와 구분자높이 매개변수를 사용하여 수행할 수 있었던 방법의 예입니다:

<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"/>

 

However, I don't see such possibility in the RecyclerView class.

하지만 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"/>

 

In that case, is it ok to define margins and/or add a custom divider view directly into a list item's layout or is there a better way to achieve my goal?

이 경우 여백을 정의하거나 리스트 항목의 레이아웃에 사용자 정의 디바이더 뷰를 직접 추가해도 됩니까? 아니면 목표를 달성할 수 있는 더 나은 방법이 있습니까?

 

 

 

 높은 점수를 받은 Solution 

October 2016 Update

2016년 10월 업데이트

 

The version 25.0.0 of Android Support Library introduced the DividerItemDecoration class:

안드로이드 서포트 라이브러리 버전 25.0.0은 DividerItemDecoration 을 도입했다:

 

DividerItemDecoration is a RecyclerView.ItemDecoration that can be used as a divider between items of a LinearLayoutManager. It supports both HORIZONTAL and VERTICAL orientations.

DividerItemDecoration 은 RecyclerView.ItemDecoration으로 LinearLayoutManager의 아이템을 구분하는 데 사용할 수 있는 디바이더입니다. 그것은 수평 및 수직 방향을 모두 지원합니다.

 

Usage:

용도:

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

---

Previous answer

이전 답변

 

Some answers either use methods that have since become deprecated, or don't give a complete solution, so I tried to do a short, up-to-date wrap-up.

일부 답변은 이후 더 이상 사용되지 않는 방법을 사용하거나 완전한 해결책을 제공하지 않기 때문에 저는 짧은 최신 정리를 시도했습니다.

 

---

Unlike ListView, the RecyclerView class doesn't have any divider-related parameters. Instead, you need to extend ItemDecoration, a RecyclerView's inner class:

ListView와 달리 RecyclerView 클래스에는 디바이더 관련 매개 변수가 없습니다. 대신, RecyclerView의 내부 클래스인 ItemDecoration을 상속해야 합니다.

 

An ItemDecoration allows the application to add a special drawing and layout offset to specific item views from the adapter's data set. This can be useful for drawing dividers between items, highlights, visual grouping boundaries and more.

All ItemDecorations are drawn in the order they were added, before the item views (in onDraw()) and after the items (in onDrawOver(Canvas, RecyclerView, RecyclerView.State).

항목 장식을 사용하면 응용 프로그램에서 어댑터의 데이터 세트에서 특정 항목 보기에 특별한 그리기 및 레이아웃 오프셋을 추가할 수 있습니다. 이것은 항목, 강조 표시, 시각적 그룹화 경계 등의 구분선을 그리는 데 유용할 수 있습니다.

모든 ItemDecorations는 추가된 순서대로 항목 보기 전(onDraw()에서) 및 항목 후에(onDrawOver(Canvas, RecyclerView, RecyclerView.State)에서 그려집니다.

 

Vertical spacing ItemDecoration

세로 간격 항목 장식

 

Extend ItemDecoration, add a custom constructor which takes space height as a parameter and override the getItemOffsets() method:

ItemDecoration을 상속하고 공간 높이를 매개 변수로 사용하는 사용자 지정 생성자를 추가하고 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;
    }
}

 

If you don't want to insert space below the last item, add the following condition:

마지막 항목 아래에 공백을 삽입하지 않으려면 다음 조건을 추가하십시오.

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

 

Note: you can also modify outRect.top, outRect.left and outRect.right properties for the desired effect.

참고: 원하는 효과를 위해 outRect.top, outRect.left 및 outRect.right 속성을 수정할 수도 있습니다.

 

Divider ItemDecoration

디바이더 아이템 장식

 

Extend ItemDecoration and override the onDraw() method:

ItemDecoration을 상속하고 onDraw() 메서드를 재정의합니다.

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

 

You can either call the first constructor that uses the default Android divider attributes, or the second one that uses your own drawable, for example drawable/divider.xml:

기본 Android 디바이더 속성을 사용하는 첫 번째 생성자 또는 자신의 그리기 가능한 속성을 사용하는 두 번째 생성자(예: 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: if you want the divider to be drawn over your items, override the onDrawOver() method instead.

참고: 분할자를 항목 위에 그리려면 대신 onDrawOver() 메서드를 재정의하십시오.

 

Usage

사용법

 

To use your new class, add VerticalSpaceItemDecoration or DividerSpaceItemDecoration to RecyclerView, for example in your fragment's onCreateView() method:

새 클래스를 사용하려면 예를 들어 조각의 onCreateView() 메서드에서 VerticalSpaceItemDecoration 또는 DividerSpaceItemDecoration을 RecyclerView에 추가합니다.

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

---

There's also Lucas Rocha's library which is supposed to simplify the item decoration process. I haven't tried it though.

아이템 장식 과정을 간소화하기 위한 루카스 로차의 라이브러리도 있습니다. 그것을 시도해보진 않았습니다.

 

Among its features are:

다음과 같은 기능이 있습니다.

 

• A collection of stock item decorations including:
• Item spacing Horizontal/vertical dividers.
• List item

다음을 포함한 재고 품목 장식 모음:
항목 간격 수평/수직 구분 기호입니다.
리스타 아이템

 

 

 

 가장 최근 달린 Solution 

The newest approach is this one, being used for example like this in the onCreateView of a Fragment:

가장 최신의 접근법은 다음과 같은 것으로, 예를 들어 fragment의 onCreateView에서 사용된다.

 

        val recyclerView = rootView.findViewById<RecyclerView>(R.id.recycler_view)
        recyclerView.adapter = mListAdapter
        recyclerView.layoutManager = LinearLayoutManager(context)
        rootView.context.let {
            val dividerItemDecoration = MaterialDividerItemDecoration(
                it,
                MaterialDividerItemDecoration.VERTICAL
            )
            dividerItemDecoration.isLastItemDecorated = false

            // https://github.com/material-components/material-components-android/blob/master/docs/components/Divider.md
            // Needed if you did not set colorOnSurface in your theme because otherwise the default color would be pink_900 -> default according to Material should be colorOnSurface (12% opacity applied automatically on top).
//            dividerItemDecoration.setDividerColorResource(it, R.color.colorDivider)

            recyclerView.addItemDecoration(dividerItemDecoration)
        }

 

I think you can forget all other solutions before.

나는 당신이 이전에 다른 모든 해결책을 잊을 수 있다고 생각한다.

 

 

 

출처 : https://stackoverflow.com/questions/24618829/how-to-add-dividers-and-spaces-between-items-in-recyclerview