[Android/Kotlin] 멀티뷰 타입 RecyclerView 구현하기

대학생 공지사항 어플 - 유니뷰

 

오늘은 다음과 같은 멀티뷰 타입의 리사이클러뷰를 구현해보도록 하겠습니다 !

사이드 프로젝트를 하면서 리사이클러뷰의 여러 itemview를 적용할 수 있는 방법에 대해 찾아보던 중 멀티뷰 타입 리사이클러뷰이 존재하는 것을 처음 알게 되었는데요. 

하나의 Adapter를 이용하여 여러 View를 활용한 리사이클러뷰를 만들 수 있다는 것을 배울 수 있었습니다!

 

리사이클러뷰 관련 다른 포스팅이 궁금하시다면 !? 아래 글을 먼저 읽고 오시는 게 좋습니다!

[Android/Kotlin] RecyclerView 만들기

[Android/Kotlin] RecyclerView 클릭 이벤트 적용하기

[Android/Kotlin] RecyclerView Animation 활용하기

 

 

---

📌 RecyclerView 안에 담길 Layout 만들어주기

간단하게 3개를 만들어주겠습니다. 

<?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"
        android:transitionName="image"
        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:transitionName="name"
        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>

<?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"
        android:transitionName="image"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="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:transitionName="name"
        android:textStyle="bold"
        android:layout_marginRight="20dp"
        android:textSize="24sp"
        android:textColor="@color/white"
        app:layout_constraintRight_toLeftOf="@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_marginRight="20dp"
        android:textSize="18sp"
        android:textColor="@color/white"
        app:layout_constraintRight_toLeftOf="@id/img_rv_photo"
        app:layout_constraintTop_toBottomOf="@id/tv_rv_name"/>


</androidx.constraintlayout.widget.ConstraintLayout>

<?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="160dp"
        android:layout_height="160dp"
        android:src="@color/black"
        android:transitionName="image"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_rv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이름"
        android:transitionName="name"
        android:textStyle="bold"
        android:textSize="24sp"
        android:layout_marginVertical="20dp"
        android:textColor="@color/white"
        app:layout_constraintTop_toBottomOf="@id/img_rv_photo"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

📌 activity_multiview.xml

멀티뷰 타입의 리사이클러뷰가 존재하는 Activity의 레이아웃 입니다. 간단하게 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=".recyclerview_basic.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"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

📌 data class 만들어주기

데이터를 담을 data class를 만들어주기 전 type에 따라 쉽게 view를 구별하기 위해 MultiMode.kt를 만들어 주도록 하겠습니다.

 

MultiMode.kt

package com.example.recyclerview_ex.recyclerview_multi

const val multi_type1 = 1
const val multi_type2 = 2
const val multi_type3 = 3

 

MultiData.kt

type에 따라 다른 ViewHolder를 지정해줘야 하기 때문에 data class에 type도 추가로 만들어 주었습니다.

package com.example.recyclerview_ex.recyclerview_multi

data class MultiData(
    val image : Int,
    val name : String,
    val age : Int,
    val type : Int
)

 

📌MultiViewAdpater 만들기

멀티뷰 타입의 리사이클러뷰를 위한 MultiviewAdapter.kt를 만들어 주도록 하겠습니다.

이전에 onCreateViewHolder에 관한 설명이 할거 같습니다.

아래는 기본적은 리사이클러뷰 Adpater에서 사용하는 onCreateViewHolder 입니다.

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder = ViewHolder(parent.inflate(R.layout.item_recycler_ex))

 이때 viewType은 무엇일까요?!

viewTpye은 변수명 그대로 viewType에 의해 구분되어 들어오는 값입니다.

onCreateViewHolder가 호출 전 getItemViewType(position: Int) : Int 함수를 먼저 호출하며 리턴 값이 넘겨지는 것 입니다.

아까 위에서 만든 전역 변수인 MultiMode의 변수값을 data class에 저장해준 이유가 바로 이것 때문입니다.

 override fun getItemViewType(position: Int): Int {
        return datas[position].type
    }
    
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) : RecyclerView.ViewHolder {
        val view : View?
        return when(viewType) {
            multi_type1 -> {
                view = LayoutInflater.from(parent.context).inflate(
                    R.layout.item_recycler_ex,
                    parent,
                    false
                )
                MultiViewHolder1(view)
            }
            multi_type2 -> {
                view = LayoutInflater.from(parent.context).inflate(
                    R.layout.item_recycler_multi1,
                    parent,
                    false
                )
                MultiViewHolder2(view)
            }
            else -> {
                view = LayoutInflater.from(parent.context).inflate(
                    R.layout.item_recycler_multi2,
                    parent,
                    false
                )
                MultiViewHolder3(view)
            }
        }
    }
    
 override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        when(datas[position].type) {
            multi_type1 -> {
                (holder as MultiViewHolder1).bind(datas[position])
                holder.setIsRecyclable(false)
            }
            multi_type2 -> {
                (holder as MultiViewHolder2).bind(datas[position])
                holder.setIsRecyclable(false)
            }
            else -> {
                (holder as MultiViewHolder3).bind(datas[position])
                holder.setIsRecyclable(false)
            }
        }
    }

 

innerclass로 뷰타입에 맞는 ViewHolder 만들어주기

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

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

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

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

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

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

        }
    }

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

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

        fun bind(item: MultiData) {
            txtName.text = item.name
            Glide.with(itemView).load(item.image).into(imgProfile)

        }
    }

 

뷰타입에 맞게 뷰홀더를 만들어 잘 지정해주었다면 아마 쉽게 구현하실 수 있을 것입니다.

MultiviewAdapter.kt 전체

package com.example.recyclerview_ex.recyclerview_multi

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
import com.example.recyclerview_ex.R

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

    var datas = mutableListOf<MultiData>()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) : RecyclerView.ViewHolder {
        val view : View?
        return when(viewType) {
            multi_type1 -> {
                view = LayoutInflater.from(parent.context).inflate(
                    R.layout.item_recycler_ex,
                    parent,
                    false
                )
                MultiViewHolder1(view)
            }
            multi_type2 -> {
                view = LayoutInflater.from(parent.context).inflate(
                    R.layout.item_recycler_multi1,
                    parent,
                    false
                )
                MultiViewHolder2(view)
            }
            else -> {
                view = LayoutInflater.from(parent.context).inflate(
                    R.layout.item_recycler_multi2,
                    parent,
                    false
                )
                MultiViewHolder3(view)
            }
        }
    }
    override fun getItemCount(): Int = datas.size

    override fun getItemViewType(position: Int): Int {
        return datas[position].type
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        when(datas[position].type) {
            multi_type1 -> {
                (holder as MultiViewHolder1).bind(datas[position])
                holder.setIsRecyclable(false)
            }
            multi_type2 -> {
                (holder as MultiViewHolder2).bind(datas[position])
                holder.setIsRecyclable(false)
            }
            else -> {
                (holder as MultiViewHolder3).bind(datas[position])
                holder.setIsRecyclable(false)
            }
        }
    }

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

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

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

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

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

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

        }
    }

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

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

        fun bind(item: MultiData) {
            txtName.text = item.name
            Glide.with(itemView).load(item.image).into(imgProfile)

        }
    }
}

 

📌 MultiViewActivity.kt

리사이클러뷰와 Adpater를 연결해주고 dataclass에 데이터를 추가해주도록 하겠습니다.

아래 코드는 리사이클러뷰 만드는 과정에서 다룬 내용이므로 설명은 생략하도록 하겠습니다.

package com.example.recyclerview_ex.recyclerview_multi


import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.recyclerview_ex.HorizontalItemDecorator
import com.example.recyclerview_ex.R
import com.example.recyclerview_ex.VerticalItemDecorator
import kotlinx.android.synthetic.main.activity_main.*


class MultiviewActivity : AppCompatActivity() {
    lateinit var multiAdapter: MultiviewAdpater
    val datas = mutableListOf<MultiData>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_multiview)
        initRecycler()
    }
    private fun initRecycler() {
        multiAdapter = MultiviewAdpater(this)
        rv_profile.adapter = multiAdapter
        rv_profile.addItemDecoration(VerticalItemDecorator(10))
        rv_profile.addItemDecoration(HorizontalItemDecorator(10))


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

            multiAdapter.datas = datas
            multiAdapter.notifyDataSetChanged()

        }

    }
}

 

 

끝 - 아래 화면과 같은 다양한 view가 사용된 멀티뷰 타입의 리사이클러뷰를 완성하실 수 있습니다 : )

다음 포스팅에는 리사이클러뷰 마지막 시리즈인 RecyclerView Swipe 에 대한 글을 써보도록 하겠습니다 !

끝까지 읽어봐주셔서 감사합니다!