[Android/Kotlin] RecyclerView 만들기

오늘은 간단한 리사이클러뷰 시리즈 1탄인 RecyclerView 만드는 방법에 대해 소개해보고자 합니다!

 

RecyclerView 란?!

RecyclerView란 ? 데이터 집합들을 각각의 개별 아이템 단위로 구성하여 화면에 출력해주는 뷰 그룹이며, 수 많은 데이터를 스크롤 가능한 리스트 형태로 표시해주는 위젯을 의미합니다.

즉, 아래 사진과 같이 동일한 형식을 갖는 수 많은 리스트들을 구현할 때 주로 사용합니다.

 

RecyclerView와 ListView의 차이는 ?!

둘다 동일한 형식의 리스트들을 구현할 때 사용하지만 ListView와 RecyclerView에는 비슷한거 같지만 세밀한 차이가 존재합니다.

	RecyclerView	ListView
ViewHolder	ViewHolder 패턴을 이용한다.	ViewHolder 패턴 이용하지 않는다.
Item Layout	가로, 세로, Grid 형식 모두 지원	세로 방향만 지원
Item Animation	아이템 애니메이션 처리 클래스 존재	아이템 추가/제거시에 적용가능한 애니메이션 없다.
Decoration	RecyclerView.ItemDecoration 객체를 사용하여 구분선을 설정해야한다.	Android:divider 속성을 이용하여 리스트에 있는 아이템을 쉽게 구분할 수 있다.
Click Detection	개별 터치 이벤트를 관리하지만 클릭 처리 기능이 내장되어 있지 않다.	목록의 개별 항목에 대한 클릭 이벤트에 바인딩하기 위한 AdapterView.OnItemClickListener 인터페이스가 있다.

이때 ListView보다 RecyclerView를 사용하는 가장 큰 이유는 재사용성 이 훨씬 좋기 때문입니다.

ListView는 ViewHolder 패턴을 사용하시 않고 getView()를 이용하여 View에 접근하는데 , 이처럼 getView()로 동작하게 되면 리스크 갯수만큼 getView()가 호출 되므로 매우 비효율적입니다. 하지만 RecyclerView는 ViewHolder를 통해 만든 객체를 재 사용하기 때문에 ListView보다 RecyclerView가 재 사용성 부분에서 더 효율적입니다.

 

RecyclerView 주요 클래스 

View Holder 

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

Item 뷰들을 재활용하기 위해 각 요소를 저장해두고 사용합니다. 즉, 아이템 생성시 뷰 바인딩은 한 번만하며, 그 바인딩 된 객체를 가져다 사용하여 성능 부분에서 효율적입니다.

 

LayoutManager

아이템의 배치를 담당합니다. 

LinearLayoutManager - 가로 / 세로

GridLayoutManager - 그리드 형식

StaggeredGridLayoutManager - 지그재그형의 그리드 형식

 

Adapter

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

 

ItemAnimation

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

 

ItemDecoration

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

주로 Divider를 설정할 때 유용하게 사용됩니다.

 

Click Detection 

Click Listener가 ListView 처럼 내장되어 있지 않으므로, onClickListner를 통해 직접 구현해주어야 합니다.

 

 

RecyclerView 만들기

이제 RecyclerView를 만들어보도록 하겠습니다!

먼저 리사이클러뷰에 반복될 아이템의 View로 사용될 Layout을 하나 추가해주도록 하겠습니다.

 

📌 item_recycler_ex.xml

layout -> New -> Layout Resource File

 

 

ImageView와 TextView로 이루어진 Layout 하나를 만들어보도록 하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:paddingHorizontal="20dp"
    android:paddingVertical="10dp"
    android:background="@color/purple_500"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/img_rv_photo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@color/black"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        android:id="@+id/tv_rv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이름"
        android:textStyle="bold"
        android:layout_marginLeft="20dp"
        android:textSize="24sp"
        android:textColor="@color/white"
        app:layout_constraintLeft_toRightOf="@id/img_rv_photo"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/tv_rv_age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="나이"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:textSize="18sp"
        android:textColor="@color/white"
        app:layout_constraintLeft_toRightOf="@id/img_rv_photo"
        app:layout_constraintTop_toBottomOf="@id/tv_rv_name"/>


</androidx.constraintlayout.widget.ConstraintLayout>

 

📌 activity_main.xml 에 RecyclerView 추가해주기

Linear 형식의 세로로 나열 된 리스트를 만들어주기 위해서 저는 LinearLayout, Vertical 로 설정해주었습니다.

app:layoutMananger = "androidx.recyclerview.widget.LinearLayoutManager"
android:orientation ="vertical" 

<?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:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:id="@+id/rv_profile"
       app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
       android:orientation="vertical"
       tools:listitem="@layout/item_recycler_ex"
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

RecyclerView 만들기 - Adapter / ViewHolder 만들어주기

뷰 객체를 그려주는 ViewHolder와 Data와 View를 연결해주는 Adapter를 구현해보도록 하겠습니다.

 

📌 ProfileAdpater.kt

ProfileAdpater에 ViewHolder를 같이 inner class로 만들어주었으며, ProfileData를 만들어 data를 view와 연결시켜주었습니다.

img를 쉽게 imgProfile에 연결시켜주기 위해서 Glide를 사용했습니다.

bumptech/glide

package com.example.recyclerview_ex

import android.content.Context
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
import com.bumptech.glide.Glide

class ProfileAdapter(private val context: Context) : RecyclerView.Adapter<ProfileAdapter.ViewHolder>() {

    var datas = mutableListOf<ProfileData>()
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(context).inflate(R.layout.item_recycler_ex,parent,false)
        return ViewHolder(view)
    }

    override fun getItemCount(): Int = datas.size

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(datas[position])
    }

    inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {

        private val txtName: TextView = itemView.findViewById(R.id.tv_rv_name)
        private val txtAge: TextView = itemView.findViewById(R.id.tv_rv_age)
        private val imgProfile: ImageView = itemView.findViewById(R.id.img_rv_photo)

        fun bind(item: ProfileData) {
            txtName.text = item.name
            txtAge.text = item.age.toString()
            Glide.with(itemView).load(item.img).into(imgProfile)

        }
    }


}

📌 ProfileData.kt

package com.example.recyclerview_ex

data class ProfileData (
    val name : String,
    val age : Int,
    val img : Int
)

 

RecyclerView 만들기 - MainActivity.kt  Adatper와 RecyclerView 연결

RecyclerView를 사용하기 위해서는 위에서 만들어준 Adpater와 RecyclerView를 연결해주어야합니다. 또한 서버와 연결하는 것이 아니라면 더미 data를 Adapter에 넣어줘야합니다.

 

📌 MainActivity.kt

package com.example.recyclerview_ex

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

class MainActivity : AppCompatActivity() {
    lateinit var profileAdapter: ProfileAdapter
    val datas = mutableListOf<ProfileData>()

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

        initRecycler()
    }
    private fun initRecycler() {
        profileAdapter = ProfileAdapter(this)
        rv_profile.adapter = profileAdapter


        datas.apply {
            add(ProfileData(img = R.drawable.profile1, name = "mary", age = 24))
            add(ProfileData(img = R.drawable.profile3, name = "jenny", age = 26))
            add(ProfileData(img = R.drawable.profile2, name = "jhon", age = 27))
            add(ProfileData(img = R.drawable.profile5, name = "ruby", age = 21))
            add(ProfileData(img = R.drawable.profile4, name = "yuna", age = 23))

            profileAdapter.datas = datas
            profileAdapter.notifyDataSetChanged()

        }
    }
}

 

위 순서를 차례로 따라오면 아래와 같은 리사이클러뷰가 완성됩니다!

하지만 ! 간격 조절이 되어있지 않습니다. 

RecyclerView의 존재하는 ItemDecoration()을 이용하여 Item마다의 간격을 조정해보도록 하겠습니다!

 

VerticalItemDecorator / HorizontalItemDecorator Class 만들기

RecyclerView의 ItemDecoration()을 이용하여 Item의 간격을 조정해주는 ItemDecoratorClass를 만들어주었습니다.

import android.graphics.Rect
import android.view.View
import androidx.recyclerview.widget.RecyclerView


class VerticalItemDecorator(private val divHeight : Int) : RecyclerView.ItemDecoration() {

    @Override
    override fun getItemOffsets(outRect: Rect, view: View, parent : RecyclerView, state : RecyclerView.State) {
        super.getItemOffsets(outRect, view, parent, state)
        outRect.top = divHeight
        outRect.bottom = divHeight
    }
}

import android.graphics.Rect
import android.view.View
import androidx.recyclerview.widget.RecyclerView

class HorizontalItemDecorator(private val divHeight : Int) : RecyclerView.ItemDecoration() {

    @Override
    override fun getItemOffsets(outRect: Rect, view: View, parent : RecyclerView, state : RecyclerView.State) {
        super.getItemOffsets(outRect, view, parent, state)
        outRect.left = divHeight
        outRect.right = divHeight
    }
}

 

📌 RecyclerView에 ItemDecorator 적용하기 (MainActivity.kt)

rv_profile.addItemDecoration(VerticalItemDecorator(20))
rv_profile.addItemDecoration(HorizontalItemDecorator(10))

MainActivity에 위의 코드를 추가해주면 !? 아래와 같이 간격이 조정된 리사이클러뷰를 만드실 수 있습니다!

 

다음 포스팅에서는 리사이클러뷰에서 유용하게 쓰이는 클릭이벤트와, Animation_transition을 RecyclerView에 적용하는 방법에 대해 작성해보도록 하겠습니다!

 

 

참고

RecyclerView 특징 / RecyclerView와 ListView의 차이