[안드로이드] 안드로이드 스튜디오 입문 (RecyclerView)

이번 시간에는 RecyclerView에 대해서 공부해보겠습니다. 'RecyclerView'는 뷰를 재활용하면서 무한으로 'ListView'를 생성할 수 있는 커스텀적인 'ListView'입니다. 정말 많이 사용한다고 합니다!

'Empty Activity'로 생성하고 레이아웃으로 가서 화면을 구성해봅시다. 최상위 레이아웃은 'LinearLayout'으로 바꿔주고 'orientation'을 'vertical'로 설정합니다. 그리고 기존에 있던 'TextView'를 지워줍니다. 그럼 빈 화면의 구성은 끝났습니다. 이제 본격적으로 시작해보겠습니다!

 

build.gradle

좌측의 Project 창에서 app - Gradle Scripts - build.gradle (Module :app)을 클릭하여 파일을 엽니다. 코드 아래쪽에 dependencies가 있는데 이 코드를 클릭하고 기다리면 전구가 뜨게 됩니다. 전구를 클릭하고 'Add library dependency'를 클릭하고 아래에 있는 것을 찾아줍니다.

전구 클릭 - 'Add library dependency' 클릭

androidx.recyclerview:recyclerview:1.2.1

하게되면 위쪽에 'Sync Now'를 눌러줍니다.

 

activity_main 레이아웃 구성하기

먼저 recyclerview를 작성합니다. 다음과 같이 작성해줍니다.

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rcV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbarFadeDuration="0"
        android:scrollbarSize="5dp"
        android:scrollbarThumbVertical="@android:color/darker_gray"
        android:scrollbars="vertical"
        android:layout_weight="1">
    </androidx.recyclerview.widget.RecyclerView>

 

아래에는 버튼을 생성합니다.

    <Button
        android:id="@+id/btn_add"
        android:layout_weight="8"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="추가"
        />

이렇게 작성하면 recyclerview 화면은 완성되었습니다.

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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rcV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbarFadeDuration="0"
        android:scrollbarSize="5dp"
        android:scrollbarThumbVertical="@android:color/darker_gray"
        android:scrollbars="vertical"
        android:layout_weight="1">
    </androidx.recyclerview.widget.RecyclerView>

    <Button
        android:id="@+id/btn_add"
        android:layout_weight="8"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="추가"
        />

</LinearLayout>

 

item_list 레이아웃 구성하기

이제 한 리스트 안에 들어갈 데이터들을 만들어줍니다. 좌측 Project창에서 app - res - layout을 우클릭 - New - Layout Resource File를 클릭하여 파일을 생성합니다. 화면이 뜨면 최상위 레이아웃을 'LinearLayout'으로 바꿔줍니다.

내부에 'LinearLayout'을 추가합니다. 이때 이 레이아웃은 'orientation'을 'horizontal'로 설정해줍니다. 레이아웃 내부에 'ImageView'를 넣습니다. 이미지는 임시로 안드로이드 스튜디오에서 제공하는 이미지를 넣었습니다. ImageView에는 아이디도 설정합니다. 그럼 아래 사진처럼 배치됩니다.

 

이제 이미지 옆에 들어갈 내용을 넣어보겠습니다. 'LinearLayout'을 추가해 'orientation'을 'vertical'로 설정합니다. 여기 안에는 'TextView'를 2개 넣어줍니다. 이 'TextView' 2개도 id를 설정해줍니다. 이렇게하면 레이아웃 구성이 끝났습니다.

item_list.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">

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

        <ImageView
            android:id="@+id/iv_profile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="김낭"/>

            <TextView
                android:id="@+id/tv_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="코딩 기록 저장소"/>
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

 

리스트 데이터 클래스 만들기

이제 리스트 데이터가 들어갈것을 선언을 다 해줘야합니다. 좌측의 Project 켜고 app - java - 첫번째 폴더 우클릭 - New - Java Class를 눌러 생성합니다. 전 파일 이름은 'MainData'로 생성했습니다.

아까 레이아웃에서 만들었던 'ImageView', 'TextView' 2개 총 3개의 위젯 3개를 데이터로 선언을 합니다.아래에는 키보드 'Alt' + 'Enter'을 누르고 'Constructor'를 클릭하여 생성해줍니다. 'Ctrl' + 클릭을 해 3개 다 선택할 수 있도록 합니다. 완료를 누르면 구조가 자동으로 완성이 됩니다.

이번엔 다시 'Alt' + 'Enter'을 눌러 이번엔 'Getter and Setter'를 선택하여 3개가 선택하고 생성해줍니다.

 

MainAdapter 구현하기

Adapter를 만들고 item_list와 Adapter를 연결할것입니다.

아까 'MainData' 파일을 만들었던것처럼 이번엔 'MainAdatper'를 생성합니다. 클래스 이름 바로옆에 다음과 같이 코드를 작성합니다.

public class MainAdapter extends RecyclerView.Adapter<MainAdapter.CustomViewHolder> {

}

그럼 에러가 뜰텐데 그것을 'Alt' + 'Enter' 눌러 해결해줍니다. 해결이 완료된 상태입니다. 이제 메소드들 위에 MainData를 담을 ArrayList를 선언합니다. 이것은 'ListView'의 아이템들을 담을 ArrayList가 될것입니다.

선언한 코드 아래쪽에 'Alt' + 'Insert'를 눌러 Constructor를 불러옵니다.

 

CustomViewHolder 클래스

CustomViewHolder 클래스와 메소드에 다음과 같이 작성합니다.

 

onCreateViewHolder()

Activity의 onCreate와 비슷한데 'ListView'가 처음 생성될때의 생명 주기를 뜻합니다. 여기 안쪽에 다음과 같이 작성합니다.

 

 

onBindViewHolder()

이것은 실제 추가될때에 대한 생명주기입니다. 먼저 다음과 같이 적어줍니다. 이곳에는 ListView가 클릭이나 롱클릭이 되었을때의 기능도 추가할 수 있습니다. 이벤트 리스너에 대한 내용은 아래에 나옵니다.

        holder.iv_profile.setImageResource(arrayList.get(position).getIv_profile());
        holder.tv_name.setText(arrayList.get(position).getTv_name());
        holder.tv_content.setText(arrayList.get(position).getTv_content());

 

setOnClickListener

list를 클릭했을 때의 이벤트를 처리합니다. id로부터 getText()를 하면 그것은 Object형입니다. 그것을 문자열형으로 변환하여 curName에 저장합니다. 이렇게 하면 curName의 값은 클릭한 리스트의 이름을 가져옵니다.

일단 테스트 해보기위해 클릭을 하면 Toast메시지로 이름이 뜨도록 했습니다.

        holder.itemView.setTag(position);
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String curName = holder.tv_name.getText().toString();
                Toast.makeText(view.getContext(),curName,Toast.LENGTH_SHORT).show();
            }
        });

 

setOnLongClickListener

list를 길게 클릭하면 삭제를 하는 기능을 구현합니다. 

        holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                remove(holder.getAdapterPosition());
                return true;
            }
        });

 

getItemCount()

삼항연산자를 이용해 list의 개수를 출력해줄것입니다. arrayList가 null이 아니라면 arrayList.size를 리턴하고, null이라면 0을 리턴합니다.

    @Override
    public int getItemCount() {
        return (null != arrayList ? arrayList.size() : 0 );
    }

 

remove()

getItemCount()메소드 아래에 remove()를 생성합니다. arrayList.remove()로 list를 지우고 notify는 새로고침을 해주는 역할이라고 합니다. ListView를 지우고 새로고침을 해줘야 add, remove, notify되는 것들이 이루어집니다.

    public void remove(int position) {
        try {
            arrayList.remove(position);
            notifyItemRemoved(position);
        } catch(IndexOutOfBoundsException ex){
            ex.printStackTrace();
        }
    }

이정도하면 Adapter쪽에는 구현이 되었습니다. 이제 마지막으로 activity_main 부분을 구현해보겠습니다.

 

MainAdapter.java 코드 보기

package com.example.practice12;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;

public class MainAdapter extends RecyclerView.Adapter<MainAdapter.CustomViewHolder> {
    private ArrayList<MainData> arrayList;

    public MainAdapter(ArrayList<MainData> arrayList) {
        this.arrayList = arrayList;
    }

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

    @Override
    public void onBindViewHolder(@NonNull MainAdapter.CustomViewHolder holder, int position) {
        holder.iv_profile.setImageResource(arrayList.get(position).getIv_profile());
        holder.tv_name.setText(arrayList.get(position).getTv_name());
        holder.tv_content.setText(arrayList.get(position).getTv_content());

        holder.itemView.setTag(position);
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String curName = holder.tv_name.getText().toString();
                Toast.makeText(view.getContext(),curName,Toast.LENGTH_SHORT).show();
            }
        });

        holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                remove(holder.getAdapterPosition());
                return true;
            }
        });


    }

    @Override
    public int getItemCount() {
        return (null != arrayList ? arrayList.size() : 0 );
    }

    public void remove(int position) {
        try {
            arrayList.remove(position);
            notifyItemRemoved(position);
        } catch(IndexOutOfBoundsException ex){
            ex.printStackTrace();
        }
    }



    public class CustomViewHolder extends RecyclerView.ViewHolder {
        protected ImageView iv_profile;
        protected TextView tv_name;
        protected TextView tv_content;

        public CustomViewHolder(@NonNull View itemView) {
            super(itemView);
            this.iv_profile = (ImageView) itemView.findViewById(R.id.iv_profile);
            this.tv_name = (TextView) itemView.findViewById(R.id.tv_name);
            this.tv_content = (TextView) itemView.findViewById(R.id.tv_content);

        }
    }
}

 

MainActivity 구현하기

이제 메인 액티비티와 Adapter를 연결해야합니다. 먼저 변수를 선언합니다.

    private ArrayList<MainData> arrayList;
    private MainAdapter mainAdapter;
    private RecyclerView recyclerView;
    private LinearLayoutManager linearLayoutManager;

그다음 onCreate 생명주기에 들어갈 코드를 작성합니다. 

        recyclerView = (RecyclerView)findViewById(R.id.rcV);
        linearLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(linearLayoutManager);

        arrayList = new ArrayList<>();

        mainAdapter = new MainAdapter(arrayList);
        recyclerView.setAdapter(mainAdapter);

activity_main.xml의 RecyclerView의 id값을 가져옵니다. LayoutManager를 recyclerView에 세팅합니다.

그리고 아까 만든 MainAdapter를 가지고와서 arrayList에 담아줍니다. 그 담아져있는 데이터의 Adapter를 recyclerView에 세팅합니다.

 

이제 Button의 기능을 구현해볼겁니다.

        Button btn_add = (Button) findViewById(R.id.btn_add);
        btn_add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                MainData mainData = new MainData(R.mipmap.ic_launcher,"김낭","코딩 기록 저장소");
                arrayList.add(mainData);
                mainAdapter.notifyDataSetChanged();
            }
        });

버튼의 id값을 가져와서 setOnClickListener를 생성합니다. 그리고 클릭했을때의 메소드에 작성합니다. 아까 선언했던 mainData를 가지고옵니다. 이때 여기에 tv_name, tv_content에 들어갈 텍스트를 자유롭게 입력하면 됩니다.

mainData를 arrayList에 추가하고 새로고침합니다.

 

실행 결과 확인하기

참고한 영상은 다음과 같습니다.

 

안드로이드 앱 개발 강의 #12

https://youtu.be/kNq9w1_nhL4