[안드로이드] RecyclerView 리사이클러뷰

리사이클러뷰(RecyclerView)는 이미지나 텍스트를 리스트화 해서 스크롤하면서 볼 수 있게 해주는 컨테이너이다. 기존에 사용하던 그리드 뷰와 리스트뷰의 단점들을 보완한, 리스트뷰의 확장판 또는 개선판이라고 볼 수 있다.
리스트뷰(ListView)는 리스트 항목이 갱신될 떄마다, 매번 아이템 뷰를 새로 구성해야 하는데, 이는 많은 수의 데이터 집합을 표시하는 데 있어 성능 저하를 야기할 수 있다. 리사이클러뷰는 이러한 리스트뷰의 단점을 보완하여 아이템을 표시하기 위해 생성한 뷰를 재활용한다. 

 

---

 

▼ 실습할 예제 화면

 

1. 라이브러리 추가

 

 

▼ 안드로이드 스튜디오에 리사이클러뷰 라이브러리를 추가해주고 bulid.gradle에서 추가되었는지 확인해준다.

 

 

---

2. xml

1. 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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerView"
        android:background="#F0F0F0"/>

</LinearLayout>

• 메인 xml에 리사이클러뷰를 추가해준다.

• 여기에 나중에 ItemList를 연결할 예정

   

 

2. item_list.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="4dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TITLE"
            android:textStyle="bold"
            android:textSize="20dp"
            android:textColor="@android:color/black"
            android:id="@+id/title"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="content"
            android:textColor="@android:color/darker_gray"
            android:id="@+id/content"/>

    </LinearLayout>

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:scaleType="centerCrop"
        android:id="@+id/image"
        android:src="@mipmap/ic_launcher"/>

</LinearLayout>

• 리사이클러뷰에 연결해 보여줄 리스트 레이아웃을 만들어준다.

 

 

---

3. java

RecyclerView(리사이클러뷰)에는 리사이클 러뷰의 형태를 결정하는 LayoutManager(레이아웃 매니저)와 레이아웃에 데이터를 보여줄 DataSet(데이터셋), 데이터셋과 레이아웃 매니저를 연동시켜줄 Adapter(어댑터)가 필요하다.

 

 

1. MainActivity.java

package com.example.myrecyclerviewex;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements MyRecyclerAdapter.MyRecyclerViewClickListener {

	ArrayList<ItemData> dataList = new ArrayList<>();
    int[] cat = {R.drawable.pic_001, R.drawable.pic_002, R.drawable.pic_003,
            R.drawable.pic_004, R.drawable.pic_005, R.drawable.pic_006,
            R.drawable.pic_007, R.drawable.pic_008, R.drawable.pic_009,
            R.drawable.pic_010, R.drawable.pic_011, R.drawable.pic_012,
            R.drawable.pic_013, R.drawable.pic_014, R.drawable.pic_015,
            R.drawable.pic_016, R.drawable.pic_017, R.drawable.pic_018,
            R.drawable.pic_019, R.drawable.pic_020, R.drawable.pic_021,
            R.drawable.pic_022, R.drawable.pic_023, R.drawable.pic_024,
            R.drawable.pic_025, R.drawable.pic_026, R.drawable.pic_027,
            R.drawable.pic_028, R.drawable.pic_029, R.drawable.pic_030,
            R.drawable.pic_031, R.drawable.pic_032, R.drawable.pic_033,
            R.drawable.pic_034, R.drawable.pic_035};

    final MyRecyclerAdapter adapter = new MyRecyclerAdapter(dataList);
    static int i=0;

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

        RecyclerView recyclerView = findViewById(R.id.recyclerView);
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);

        for (int i=0; i<10; i++) {
            dataList.add(new ItemData(cat[i], "TITLE "+i,
                    String.format("리사이클러뷰 %03d", i)));
        }

        recyclerView.setAdapter(adapter);
        adapter.setOnClickListener(this);

    }

    @Override
    public void onItemClicked(int position) {
        Toast.makeText(getApplicationContext(), "Item : "+position, Toast.LENGTH_SHORT).show();
    }

    public void onTitleClicked(int position) {
        Toast.makeText(getApplicationContext(), "Title : "+position, Toast.LENGTH_SHORT).show();
    }

    public void onContentClicked(int position) {
        Toast.makeText(getApplicationContext(), "Content : "+position, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onImageViewClicked(int position) {
        Toast.makeText(getApplicationContext(), "Image : "+position, Toast.LENGTH_SHORT).show();
    }

    public void onItemLongClicked(int position) {
        adapter.remove(position);
        Toast.makeText(getApplicationContext(),
                dataList.get(position).getTitle()+" is removed",Toast.LENGTH_SHORT).show();
    }


}

 

 

 

 

2. ItemData.java

package com.example.myrecyclerviewex;

public class ItemData {
    int image;
    String title;
    String content;


    public ItemData(int image, String title, String content) {
        this.image = image;
        this.title = title;
        this.content = content;
    }

    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 getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }
}

 

 

3. MyRecyclerViewAdapter.java (Adapter)

package com.example.myrecyclerviewex;

import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

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

    private ArrayList<ItemData> itemData;
    public MyRecyclerAdapter(ArrayList<ItemData> itemData) {
        this.itemData = itemData;
    }

    public interface MyRecyclerViewClickListener{
        void onItemClicked(int position);
        void onTitleClicked(int position);
        void onContentClicked(int position);
        void onItemLongClicked(int position);
        void onImageViewClicked(int position);
    }


    private MyRecyclerViewClickListener mListener;

    public void setOnClickListener(MyRecyclerViewClickListener listener) {
        this.mListener = listener;
    }


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

    @Override
    public void onBindViewHolder(@NonNull final ViewHolder holder, int position) {
        ItemData item = itemData.get(position);
        holder.title.setText(item.getTitle());
        holder.content.setText(item.getContent());
        holder.image.setImageResource(item.getImage());

        if (mListener != null) {
            final int pos = position;
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mListener.onItemClicked(pos);
                }
            });
            holder.title.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mListener.onTitleClicked(pos);
                }
            });
            holder.content.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mListener.onContentClicked(pos);
                }
            });
            holder.image.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                        mListener.onImageViewClicked(pos);
                }
            });
            holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    mListener.onItemLongClicked(holder.getAdapterPosition());
                    return true;
                }
            });
        }
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView title;
        TextView content;
        ImageView image;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            title = itemView.findViewById(R.id.title);
            content = itemView.findViewById(R.id.content);
            image = itemView.findViewById(R.id.image);

            //이미지뷰 원형으로 표시
            image.setBackground(new ShapeDrawable(new OvalShape()));
            image.setClipToOutline(true);
        }
    }

    //리스트 삭제 이벤트
    public void remove(int position){
        try {
            itemData.remove(position);
            notifyDataSetChanged();
        } catch (IndexOutOfBoundsException e){
            e.printStackTrace();
        }
    }
}

 

 

---

3. 결과화면