[안드로이드] 리싸이클러뷰 사용하기 - RecyclerView, ItemViewHolder

 

 

 

 

 

 

RecyclerView를 이용해서 데이터를 추가하는 예제를 만들어보겠습니다.

 

 

1. build.gradle 에 dependencies 추가

dependencies {
    implementation 'com.android.support:recyclerview-v7:28.0.0'
    implementation 'androidx.cardview:cardview:1.0.0'
}

 

2. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:textColor="@android:color/black"
            android:gravity="center"
            android:text="이름"
            android:textSize="20sp"
            android:layout_weight="2"
            android:layout_width="0dp"
            android:layout_height="match_parent"/>
        <EditText
            android:id="@+id/name_et"
            android:inputType="text"
            android:imeOptions="actionNext"
            android:maxLines="1"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="20sp"
            android:layout_weight="8"
            android:layout_width="0dp"
            android:layout_height="match_parent"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:layout_marginBottom="20dp">
        <TextView
            android:textColor="@android:color/black"
            android:gravity="center"
            android:text="나이"
            android:textSize="20sp"
            android:layout_weight="2"
            android:layout_width="0dp"
            android:layout_height="match_parent"/>
        <EditText
            android:id="@+id/age_et"
            android:inputType="number"
            android:imeOptions="actionDone"
            android:maxLines="1"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="20sp"
            android:layout_weight="8"
            android:layout_width="0dp"
            android:layout_height="match_parent"/>

    </LinearLayout>


    <Button
        android:layout_gravity="center"
        android:background="#2196F3"
        android:imeOptions="actionDone"
        android:id="@+id/add_bt"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:text="추가"
        android:layout_width="wrap_content"
        android:layout_height="30dp"/>




    <androidx.recyclerview.widget.RecyclerView
        android:layout_marginTop="10dp"
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>



</LinearLayout>

 

 

3. list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardBackgroundColor="#FFFFFF"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/list_image"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:padding="5dp"
                app:srcCompat="@mipmap/ic_launcher" />

            <TableLayout
                android:gravity="center"
                android:stretchColumns="1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <TableRow>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="left"
                        android:layout_marginLeft="10dp"
                        android:textColor="@android:color/black"
                        android:text="이름"
                        android:textSize="20sp" />

                    <TextView
                        android:id="@+id/list_name"
                        android:textColor="@android:color/black"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:textSize="20sp" />

                </TableRow>


                <TableRow>

                    <TextView
                        android:textColor="@android:color/black"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="left"
                        android:layout_marginLeft="10dp"
                        android:text="나이"
                        android:textSize="20sp" />

                    <TextView
                        android:id="@+id/list_age"
                        android:textColor="@android:color/black"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:textSize="20sp" />
                </TableRow>


            </TableLayout>


        </LinearLayout>

    </androidx.cardview.widget.CardView>



</FrameLayout>

리싸이클러뷰에 데이터를 추가했을때 리스트에 실제로 보여지는 뷰를 꾸미는 영역이라고 생각하시면 됩니다.

원하시는대로 꾸며서 사용하시면 됩니다.

 

4.Person.java

public class Person {
    int image;
    String name;
    int age;

    public Person(){

    }

    public int getImage() {
        return image;
    }

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



    public String getName() {
        return name;
    }

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

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

 

 

5. ListAdapter.java

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;

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

    ArrayList<Person> items = new ArrayList<>();

    public ListAdapter(){
    }


    @NonNull
    @Override
    public ItemViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //LayoutInflater를 이용해서 원하는 레이아웃을 띄워줍니다.
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        View view = inflater.inflate(R.layout.list_item, parent, false);
        return new ItemViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ItemViewHolder holder, int position) {
        //ItemViewHolder가 생성되고 넣어야할 코드들을 넣어줍다.
        //보통 onBind 함수 안에 모두 넣어줍니다.
        holder.onBind(items.get(position));
    }

    @Override
    public int getItemCount() {
        return items.size();
    }
	
    public void addItem(Person person){
    	//items에 Person객체 추가
        items.add(person);
        //추가후 Adapter에 데이터가 변경된것을 알림
        notifyDataSetChanged();
    }

    class ItemViewHolder extends RecyclerView.ViewHolder {

        TextView list_name,list_age;
        ImageView list_image;



        public ItemViewHolder(View itemView) {
            super(itemView);
            list_name = itemView.findViewById(R.id.list_name);
            list_age = itemView.findViewById(R.id.list_age);
            list_image = itemView.findViewById(R.id.list_image);
        }

        public void onBind(Person person) {
            list_name.setText(person.getName());
            list_age.setText(String.valueOf(person.getAge()));
            list_image.setImageResource(person.getImage());
        }
    }
}

 

6. MainActivity.java

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.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    EditText name_et,age_et;
    Button add_bt;
    RecyclerView rv;
    ListAdapter adapter;

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


        name_et = findViewById(R.id.name_et);
        age_et = findViewById(R.id.age_et);
        add_bt = findViewById(R.id.add_bt);
        add_bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //EditText 입력된 값 가져오기
                String name = name_et.getText().toString();
                int age = Integer.parseInt(age_et.getText().toString());

                //이미지 값 세팅
                int image;
                switch (name){
                    case "파이리" :{
                        image = R.drawable.image1;
                        break;
                    }
                    case "피카츄" :{
                        image = R.drawable.image2;
                        break;
                    }
                    case "꼬부기" :{
                        image = R.drawable.image3;
                        break;
                    }

                    default: image = R.drawable.ic_launcher_background;
                }

                //Person 객체 생성, 값 세팅
                Person person = new Person();
                person.setName(name);
                person.setAge(age);
                person.setImage(image);

                //ListAdapter에 객체 추가
                adapter.addItem(person);
                adapter.notifyDataSetChanged();

                //EditText 초기화
                name_et.setText("");
                age_et.setText("");

                //데이터 추가 확인 토스트 띄우기
                Toast.makeText(MainActivity.this, "목록에 추가되었습니다", Toast.LENGTH_SHORT).show();
                name_et.requestFocus();

            }
        });

        rv = findViewById(R.id.rv);
        //RecyclerView의 레이아웃 방식을 지정
        LinearLayoutManager manager = new LinearLayoutManager(this);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        rv.setLayoutManager(manager);

        //RecyclerView의 Adapter 세팅
        adapter = new ListAdapter();
        rv.setAdapter(adapter);
    }
}

 

 

이미지에는 저작권이 있기 때문에 캡처를 해서 사용했고 이미지를 따로 첨부하지는 않겠습니다.

drawable폴더 안에 원하는대로 이미지를 넣어주시고 변경해서 사용하시기 바랍니다. 

 

리싸이클러뷰 아이템의 순서변경, 삭제 이벤트는 링크를 참고해주세요