RecyclerView 에서 Divider (구분선) 추가하기

코틀린 버전 보러가기 (클릭)

 

ListView에서는(나 때는 말이야) xml상에서 item들 사이의 간격이나, divider에 관한 정보를 설정할 수 있었는데, RecyclerView에서는 이러한 옵션이 없습니다. 사실 최근 구글 앱들을 살펴보면, Divider가 있는 디자인이 없긴 합니다. 그래서 뺀 건가..

 

그래도 굳이 넣어야 하겠다면, 아래 과정을 잘 따라와 주시기 바랍니다.

 

Divider로 쓰일 Drawable xml 만들기

하아 사실 정말 귀찮지만, Divider를 넣기 위해서 어쩔 수 없답니다. line_divider.xml을 만들어 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="#ededed" />

</shape>

 

Custom ItemDecoration 만들기

RecyclerView에서는 ItemDecoration이라고 해서, 말 그대로 리스트 항목에서 item들에 대한 옵션을 넣어줄 수 있습니다. 우리는 이 부분을 커스텀하여, item사이에 구분선(divider)을 넣어주도록 하겠습니다.

먼저, DividerItemDecoration 이라는 클래스를 생성하겠습니다.

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

 

그 다음, 그냥 RecyclerView에서 ItemDecoration을 해당 클래스만 지정해 주시면 끝납니다.

recyclerView.addItemDecoration(
                new DividerItemDecoration(getContext(), R.drawable.line_divider));

 

---

RecyclerView가 정말 편하긴 합니다만,, 손이 많이 가는 친구네요.