(Android Studio) Chapter5. Recycler View

1. Build order

  1) module implementation

    - 24버전에서는 RecyclerView 모듈을 과거에 compile했던 것을 implementation 하는 것으로 마이그레이션했고 이후 버전에서는 라이브러리 기본제공하고있어 별도로 선언할 필요가 없어짐. 대신, 컴파일버전, 타겟버전을 정확하게 맞춰줄 필요 있음

  2) activity main layout

    - recyclerview 레이아웃(사이즈, 색, 넓이 위치, 아이디 부여 등을 먼저 셋팅)

    - 버튼 레이아웃(버튼 사이즈, 무게, 텍스트 설정)

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        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>

  3) item_list create & layout

    - item_list.xml을 layout 디렉토리에 생성 후 레이아웃 정의

    - 추가 누르면 아이템리스트가 생성될 때 레이아웃을 정의함

    - LinearLayout > ImageView > LinearLayout > TextView

<?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:layout_gravity="center_vertical"
            android:orientation="vertical">

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

            <TextView
                android:id="@+id/tv_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="리사이클러뷰"/>


        </LinearLayout>

    </LinearLayout>


</LinearLayout>

  4) MainData list create

    - MainData.xml을 java디렉토리 하위에 생성 후 리스트 생성

    - item_list에서 선언한 레이아웃에 맞춰 생성할 때 어떤 것들이 생성될 지 정보 정의

    - 전역변수에 private 생성자로 프로필, 이름, 내용을 정의

    - 메인데이터 메소드를 불러오면 프로필, 이름, 내용을 생성한다.

    - 프로필을 받아서 리턴하고 리턴 받은 값을 셋팅, 이후 이름과 내용도 같은 시퀀스로 리턴 > 셋팅

package com.example.recyclerviewexample;

public class MainData {

    private int iv_profile;
    private String tv_name;
    private String tv_content;


    public MainData(int iv_profile, String tv_name, String tv_content) {
        this.iv_profile = iv_profile;
        this.tv_name = tv_name;
        this.tv_content = tv_content;
    }

    public int getIv_profile() {
        return iv_profile;
    }

    public void setIv_profile(int iv_profile) {
        this.iv_profile = iv_profile;
    }

    public String getTv_name() {
        return tv_name;
    }

    public void setTv_name(String tv_name) {
        this.tv_name = tv_name;
    }

    public String getTv_content() {
        return tv_content;
    }

    public void setTv_content(String tv_content) {
        this.tv_content = tv_content;
    }
}

  5) MainAdapter holder create

    - java하위에 MainAdapter를 생성하여 Holder를 생성하는 단계 

    - ArrayList를 선언하고 MainData에서 선언된 리스트 구성을 가져옴

    - 전역변수에 MainData를 담을 ArrayList를 정의

    - Viewholder를 만들고(onCreate), 홀더에 정보를 붙이고(onBind), 하위에 붙인 데이터를 클릭하면(onClick) toast 메시지를 띄우는 기능을 선언해주고

    - 세트 수를 확인(getItemCount)해서 더 이상 만들지 못할 상황을 판단하고, 만들려던 리스트 목록을 삭제(Remove)한 후 새로고침

    - 커스텀이 필요하다면 커스텀(CustomViewHolder) 기능을 추가하고, 프로필은 사진을, 이름과 컨텐츠는 문자열로 표현되도록 정의

package com.example.recyclerviewexample;

import android.media.Image;
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 androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

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();
                //toast구조 (뭘 할거냐, 어떤 데이터를 띄울거냐, 몇 초 간 띄울 것이냐)
            }
        });

        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);
        }
    }
}

  6) MainActivity(ArrayList, MainAdapter, recyclerview, LinearLayoutManager setting)

    - 마지막으로 MainActivity에서 앞서 선언된 자바 데이터들을 통합하는 단계

    - ArrayList, MainAdapter, recyclerview, LinearLayoutManager를 정의하고

    - onCreate를 하면 어레이리스트를 만들고, 생성된 데이터를 담아서 리사이클러뷰에 셋팅을 정의

    - 버튼을 누르면 onClickListener가 위 셋팅을 실행

    - 클릭을 하면(onClick) 어레이리스트에 메인데이터를 더하고 새로고침을 하도록 정의

 

2. 참고자료

https://developer.android.com/guide/topics/ui/layout/recyclerview?hl=ko