[Android/안드로이드] RecyclerView(리사이클러뷰) 뷰 재활용하기

기존의 ListView는 커스터마이징 하기에도 힘들었고, 구조적인 문제로 성능상의 문제가 있었기 때문에 보다 유연하고 성능이 향상된 RecyclerView가 생겨났습니다. RecyclerView와 ListView의 가장 큰 차이점은 리사이클러뷰는 레이아웃 매니저와 , 뷰홀더를 의무적으로 사용해야하고 , Item에 대한 뷰의 변형이나 애니메이션할 수 있는 개념이 추가되면서 리스트뷰의 성능상의 이슈도 해결해 주면서 많은 타입의 뷰들을 가독성 있게 보여줄 수 있게 되었습니다. 

 

우선 리사이클러뷰를 사용하기 위해서는 여러 클래스가 필요합니다.

 

주요 클래스

• Adapter - 데이터와 아이템에 대한 뷰를 생성해주는 기능을 하고있습니다.
• ViewHolder - 재활용 뷰에 대한 모든 서브 뷰를 보유하고 있습니다.(데이터 값에 따라 변경되어 보여질 뷰라고 생각하시면 됩니다.)
• Data - 데이터의 값을 저장하는 클래스입니다.

Data

DataMovie.java

  
  package com.example.recyclerviewtest;
  
  public class DataMovie {
      int image;
      String title;
  
      public DataMovie(int image, String title){
          this.image = image;
          this.title = title;
      }
  
      public int getImage() {
          return image;
      }
  
      public void setImage(int image) {
          this.image = image;
      }
  
      public String getTitle() {
          return title;
      }
  
      public void setTitle(String title) {
          this.title = title;
      }
  }
  

뷰에 보여주기 위해 필요한 데이터들을 하나의 클래스로 모아줍니다.

 

Adapter

RecyclerVierAdapter.java

 

 
 package com.example.recyclerviewtest;
  
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  
  import androidx.annotation.NonNull;
  import androidx.recyclerview.widget.RecyclerView;
  
  import java.util.ArrayList;
  
  public class RecyclerVierAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
  
      // adapter에 들어갈 list 입니다.
      private ArrayList<DataMovie> listData = new ArrayList<>();
  
      @NonNull
      @Override
      public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
          View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_movie, parent, false);
          return new ViewHolderMovie(view);
      }
  
      @Override
      public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
          ((ViewHolderMovie)holder).onBind(listData.get(position));
      }
  
      @Override
      public int getItemCount() {
          return listData.size();
      }
  
      void addItem(DataMovie data) {
          // 외부에서 item을 추가시킬 함수입니다.
          listData.add(data);
      }
  }
  

onCreateViewHolder(@NonNull ViewGroup parent, int viewType) - 뷰 홀더를 생성하고 뷰를 붙여주는 역할을 합니다.

 

onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) - 재활용 되는 뷰가 호출하여 실행되는 메소드입니다. 뷰홀더에 있는 onBind함수를 통해 리스트에있는 position번째 값의 데이터를 넘겨줍니다.

 

getItemCount() - 데이터의 개수를 반환해줍니다.(리스트가 몇개 나와야 하는지에 대한 갯수입니다)

 

 

ViewHolder

ViewHolderMovie.java

  
  package com.example.recyclerviewtest;
  
  import android.view.View;
  import android.widget.ImageView;
  import android.widget.TextView;
  
  import androidx.annotation.NonNull;
  import androidx.recyclerview.widget.RecyclerView;
  
  public class ViewHolderMovie extends  RecyclerView.ViewHolder {
  
      TextView tv_movie_title;
      ImageView iv_movie;
  
  
      public ViewHolderMovie(@NonNull View itemView) {
          super(itemView);
  
          iv_movie = itemView.findViewById(R.id.iv_movie);
          tv_movie_title = itemView.findViewById(R.id.tv_movie_title);
  
      }
  
      public void onBind(DataMovie data){
          tv_movie_title.setText(data.getTitle());
          iv_movie.setImageResource(data.getImage());
      }
  }
  

ViewHolderMovie(@NonNull View itemView) - 처음 생성될때 한번만 호출되는 부분입니다. 한번만 호출되는 부분이기에 보통 findViewById()를 통해 뷰를 연결합니다.

onBind(Data data) - onBind는 데이터를 붙이기 위해 만든 함수입니다. 데이터에 있는 값에 맞게 뷰에 데이터를 보여줍니다.

 

이제 adapter에 data들만 추가시켜주면 완성됩니다.

 

Adapter Connect

MainActivity.java

  
  package com.example.recyclerviewtest;
  
  import androidx.appcompat.app.AppCompatActivity;
  import androidx.recyclerview.widget.LinearLayoutManager;
  import androidx.recyclerview.widget.RecyclerView;
  
  import android.os.Bundle;
  
  public class MainActivity extends AppCompatActivity {
  
      RecyclerVierAdapter 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 RecyclerVierAdapter();
          recyclerView.setAdapter(adapter);
      }
  
      private void getData(){
          DataMovie data = new DataMovie(R.drawable.iron_man, "아이언맨");
          adapter.addItem(data);
          data = new DataMovie(R.drawable.spider_man, "스파이더맨");
          adapter.addItem(data);
          data = new DataMovie(R.drawable.black_panther, "블랙팬서");
          adapter.addItem(data);
          data = new DataMovie(R.drawable.doctor, "닥터스트레인지");
          adapter.addItem(data);
          data = new DataMovie(R.drawable.hulk, "헐크");
          adapter.addItem(data);
          data = new DataMovie(R.drawable.thor, "토르");
          adapter.addItem(data);
      }
  }
  

 

 

LinearlayoutManager - 리사이클러뷰에서 가장 많이 쓰이는 레이아웃으로 수평,수직 스크롤을 제공하는 리스트를 만들 수 있습니다.

getData()함수를 통해서 아답타 안에 데이터를 넣어줌으로서 완성됩니다.

 

레이아웃 소스코드입니다.

 

activity_main.xml

  
  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".MainActivity">
      
      <androidx.recyclerview.widget.RecyclerView
          android:id="@+id/recyclerView"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
  </LinearLayout>
  

 

item_movie.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">
  
      <ImageView
          android:id="@+id/iv_movie"
          android:scaleType="centerCrop"
          android:layout_width="match_parent"
          android:layout_height="250dp"/>
  
      <TextView
          android:padding="20dp"
          android:gravity="center"
          android:textSize="16dp"
          android:id="@+id/tv_movie_title"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"/>
  
  </LinearLayout>
  

 

결과화면

 

RecyclerView의 기본적인 사용방법에 대해 알아보았습니다. 처음에는 ListView보다 복잡하고 사용하기 어려울지 몰라도 성능이나 커스터마이징면에서는 확실히 리사이클러뷰가 뛰어납니다.

 

질문사항이나 제가 실수한 점이 있다면 댓글을 남겨주시면 최대한 빠르게 답변해드리겠습니다.