리사이클러뷰(RecyclerView)는 이미지나 텍스트를 리스트화 해서 스크롤하면서 볼 수 있게 해주는 컨테이너이다. 기존에 사용하던 그리드 뷰와 리스트뷰의 단점들을 보완한, 리스트뷰의 확장판 또는 개선판이라고 볼 수 있다.
▼ 실습할 예제 화면
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. 결과화면
