[Kotlin][Android] Base RecyclerView Adapter 만들기 (feat. Android TV List 구현하기)

안녕하세요

 

너무 오랜만에 포스팅을 올리네요!! 

한동안 회사에서 리팩토링 때문에 너무 일이 바빴네요..

 

이제 다시 꾸준히 포스팅 올려보도록 하겠습니다!

 

오늘은

.

.

 

제가 진행하고 있는 프로젝트 특성상 리스트를 만들어야 할 경우가 많은데요!

결국, 해당 리스트들에 동일한 동작을 추가해야 하는 경우가 생겼고,

매번 동작들을 추가하다 보니 보일러 플레이트 코드가 너무 많이 발생하여 각 Adapter의 BaseClass를 만들었는데

관련해서 공유해보는 시간을 가지려고 합니다!

 

---

 

1. BaseViewHolder 만들기

abstract class BaseViewHolder<ITEM : Any, VB : ViewDataBinding>(binding: VB) :
    RecyclerView.ViewHolder(binding.root) {
    abstract val binding: VB
    abstract fun bind(data: ITEM)
}

 

먼저, ViewDataBinding과 Item을 받을 수 있는 제네릭을 정해준 후 ViewHolder가 데이터를 받아 Bind를 수행하는 추상 함수를 하나 만들어줍니다.

 

2. BaseAdapter 만들기

abstract class BaseAdapter<VB : ViewDataBinding, ITEM : Any>(val layoutId: Int) 
    : RecyclerView.Adapter<BaseViewHolder<ITEM, VB>>() {
        private var itemList = emptyList<ITEM>()
        
        abstract fun createViewHolder(parent: ViewGroup): VB
        
        override fun onBindViewHolder(holder: BaseViewHolder<ITEM, VB>, position: Int) {
            holder.bind(itemList[position])
        }
        
        override fun getItemCount() = itemList.size
        
        fun setItemList(list: List<ITEM>) {
            itemList = list
            notifyItemRangeChanged(0 , itemCount -1)
        }
    
}

 

딱히 어려운 부분은 없는데요, 기본적인 ItemList와 BindViewHolder를 미리 정의하여 반복되는 코드를 줄였습니다.

createViewHolder() 함수를 통해 제네릭으로 지정한 ViewDataBinding을 반환하도록 구현하여 DataBinding을 생성할 때 타입을 지정해주어야 하는 번거로움을 줄였습니다.

3. Adapter에 적용하기

class VideoListAdapter : BaseAdapter<ViewHolderVideoBinding, Video>(R.layout.view_holder_video) {
    override fun createViewHolder(parent: ViewGroup): ViewHolderVideoBinding {
        return DataBindingUtil.inflate(LayoutInflater.from(parent.context), layoutId, parent, false)
    }

    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int,
    ): BaseViewHolder<Video, ViewHolderVideoBinding> {
        val binding = createViewHolder(parent)
        return VideoViewHolder(binding)
    }
}

class VideoViewHolder(
    override val binding: ViewHolderVideoBinding,
) : BaseViewHolder<Video, ViewHolderVideoBinding>(binding) {
    override fun bind(data: Video) {
        with(binding) {
            // binding 처리
        }
    }
}

 

BaseAdapter는 위에서 보이는 것과 같이 구현해주면 되는데요 이렇게 보면 굳이 왜 이렇게 만들어야 해?라고 생각이 들 수도 있는데요

이것은 개발자들의 취향차이겠지만, 저같은 경우는 아래와 같은 이유로 BaseAdapter를 만들었습니다.

 

• 위에서 언급했듯이 반복되는 코드를 줄여서 개발이 훨씬 편리해진다.
• 반복되는 코드가 줄면서 BaseAdapter를 구현한 구현체들은 코드량이 줄어 코드를 보기 편해지고 유지보수가 편리해진다.
• 마지막으로, 저같은 경우는 모든 Adapter에 공통 동작(Click , Key 등등)에 대해서 미리 정의해두고 사용하기 위해 BaseAdapter를 정의해 두었습니다. (아래는 제가 프로젝트에 적용한 예시입니다.)

 

abstract class BaseAdapter<VB : ViewDataBinding, ITEM : Any>(
    private val tag: String,
    val layoutId: Int,
    private val recyclerView: RecyclerView,
) : RecyclerView.Adapter<BaseViewHolder<ITEM, VB>>() {

    private var itemList = emptyList<ITEM>()
    private var focusedPosition = 0
    private var itemKeyListener: OnItemKeyListener? = null

    abstract fun createViewHolder(parent: ViewGroup): VB

    override fun onBindViewHolder(holder: BaseViewHolder<ITEM, VB>, position: Int) {
        holder.bind(itemList[position])
        if (position == focusedPosition) {
            holder.itemView.requestFocus()
        }
    }

    override fun getItemCount() = itemList.size

    fun setOnItemKeyListener(listener: OnItemKeyListener) {
        itemKeyListener = listener
    }

    fun setItemList(list: List<ITEM>) {
        itemList = list
        notifyItemRangeChanged(0 , itemCount -1)
    }

    fun requestFocusItem() {
        notifyItemChanged(focusedPosition)
        val layoutManager =
            recyclerView.layoutManager as WrapLinearLayoutManager
        notifyItemChanged(focusedPosition)
        layoutManager.scrollToPositionWithOffset(focusedPosition, 0)
    }

    fun setOnKeyListener(binding: VB) {
        binding.root.setOnKeyListener keyListener@{ _, _, keyEvent ->

            itemKeyListener?.onKeyClick(
                keyEvent.keyCode,
                itemList[focusedPosition],
                focusedPosition,
            )

            when (keyEvent.keyCode) {
                KeyEvent.KEYCODE_DPAD_LEFT -> {
                    if (focusedPosition > 0) {
                        focusedPosition--
                        val layoutManager =
                            recyclerView.layoutManager as WrapLinearLayoutManager
                        notifyItemChanged(focusedPosition)
                        layoutManager.scrollToPositionWithOffset(focusedPosition, 0)
                    }
                    Log.d(tag, "onCreateViewHolder: focusedPosition = $focusedPosition")
                    return@keyListener true
                }

                KeyEvent.KEYCODE_DPAD_RIGHT -> {
                    if (focusedPosition < itemCount - 1) {
                        focusedPosition++
                        val layoutManager =
                            recyclerView.layoutManager as WrapLinearLayoutManager
                        notifyItemChanged(focusedPosition)
                        layoutManager.scrollToPositionWithOffset(focusedPosition, 0)
                    }
                    Log.d(tag, "onCreateViewHolder: focusedPosition = $focusedPosition")
                    return@keyListener true
                }

                KeyEvent.KEYCODE_DPAD_UP,
                KeyEvent.KEYCODE_DPAD_DOWN,
                KeyEvent.KEYCODE_DPAD_CENTER,
                -> {
                    return@keyListener true
                }
            }
            false
        }
    }
}

 

위 코드를 천천히 분석해 보겠습니다! 

 

우선, 해당 동작은 일반적인 Android 모바일 기기를 고려한 코드가 아니고 Android TV 동작에 대한 부분이란걸 참고 부탁드립니다!

---

setOnItemKeyListener()

RecyclerView에서 Key가 감지되었을 경우 호출할 Listener를 설정하는 함수입니다.

fun setOnItemKeyListener(listener: OnItemKeyListener) {
        itemKeyListener = listener
}

interface OnItemKeyListener {
    fun onKeyClick(keyCode: Int, data: Any, index: Int)
}

 

※ 사용예시

videoAdapter = VideoListAdapter(rvVideo).apply {
                setOnItemKeyListener(object : OnItemKeyListener {
                    override fun onKeyClick(keyCode: Int, data: Any, index: Int) {
                        when (keyCode) {
                            KeyEvent.KEYCODE_DPAD_DOWN -> {
                                chattingAdapter.requestFocusItem() // 채팅으로 포커스 이동
                            }

                            KeyEvent.KEYCODE_DPAD_CENTER -> {
                                if (data is Video) {
                                    mainViewModel.startNewVideo(data) // 비디오 재생
                                }
                            }

                            KeyEvent.KEYCODE_DPAD_LEFT -> {
                                if (index == 0) {
                                    mainViewModel.showNavigation() // 네비게이션 View 표시
                                }
                            }
                        }
                    }
                })
            }

 

requestFocusItem()

이전에 저장된 focusedPosition으로 Focus를 이동시키는 함수

fun requestFocusItem() {
        notifyItemChanged(focusedPosition)
        val layoutManager =
            recyclerView.layoutManager as WrapLinearLayoutManager
        notifyItemChanged(focusedPosition)
        layoutManager.scrollToPositionWithOffset(focusedPosition, 0)
    }

 

setOnKeyListener()

모든 Adapter에 공통적으로 정의될 KeyListener를 구현한 함수

(BaseAdapter를 상속받아 사용할때 해당 이벤트를 등록하기를 원치 않는다면 onCreateViewHolder에서 함수를 호출하지 않으면 됨)

fun setOnKeyListener(binding: VB) {
        binding.root.setOnKeyListener keyListener@{ _, _, keyEvent ->
            // 모든 Key는 우선 Listener로 전달됨
            // 각 parent에서 처리할 키만 정의하여 사용
            itemKeyListener?.onKeyClick(
                keyEvent.keyCode,
                itemList[focusedPosition],
                focusedPosition,
            )

            when (keyEvent.keyCode) {
                KeyEvent.KEYCODE_DPAD_LEFT -> { // 리스트 왼쪽으로 포커스 이동
                    if (focusedPosition > 0) {
                        focusedPosition--
                        val layoutManager =
                            recyclerView.layoutManager as WrapLinearLayoutManager
                        notifyItemChanged(focusedPosition)
                        layoutManager.scrollToPositionWithOffset(focusedPosition, 0)
                    }
                    Log.d(tag, "onCreateViewHolder: focusedPosition = $focusedPosition")
                    return@keyListener true
                }

                KeyEvent.KEYCODE_DPAD_RIGHT -> { // 리스트 오른쪽으로 포커스 이동
                    if (focusedPosition < itemCount - 1) {
                        focusedPosition++
                        val layoutManager =
                            recyclerView.layoutManager as WrapLinearLayoutManager
                        notifyItemChanged(focusedPosition)
                        layoutManager.scrollToPositionWithOffset(focusedPosition, 0)
                    }
                    Log.d(tag, "onCreateViewHolder: focusedPosition = $focusedPosition")
                    return@keyListener true
                }

                KeyEvent.KEYCODE_DPAD_UP,
                KeyEvent.KEYCODE_DPAD_DOWN,
                KeyEvent.KEYCODE_DPAD_CENTER,
                -> { // UP , DOWN , CENTER는 Parent에서 재정의
                    return@keyListener true
                }
            }
            false
        }
    }

 

 

이렇게 BaseAdapter를 구현한 내용에 대해서 포스팅해봤는데요!

 

다시 말씀드리지만 이건 개발자의 취향이기 때문에 정답은 없다는 점 알아주세요 🙏

 

이 포스팅이 여러분에게 도움이 되었으면 좋겠습니다!

 

오늘도 즐코하세요 :)