본문 바로가기

Study/Android

[Android] RecyclerView Adpater, Header

RecyclerView Adapter 사용하기  

 

Android L 프리뷰 버전에서 등장한 RecyclerView는 이번 Android 5.0 프리뷰 버전과 함께 Support-Library-v7의 최신 버전에 정식으로 추가되었다. RecyclerView는 기존의 ListView보다 유연하고 성능이 향상된 고급 위젯이다. 기존의 ListView는 커스텀하기에는 구조적인 문제로 많은 제약이 따랐으며, 구조적인 문제로 인해 성능문제가 있었다. RecyclerView는 이런 고질적인 문제를 해결하기위해 좀 더 다양한 형태로 개발자가 커스텀할 수 있도록 유연하며 성능에 중점을 두어 만들어졌다. 

ListView에 비해 RecyclerView의 가장큰 변경 사항은 LayoutManager과 ViewHolder, Item에 대한 뷰의 변형이나 애니메이션할 수 있는 개념이 추가 되었다. 이들은 리스트의 아이템이 표시될 재활용뷰를 관리하는데 사용되며 아이템의 포지션에 따른 레이아웃의 배치를 결정하게 된다. 또한 불필요한 뷰의 생성을 피하기 위해 레이아웃을 관리하는 역할을 하게 된다.

 

주요 클래스

  • Adapter – 기존의 ListView에서 사용하는 Adapter와 같은 개념으로 데이터와 아이템에 대한 View생성
  • ViewHolder – 재활용 View에 대한 모든 서브 뷰를 보유
  • LayoutManager – 아이템의 항목을 배치
  • ItemDecoration – 아이템 항목에서 서브뷰에 대한 처리
  • ItemAnimation – 아이템 항목이 추가, 제거되거나 정렬될때 애니메이션 처리

LayoutManager

RecyclerView에서 가장 흥미로운 부분이다. RecyclerView를 생성시 반드시 생성되어야 하며 이를 통해 모든 아이템의 뷰의 레이아웃을 관리한다. 수평/수직 배치 뿐만아니라 그리드형태의 다양하게 레이아웃을 배치 할 수 있다.

기본적으로 제공하는 LayoutManager

  • LinearLayoutManager – 수평/수직의 스크롤 리스트
  • GridLayoutManager – 그리드 리스트
  • StaggeredGridLayoutManage – 높이가 불구칙적인 형태의 그리드 리스트

이외에 개발자는 LayoutManager를 확장하여 다양한 형태를 만들 수 있다. 아래와 같이 사용한다.

LinearLayoutManager layoutManager = new LinearLayoutManager(context);
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
layoutManager.scrollToPosition(currPos);
recyclerView.setLayoutManager(layoutManager);

 

ViewHolder

ViewHolder는 기존의 ListView에서 많이 사용하고 구글 안드로이드 팀에서도 오랫동안 추천 된 패턴이다. 하지만 이를 사용하는 것을 강제적으로 제한하지 않았지만 RecyclerView에서는 Adapter와 ViewHolder를 반듯이 같이 사용 할 수 밖에 없는 구조로 바꼈다. ViewHolder패턴을 사용 하지 않은 개발자는 약간의 훈련이 필요 할것이다.

 

public final static class ListItemViewHolder extends RecyclerView.ViewHolder {
   TextView label;
   TextView dateTime;
   
   public ListItemViewHolder(View itemView) {
      super(itemView);
      label = (TextView) itemView.findViewById(R.id.txt_label_item);
      dateTime = (TextView) itemView.findViewById(R.id.txt_date_time);
   }
}

 

사용법은 ViewHolder를 확장 후 서브 클래스를 findViewById()를 통해 저장해놓으면 된다. 이렇게 함으로 한번 생성한 클래스를 통해 서브 클래스(뷰)를 빠르게 다시 액세스 할 수 있다.

 

Adapter

ListView에서 Adpater와 동일한 형태의 구조로 해당 아이템의 데이터와 뷰간의 처리를 한다. 다음과 같은 3가지의 인터페이스를 구현해야 한다.

  • public ListItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
    • 제네릭 형식의 변수로 ViewHolder를 생성
  • public void onBindViewHolder(ListItemViewHolder holder, int position)
    • 만들어진 ViewHolder에 데이터를 넣는 작업, ListView의 getView()와 동일
  • public int getItemCount()
    • 데이터의 갯수
public class RecyclerViewDemoAdapter extends RecyclerView.Adapter {

    private List items;

    RecyclerViewDemoAdapter(List modelData) {
        if (modelData == null) {
            throw new IllegalArgumentException(
                  "modelData must not be null");
        }
        this.items = modelData;
    }

    @Override
    public ListItemViewHolder onCreateViewHolder(
            ViewGroup viewGroup, int viewType) {
        View itemView = LayoutInflater.
                from(viewGroup.getContext()).
                inflate(R.layout.item_demo_01, viewGroup, false);
        return new ListItemViewHolder(itemView, viewType);
    }

    @Override
    public void onBindViewHolder(
            ListItemViewHolder viewHolder, int position) {
        DemoModel model = items.get(position);
        viewHolder.label.setText(model.label);
        String dateStr = DateUtils.formatDateTime(
                viewHolder.label.getContext(),
                model.dateTime.getTime(),
                DateUtils.FORMAT_ABBREV_ALL);
        viewHolder.dateTime.setText(dateStr);
    }

    @Override
    public int getItemCount() {
        return items.size();
    }

    public final static class ListItemViewHolder 
           extends RecyclerView.ViewHolder {
        // ViewHolder
    }
}

기존의 ListView와 동일한 구조라서 쉽게 구현이 가능하며, Adapter의 기본 클래스를 확장한 형태(CursorAdapter, ArrayAdapter)는 없다.

ItemDecoration

각 아이템 항목별로 오프셋을 추가 하거나 아이템을 꾸미는 작업을 하게 된다.  예를 들어 스크롤시 컨텐츠의 내용에 따라 View의 높이가 달라져 레이아웃의 위치를 이동해야 하는 작업하는 경우 여기에서 처리 하면된다.

 

필요시 다음과 같은 3가지를 구현해야 한다.

  • public void onDraw(Canvas c, RecyclerView parent)
  • public void onDrawOver(Canvas c, RecyclerView parent)
  • public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent)

 

LayoutManager에서 getItemOffsets()의 호출을 통해 아이템의 레이아웃의 크기를 측정 하기 때문에 위의 예시는 getItemOffsets()에서 작업하면된다.

ItemAnimtor

ListView에서 아이템별 애니메이션을 일으키기 위해 notifyDataSetChanged()를 호출해 모든 아이템 변경이 발생 할때 처리를 하였으나 notifyItemChanged(int position), notifyItemInserted(int position), notifyItemRemoved(int position)를 통해 ItemAnimator를 통해 특정 아이템에 대한 애니메이션을 발생 할 수 있다.

  • public final void notifyItemInserted(int position)
  • public final void notifyItemRemoved(int position)
RecyclerView.ItemDecoration itemDecoration =
        new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST);
recyclerView.addItemDecoration(itemDecoration);

recyclerView.setItemAnimator(new CustomItemAnimator());


public class CustomItemAnimator extends PendingItemAnimator {
 
    public CustomItemAnimator() {
        setAddDuration(300);
        setRemoveDuration(300);
    }
 
    @Override
    protected boolean prepHolderForAnimateRemove(ViewHolder holder) {
        return true;
    }
 
    @Override
    protected ViewPropertyAnimatorCompat animateRemoveImpl(ViewHolder holder) {
        return ViewCompat.animate(holder.itemView)
                .rotationX(90)
                .translationY( - (holder.itemView.getMeasuredHeight() / 2));
    }
 
    @Override
    protected void onRemoveCanceled(ViewHolder holder) {
        ViewCompat.setRotationX(holder.itemView, 0);
        ViewCompat.setTranslationY(holder.itemView, 0);
    }
 
    @Override
    protected boolean prepHolderForAnimateAdd(ViewHolder holder) {
        ViewCompat.setRotationX(holder.itemView, 90);
        ViewCompat.setTranslationY(holder.itemView, - (holder.itemView.getMeasuredHeight() / 2));
        return true;
    }
 
    @Override
    protected ViewPropertyAnimatorCompat animateAddImpl(ViewHolder holder) {
        return ViewCompat.animate(holder.itemView)
                .rotationX(0)
                .translationY(0);
    }
 
    @Override
    protected void onAddCanceled(ViewHolder holder) {
        ViewCompat.setRotationX(holder.itemView, 0);
        ViewCompat.setTranslationY(holder.itemView, 0);
    }
}

그외

ListView OnItemClickListener, OnItemLongClickListener의 아이템 터치에 대한 리스너가 RecyclerView에서는 addOnItemTouchListener, setOnClickListener를 통해 처리 하게 되었다. 이는 GestureDetecter를 통해 좀 더 다양한 이벤트를 식별 할 수 있는 유연한 구조로 바꼈다. 한편으로는 유연하지만 한편으로는 좀 더 어려워 졌다고 볼 수 있다. 

addHeaderView(), addFooterView()는 어디로?

없어 졌다. 이를 위해 Adapter의 onCreateViewHolder()에서 itemType으로 header나 footer를 추가 하는 방식으로 처리 해야 한다.

 

RecyclerView Adpater Refresh  

RecyclerView를 사용한 후, Adapter를 계속 그냥 두는게 아니라 데이터가 변경이 되었을 때 항상 갱신을 해야 합니다.

이전 ListView나 GridView를 사용했을 때 저는 모든 갱신을 notifyDataSetChanged 함수만 썼습니다.

 

RecyclerView를 쓸때는 좀 더 다양하게 갱신을 줄 수 있습니다.

 

 

notifyDataSetChanged : 데이터가 전체 바뀌었을 때 호출. 즉, 처음 부터 끝까지 전부 바뀌었을 경우

 

notifyItemChanged : 특정 Position의 위치만 바뀌었을 경우. position 4 번 위치만 데이터가 바뀌었을 경우 사용 하면 된다.

 

notifyItemRangeChanged : 특정 영역을 데이터가 바뀌었을 경우. position 3~10번까지의 데이터만 바뀌었을 경우 사용 하면 된다.

 

notifyItemInserted : 특정 Position에 데이터 하나를 추가 하였을 경우. position 3번과 4번 사이에 넣고자 할경우 4를 넣으면 되겠죠

 

notifyItemRangeInserted : 특정 영역에 데이터를 추가할 경우. position 3~10번 자리에 7개의 새로운 데이터를 넣을 경우

 

notifyItemRemoved : 특정 Position에 데이터를 하나 제거할 경우.

 

notifyItemRangeRemoved : 특정 영역의 데이터를 제거할 경우

 

notifyItemMoved : 특정 위치를 교환할 경우 (Drag and drop에 사용 가능)

RecyclerView Adpater 구분선 추가 

/drawable/listDivider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size
        android:height="0.7dp" />

    <solid android:color="#e0e0e0" />

</shape>

 

 

/java/ListItemDecoration.java

public class ListItemDecoration extends RecyclerView.ItemDecoration {

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


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

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

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

//    public ListItemDecoration(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;
        }

        outRect.top = 1;
        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(
                    "ListItemDecoration can only be used with a LinearLayoutManager.");
        }
    }
}

적용 코드

mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
mRecyclerView.addItemDecoration(new ListItemDecoration(ContextCompat.getDrawable(getActivity(), R.drawable.list_divider)));
mRecyclerView.setHasFixedSize(true);

 

 

Header 붙이기

https://robusttechhouse.com/tutorial-how-to-add-header-to-recyclerview-in-android/

 

 

참고 : https://github.com/writtmeyer/recyclerviewdemo

출처 : http://gogorchg.tistory.com/entry/Android-RecyclerView-Adpater-Refresh