[RecyclerView] 안드로이드 리사이클러뷰 기본 사용법

안드로이드 RecycleView 기본 사용법

 안드로이드 앱을 개발 하다보면 옛날에는 ListView(리스트뷰)를 많이 썼지만 요즘엔 리스트뷰의 거의 모든 기능을 RecyclerView(리사이클러뷰)로 할 수 있기때문에 대부분 RecyclerView를 많이 사용합니다.

 RecyclerView는 ListView보다 향상된 성능을 제공하는데 RecyclerView란 이름에서도 알 수 있듯이 Adapter의 ViewHolder를 이용하여 RecyclerView 내의 View를 재활용하여 사용합니다. 커스터마이징 하기에도 훨씬 좋아졌고 LayoutManager를 이용하여 ListView와 GridView를 표현할 수 있습니다.

그럼 각설하고 예제를 만들어보겠습니다.

RecyclerView를 만들기 위해서는 RecyclerView, RecycclerView의 ItemView, Adapter, Data Class 4가지 준비물이 필요합니다. 그럼 하나씩 알아보겠습니다.

RecyclerView 만들기

activity_main.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="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#F0F0F0"/>
</LinearLayout>

- 간단하게 RecyclerView 하나만 넣어줍니다.

RecyclerView의 ItemView 만들기

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:gravity="center_vertical"
    android:layout_marginBottom="8dp"
    android:background="@android:color/white">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center_vertical">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:text="TITLE"
            android:textSize="15sp"
            android:textColor="@android:color/black"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:text="content"
            android:textSize="13sp"
            android:textColor="@android:color/darker_gray"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/ic_launcher"/>
</LinearLayout>

- 저는 TextView 2개와 ImageView 1개를 이용해 Item을 만들었습니다.

- item.xml preview

Adapter Class 만들기

RecyclerAdapter.java

package com.imaec.forblog;

import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ItemViewHolder> {

    // adapter에 들어갈 list 입니다.
    private ArrayList<Data> listData = new ArrayList<>();

    @NonNull
    @Override
    public ItemViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // LayoutInflater를 이용하여 전 단계에서 만들었던 item.xml을 inflate 시킵니다.
        // return 인자는 ViewHolder 입니다.
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
        return new ItemViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ItemViewHolder holder, int position) {
        // Item을 하나, 하나 보여주는(bind 되는) 함수입니다.
        holder.onBind(listData.get(position));
    }

    @Override
    public int getItemCount() {
        // RecyclerView의 총 개수 입니다.
        return listData.size();
    }

    void addItem(Data data) {
        // 외부에서 item을 추가시킬 함수입니다.
        listData.add(data);
    }

    // RecyclerView의 핵심인 ViewHolder 입니다.
    // 여기서 subView를 setting 해줍니다.
    class ItemViewHolder extends RecyclerView.ViewHolder {

        private TextView textView1;
        private TextView textView2;
        private ImageView imageView;

        ItemViewHolder(View itemView) {
            super(itemView);

            textView1 = itemView.findViewById(R.id.textView1);
            textView2 = itemView.findViewById(R.id.textView2);
            imageView = itemView.findViewById(R.id.imageView);
        }

        void onBind(Data data) {
            textView1.setText(data.getTitle());
            textView2.setText(data.getContent());
            imageView.setImageResource(data.getResId());
        }
    }
}

- RecyclerView의 Adapter답게 RecyclerView.Adapter를 상속받아 사용합니다.

Data Class 만들기

package com.imaec.forblog;

public class Data {

    private String title;
    private String content;
    private int resId;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public int getResId() {
        return resId;
    }

    public void setResId(int resId) {
        this.resId = resId;
    }
}

- 좀 전에 만든 item의 TextView 2개와 ImageView 1개에 들어갈 data를 저장할 class입니다.

 위 4가지를 만들고 RecyclerView를 사용할 Activity 또는 Fragment 등에서(이 예제에서는 MainActivity.java) LayoutManager와 Adapter 객체를 만들어 RecyclerView에 연결시켜줍니다.

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

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(linearLayoutManager);

adapter = new RecyclerAdapter();
recyclerView.setAdapter(adapter);

 이제 adapter에 data들만 추가시켜주면 완성됩니다. MainActivity.java 전체 소스입니다.

MainActivity.java

package com.imaec.forblog;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerAdapter adapter;

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

        init();

        getData();
    }

    private void init() {
        RecyclerView recyclerView = findViewById(R.id.recyclerView);

        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(linearLayoutManager);

        adapter = new RecyclerAdapter();
        recyclerView.setAdapter(adapter);
    }

    private void getData() {
        // 임의의 데이터입니다.
        List<String> listTitle = Arrays.asList("국화", "사막", "수국", "해파리", "코알라", "등대", "펭귄", "튤립",
                "국화", "사막", "수국", "해파리", "코알라", "등대", "펭귄", "튤립");
        List<String> listContent = Arrays.asList(
                "이 꽃은 국화입니다.",
                "여기는 사막입니다.",
                "이 꽃은 수국입니다.",
                "이 동물은 해파리입니다.",
                "이 동물은 코알라입니다.",
                "이것은 등대입니다.",
                "이 동물은 펭귄입니다.",
                "이 꽃은 튤립입니다.",
                "이 꽃은 국화입니다.",
                "여기는 사막입니다.",
                "이 꽃은 수국입니다.",
                "이 동물은 해파리입니다.",
                "이 동물은 코알라입니다.",
                "이것은 등대입니다.",
                "이 동물은 펭귄입니다.",
                "이 꽃은 튤립입니다."
        );
        List<Integer> listResId = Arrays.asList(
                R.drawable.chrysanthemum,
                R.drawable.desert,
                R.drawable.hydrangeas,
                R.drawable.jellyfish,
                R.drawable.koala,
                R.drawable.lighthouse,
                R.drawable.penguins,
                R.drawable.tulips,
                R.drawable.chrysanthemum,
                R.drawable.desert,
                R.drawable.hydrangeas,
                R.drawable.jellyfish,
                R.drawable.koala,
                R.drawable.lighthouse,
                R.drawable.penguins,
                R.drawable.tulips
        );
        for (int i = 0; i < listTitle.size(); i++) {
            // 각 List의 값들을 data 객체에 set 해줍니다.
            Data data = new Data();
            data.setTitle(listTitle.get(i));
            data.setContent(listContent.get(i));
            data.setResId(listResId.get(i));

            // 각 값이 들어간 data를 adapter에 추가합니다.
            adapter.addItem(data);
        }

        // adapter의 값이 변경되었다는 것을 알려줍니다.
        adapter.notifyDataSetChanged();
    }
}

- 위 getData()에서 임의의 데이터를 만들어주고 이것을 for문 안에서 adapter에 추가시켜줍니다.

- data 추가가 완료되었으면 adapter에 추가가 완료되었다고 알려주는 함수인 notifyDataSetChanged()를 호출시켜줍니다.

// notifyDataSetChanged()를 호출하지 않으면 data가 노출되지 않습니다.

// 단, recyclerView.setAdapter() 함수가 data를 추가시켜준 뒤에 호출되었다면 data는 정상적으로 노출됩니다.

결과

 이렇게 RecyclerView의 기본적인 사용방법을 알아봤습니다. 분명 ListView보다 RecyclerView가 조금 더 복잡하고 처음엔 사용하기 어려울지 몰라도 성능이나 Custom 또는 flexible한 면에선 확실히 RecyclerView가 훨씬 좋다고 말 할수 있습니다. 처음엔 복사, 붙여넣기로 사용만 하더라도 꼭 ListView 사용에서 RecyclerView를 사용하는 것으로 갈아타면 좋을것입니다!

 궁금한 점이나 잘못된 점이 있다면 댓글을 남겨주시면 답변드리겠습니다^^

안드로이드 ListView 사용법

안드로이드 ListView Click 사용법

안드로이드 RecyclerView Click 사용법

안드로이드 RecyclerView를 이용한 프로젝트 구경하기