멀티뷰타입이란?

리사이클러뷰의 각 항목이 서로 다른 레이아웃을 가져야 할 때 사용

<예시>
1. 채팅

내가 보낸 메시지와 상대방이 보낸 메시지를 구분해야 할 때
내가 보낸 메시지는 화면의 오른쪽에, 상대방이 보낸 메시지는 화면 왼쪽에 배치해야 한다. 
송신자에 따라 다른 뷰타입을 적용해 다른 레이아웃을 사용한다. 

2. 뉴스

기사 목록
기사에 텍스트만 있을 경우에는 텍스트만 표시하고, 다른 기사는 이미지나 동영상 썸네일이 있을 때

뷰타입이란?

각 항목이 화면에 어떻게 표시되는지를 정의하는 방식

멀티 뷰타입 구현 과정

1. RecyclerView와 Adapter 설정

1) 레이아웃 파일 설정

activity_main.xml 파일에서 RecyclerView를 배치한다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
        
</LinearLayout>

2) 어댑터 클래스 생성

RecyclerView의 데이터를 관리하고 각 항목이 화면에 어떻게 표시될지를 정의한다.

class MyAdapter(private val data: List<MyData>) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    companion object {
        const val VIEW_TYPE_TEXT = 1
        const val VIEW_TYPE_IMAGE = 2
    }

    override fun getItemViewType(position: Int): Int {
        return when (data[position].type) {
            "text" -> VIEW_TYPE_TEXT
            "image" -> VIEW_TYPE_IMAGE
            else -> throw IllegalArgumentException("Invalid type of data at position $position")
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            VIEW_TYPE_TEXT -> {
                val binding = ItemTextBinding.inflate(LayoutInflater.from(parent.context), parent, false)
                TextViewHolder(binding)
            }
            VIEW_TYPE_IMAGE -> {
                val binding = ItemImageBinding.inflate(LayoutInflater.from(parent.context), parent, false)
                ImageViewHolder(binding)
            }
            else -> throw IllegalArgumentException("Invalid view type")
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val item = data[position]
        when (holder) {
            is TextViewHolder -> holder.bind(item)
            is ImageViewHolder -> holder.bind(item)
        }
    }

    override fun getItemCount(): Int = data.size

    class TextViewHolder(private val binding: ItemTextBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(data: MyData) {
            binding.textView.text = data.text
        }
    }

    class ImageViewHolder(private val binding: ItemImageBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(data: MyData) {
            data.imageResId?.let { binding.imageView.setImageResource(it) }
        }
    }
}

2. 데이터 모델 생성

data class MyData(val type: String, val text: String? = null, val imageResId: Int? = null)

3. 레이아웃 파일 생성

각 뷰타입에 맞는 레이아웃 파일 생성
텍스트만 있는 레이아웃과 이미지만 있는 레이아웃 2개 생성

텍스트 아이템 레이아웃 (item_text.xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"/>
        
</LinearLayout>

이미지 아이템 레이아웃 (item_image.xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
        
</LinearLayout>

4. MainActivity에서 RecyclerView 설정

class MainActivity : AppCompatActivity() {

    // 뷰바인딩 객체 선언
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 뷰바인딩 초기화
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // RecyclerView 설정
        binding.recyclerView.layoutManager = LinearLayoutManager(this)

        // 샘플 데이터 생성
        val data = listOf(
            MyData(type = "text", text = "This is a text item"),
            MyData(type = "image", imageResId = R.drawable.sample_image),
            MyData(type = "text", text = "Another text item"),
            MyData(type = "image", imageResId = R.drawable.sample_image)
        )

        // 어댑터 설정
        val adapter = MyAdapter(data)
        binding.recyclerView.adapter = adapter
    }
}