[Android/Kotlin 08] 리사이클러뷰 멀티뷰 타입(Feat. 두개의 아이템 하나의 리스트)

리사이클러뷰 멀티 뷰 타입이란 여러 개의 뷰 타입, 즉 리사이클러뷰 내에서 한 개의 뷰 형태만을 랜더링 하는 게 아니라 다수의 뷰 형태를 가지는 객체들을 랜더링하는 방법입니다. 리사이클러뷰를 사용해 뷰를 생성하면 일반적으로는 가로, 혹은 세로로 나열되지만, 각기 다른 아이템을 한 화면에서 보여주고 싶다면 멀티 뷰 타입을 사용하면 됩니다.

⚡UI

• 왼쪽 아이템, 오른쪽 아이템을 번갈아가며 나올 수 있도록 구성했습니다.
  

⚡아이템 xml

• list_view_left.xml, list_view_right.xml 두 가지 타입의 아이템 xml 파일을 만듭니다.

⚡상수 정의

• data class에 상수를 정의합니다.
• 왼쪽, 오른쪽 뷰 타입을 나타냅니다.

companion object {
        const val VIEW_TYPE_LEFT = 0
        const val VIEW_TYPE_RIGHT = 1
    }

⚡내부 클래스 정의

• 뷰의 레이아웃을 바인딩하고, 뷰홀더 내에서 뷰 요소들을 참조합니다.

inner class LeftViewHolder(private val binding: ListViewLeftBinding) : RecyclerView.ViewHolder(binding.root) {
    private val profileImage = binding.profileImage
    private val listName = binding.listName
    private val groupName = binding.groupName
    private val favoritButton = binding.favoritButton
    fun bindLeft(item: ContactItem) {
        profileImage.setImageResource(item.profileImage)
        listName.text = item.listName
        groupName.text = item.groupName
        if (item.isFavorite) {
            favoritButton.setImageResource(R.drawable.ic_love_filled)
        } else {
            favoritButton.setImageResource(R.drawable.ic_love_empty)
        }
    }
}

inner class RightViewHolder(private val binding: ListViewRightBinding) : RecyclerView.ViewHolder(binding.root) {
    private val profileImage = binding.profileImage
    private val listName = binding.listName
    private val groupName = binding.groupName
    private val favoritButton = binding.favoritButton
    fun bindRight(item: ContactItem) {
        profileImage.setImageResource(item.profileImage)
        listName.text = item.listName
        groupName.text = item.groupName
        if (item.isFavorite) {
            favoritButton.setImageResource(R.drawable.ic_love_filled)
        } else {
            favoritButton.setImageResource(R.drawable.ic_love_empty)
        }
    }
}

⚡onCreateViewHolder 메서드

• 뷰홀더 객체를 생성하고 초기화합니다.
• viewType에 따라 왼쪽 뷰홀더 또는 오른쪽 뷰홀더를 생성합니다.
• ListViewLeftBinding 또는 ListViewRightBinding을 사용하여 레이아웃 바인딩을 초기화하고 해당 뷰홀더를 반환합니다.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
    val inflater = LayoutInflater.from(parent.context)
    return when (viewType) {
        VIEW_TYPE_LEFT -> {
            val binding = ListViewLeftBinding.inflate(inflater, parent, false)
            LeftViewHolder(binding)
        }
        VIEW_TYPE_RIGHT -> {
            val binding = ListViewRightBinding.inflate(inflater, parent, false)
            RightViewHolder(binding)
        }
        else -> throw IllegalArgumentException("Invalid view type")
    }
}

⚡onBindViewHolder 메서드

• 뷰홀더와 데이터를 바인딩합니다.
• 현재 위치 position의 항목 데이터를 가져와서 해당 뷰홀더에 바인딩합니다.
• is LeftViewHolder 또는 is RightViewHolder로 적절한 뷰홀더에 데이터를 전달합니다.

override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val item = items[position]
        when (holder) {
            is LeftViewHolder -> holder.bindLeft(item)
            is RightViewHolder -> holder.bindRight(item)
        }
    }

⚡getItemViewType 메서드

• 각 항목의 뷰 타입을 결정합니다.
• 짝수 위치의 항목은 VIEW_TYPE_LEFT, 홀수 위치의 항목은 VIEW_TYPE_RIGHT로 설정되어 다른 뷰 홀더가 사용됩니다.

override fun getItemViewType(position: Int): Int {
    return if (position % 2 == 0) {
        VIEW_TYPE_LEFT
    } else {
        VIEW_TYPE_RIGHT
    }
}

⚡getItemCount 메서드

• RecyclerView에 표시할 항목의 총 개수를 반환합니다.
• items.size를 반환하여 데이터의 크기에 따라 항목 수를 동적으로 설정합니다.

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