[안드로이드] RecyclerView 사용하기

RecyclerView

리사이클러뷰(RecyclerView)는 "사용자가 관리하는 많은 수의 데이터 집합(Data Set)을 개별 아이템 단위로 구성하여 화면에 출력하는 뷰그룹(ViewGroup)이며, 한 화면에 표시되기 힘든 많은 수의 데이터를 스크롤 가능한 리스트로 표시해주는 위젯"입니다.

 

 - ViewHolder : 항목에 필요한 뷰 객체를 가진다.

 - Adapter : 항목을 구성한다.

 - LayoutManager : 항목을 배치한다.

 - ItemDecoration : 항목을 꾸민다.

 

목록의 뷰는 ViewHolder로 표현되며 각 ViewHolder는 View를 사용하여 각 항목을 표시하는 역할을 한다.

ViewHolder 객체는 Adapter에서 관리하며 Adapter는 필요에 따라 ViewHolder를 만들어 onBindViewHolder()를 호출함으로써 데이터에 바인딩한다.

View를 채울 때 LayoutManger가 필요한데, LinearLayoutManager 또는 GridLayoutManager를 쓰거나 직접 구현하여 사용하면 된다.

 

1. build.gradle (Module: app) 수정

build.gradle(Module: app)에 dependencies를 추가한다.

 

dependencies {
  implementation 'com.android.support:recyclerview-v7:28.0.0'   
  implementation "androidx.recyclerview:recyclerview:1.1.0"
}

 

2. 레이아웃 파일에 RecyclerView 추가

RecyclerView를 구현할 액티비티에 RecyclerView를 추가한다.

• res/layout/activity_main.xml

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

 

3. 아이템 레이아웃 추가

RecyclerView의 아이템의 레이아웃을 생성한다.
사용자의 프로필을 나타내는 ImageView와 이름, 상태 메시지를 나타내는 TextView 2개를 추가하였다.

• res/layout/item_recyclerview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:padding="20dp">

        <!--프로필 사진-->
        <ImageView
            android:id="@+id/profile"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/ic_user"/>

        <!--이름-->
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:text="이름"
            android:textSize="16sp"
            android:textColor="#000"/>

        <!--상태 메시지-->
        <TextView
            android:id="@+id/message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="100dp"
            android:text="상태메시지"
            android:textSize="12sp"
            android:textColor="#444"
            android:maxLines="1"/>

    </LinearLayout>

    <!--구분선-->
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginHorizontal="10dp"
        android:background="#aaa"/>

</LinearLayout>

 

4. Data를 담을 Model 생성 (생략 가능) 

친구들의 정보를 담을 Data class를 생성해야 한다. 이미 구현된 class(String 등)를 사용할 경우 생략 가능하다.

• FriendItem.java

public class FriendItem {
    String name;
    String message;
    int resourceId;

    public FriendItem(int resourceId, String name, String message) {
        this.name = name;
        this.message= message;
        this.resourceId = resourceId;
    }

    public int getResourceId() {
        return resourceId;
    }

    public String getMessage() {
        return message;
    }

    public String getName() {
        return name;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setResourceId(int resourceId) {
        this.resourceId = resourceId;
    }
}

 

5. Adapter 구현

Adapter는 RecyclerView.Adapter를 상속받아 구현하고, ViewHolder는 RecyclerView.ViewHolder를 상속받아 구현한다.

Adapter는 ViewHolder의 View에 데이터를 출력해 각 항목을 만들어주는 역할을 한다.

 

• MyRecyclerAdapter.java

public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.ViewHolder> {

    private ArrayList<FriendItem> mFriendList;

    @NonNull
    @Override
    public MyRecyclerAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recyclerview, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyRecyclerAdapter.ViewHolder holder, int position) {
        holder.onBind(mFriendList.get(position));
    }

    public void setFriendList(ArrayList<FriendItem> list){
        this.mFriendList = list;
        notifyDataSetChanged();
    }

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

    class ViewHolder extends RecyclerView.ViewHolder {
        ImageView profile;
        TextView name;
        TextView message;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);

            profile = (ImageView) itemView.findViewById(R.id.profile);
            name = (TextView) itemView.findViewById(R.id.name);
            message = (TextView) itemView.findViewById(R.id.message);
        }

        void onBind(FriendItem item){
            profile.setImageResource(item.getResourceId());
            name.setText(item.getName());
            message.setText(item.getMessage());
        }
    }
}

 

 - getItemCount() : RecyclerView는 데이터 세트 크기를 가져올 때 이 메서드를 호출합니다.

   예를 들어 주소록 앱에서는 총 주소 개수가 여기에 해당할 수 있습니다.

   RecyclerView는 이 메서드를 사용하여, 항목을 추가로 표시할 수 없는 상황을 확인합니다.

 

 - onCreateViewHolder() : RecyclerView는 ViewHolder를 새로 만들어야 할 때마다 이 메서드를 호출합니다.

   이 메서드는 ViewHolder와 그에 연결된 View를 생성하고 초기화하지만 뷰의 콘텐츠를 채우지는 않습니다. 

   ViewHolder가 아직 특정 데이터에 바인딩된 상태가 아니기 때문입니다.

 

 - onBindViewHolder() : RecyclerView는 ViewHolder를 데이터와 연결할 때 이 메서드를 호출합니다.

   이 메서드는 적절한 데이터를 가져와서 그 데이터를 사용하여 뷰 홀더의 레이아웃을 채웁니다.

   예를 들어 RecyclerView가 이름 목록을 표시하는 경우 메서드는 목록에서 적절한 이름을 찾아 뷰 홀더의

   TextView 위젯을 채울 수 있습니다.

 

6. RecyclerView에 Adapter와 LayoutManager 연결

RecyclerView가 들어갈 MainActivity에 Adapter와 LayoutManager를 연결해준다. LinearLayoutManager를 사용했으며 방향을 따로 설정하지 않을 시 default는 VERTICAL이다.

• MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);

    /* initiate adapter */
    mRecyclerAdapter = new MyRecyclerAdapter();

    /* initiate recyclerview */
    mRecyclerView.setAdapter(mRecyclerAdapter);
    mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
}

LinearLayoutManager의 방향을 HORIZONTAL로 하고 싶은 경우

mRecyclerView.setLayoutManager(new LinearLayoutManager(this, RecyclerView.HORIZONTAL, false)); 를 사용하면 된다.

 

7. Sample Data를 추가해 작동 확인

구현만 한다고 RecyclerView의 작동을 바로 확인할 수 있는 것은 아니다. 임의의 데이터를 넣어 잘 작동하는지 확인한다.

 

리사이클러 뷰에 항목이 출력된 후 동적으로 새로운 항목을 추가하거나 화면에 보이는 항목을 제거해야 할 때가 있다. 이 작업은 항목을 구성하는 데이터에 새로운 데이터를 추가하거나 제거한 후 어댑터의 notifyDataSetChanged() 함수를

호출한다.

 

MyRecyclerAdapter에 데이터를 연결하고 notifyDataSetChanged()를 호출하는 메서드 setFriendList()를 만들어 MainActivity에서 setFriendList()를 호출하는 방식을 사용했다.

 

• MainActivity.java

/* adapt data */
mfriendItems = new ArrayList<>();
for(int i=1;i<=10;i++){
    if(i%2==0)
        mfriendItems.add(new FriendItem(R.drawable.ic_woman,i+"번째 사람",i+"번째 상태메시지"));
    else
        mfriendItems.add(new FriendItem(R.drawable.ic_man,i+"번째 사람",i+"번째 상태메시지"));

}
mRecyclerAdapter.setFriendList(mfriendItems);

 

RecyclerView를 새로 그리고 싶다면 submitList() 함수를 호출한다.

adapter.submitList()

 

8. 샘플 코드

 

 

 

RecyclerView 샘플 앱(Kotlin)

https://github.com/android/views-widgets-samples/tree/main/RecyclerViewKotlin/

 

RecyclerView 샘플 앱(자바)

https://github.com/android/views-widgets-samples/tree/main/RecyclerView/