[Kotlin] RecyclerView

RecyclerView 란?

데이터 집합들을 각각의 개별 아이템 단위로 구성하여 화면에 출력해주는 뷰 그룹이며,
수 많은 데이터를 스크롤 가능한 리스트 형태로 표시해주는 위젯으로
ListView 보다 유연하고 성능이 향상된 버전이라고 할 수 있다.

RecyclerView의 주요 클래스

• View Holder
  각각의 뷰를 보관하는 Holder 객체 입니다.

• LayoutManager
  아이템의 배치를 담당합니다.
  LinearLayoutManager - 가로 / 세로
  GridLayoutManager - 그리드 형식
  StaggeredGridLayoutManager - 지그재그형의 그리드

• Adapter
  ListView와 동일한 Adapter의 개념으로 데이터와 아이템에 관한 View를 생성하는 기능을 담당합니다.

• ItemDecoration
  RecyclerView의 아이템을 꾸미는 역할을 합니다.

• ItemAnimation
  Item 추가 / 삭제시에 애니메이션을 적용할 때 사용합니다.

RecyclerView 사용법

📌 build.gradle (Module: app)에 종속 항목 추가

    implementation "androidx.recyclerview:recyclerview:1.2.0"

📌 RecyclerView의 아이템으로 사용될 Layout을 추가합니다.

layout -> New -> Layout Resource File

list_item.xml에 RecyclerView에 들어갈 프로필 item을 만들어 보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/iv_profile"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/man" />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:text="홍길동"
            android:textColor="#000000"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@+id/tv_job"
            app:layout_constraintStart_toEndOf="@+id/iv_profile"
            app:layout_constraintTop_toTopOf="@+id/iv_profile" />

        <TextView
            android:id="@+id/tv_job"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:text="안드로이드 개발자"
            android:textColor="#000000"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="@+id/iv_profile"
            app:layout_constraintStart_toEndOf="@+id/iv_profile"
            app:layout_constraintTop_toBottomOf="@+id/tv_name" />

        <TextView
            android:id="@+id/tv_age"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:text="25"
            android:textColor="#FB0000"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="@+id/tv_name"
            app:layout_constraintStart_toEndOf="@+id/tv_name"
            app:layout_constraintTop_toTopOf="@+id/tv_name" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

📌 activity_main.xml 에 RecyclerView 추가해주기

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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:id="@+id/rv_profile"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

📌 Profiles Data 클래스 생성

data class Profiles(val gender :Int, val name : String, val age : Int, val job : String)

📌 ProfileAdapter.kt
생성자로 ProfileList을 ArrayList형태로 타입은 Profiles로 생성한다.

package com.example.recyclerview

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class ProfileAdapter(val profileList : ArrayList<Profiles>) : RecyclerView.Adapter<ProfileAdapter.ViewHolder>(){

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ProfileAdapter.ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.list_item,parent,false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ProfileAdapter.ViewHolder, position: Int) {
        holder.gender.setImageResource(profileList.get(position).gender)
        holder.name.text= profileList.get(position).name
        holder.age.text= profileList.get(position).age.toString()
        holder.job.text= profileList.get(position).job
    }

    override fun getItemCount(): Int {
        return profileList.size
    }

    class ViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView) {
        val gender = itemView.findViewById<ImageView>(R.id.iv_profile)
        val name = itemView.findViewById<TextView>(R.id.tv_name)
        val age = itemView.findViewById<TextView>(R.id.tv_age)
        val job = itemView.findViewById<TextView>(R.id.tv_job)
    }
}

📌 MainActivity.kt
서버와 연결되어 있지 않기 때문에 data를 List에 샘플로 넣어준다. ProfileList변수를 arrayListOf형태로 Profiles 모델에 맞게
Profile을 입력한다.

package com.example.recyclerview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val profileList = arrayListOf(
            Profiles(R.drawable.man,"홍길동",25,"안드로이드 앱 개발자"),
            Profiles(R.drawable.woman,"김장미",42,"아이폰 앱 개발자"),
            Profiles(R.drawable.man,"이순신",29,"웹 앱 개발자"),
            Profiles(R.drawable.woman,"아무개",32,"플러트 앱 개발자"),
            Profiles(R.drawable.man,"김선달",28,"하이브리드 앱 개발자"),
            Profiles(R.drawable.woman,"김지우",36,"리액트 앱 개발자"),
            Profiles(R.drawable.woman,"박서윤",21,"유니티 앱 개발자"),
            Profiles(R.drawable.man,"최지호",26,"그냥 앱 개발자"),
            Profiles(R.drawable.woman,"김한샘",40,"피곤한 앱 개발자"),
            Profiles(R.drawable.man,"정지우",23,"앱 개발자")
        )

        rv_profile.layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)
        // 리사이클러뷰 성능 개선 방안
        rv_profile.setHasFixedSize(true)
        rv_profile.adapter = ProfileAdapter(profileList)
    }
}