[Android] Expandable RecyclerView 구현하기

리스트에서 게시물을 클릭했을 때 게시물 아래로 콘텐츠가 펼쳐지는 앱을 본 적이 있을 것이다.

아이템을 클릭했을 때 내용을 보이거나 숨기거나 하는 기능에 Expandable이라고 명칭을 붙이는 것 같다.

 

ListView에서는 ExpandalbeListView라는 Widget이 존재하지만 RecyclerView에는 없다.

따라서 Expandable RecyclerView를 직접 구현해야 한다.

 

Expandable RecyclerView는 아이템을 클릭했을 때 현재 목록이 펼쳐졌는지 닫혀있는지 알 수 있도록 하는 상태 값이 필요하다. 그리고 상태 값에 따라서 내용을 visible하거나 gone 처리를 하면 된다.

 

예제로 RecyclerView의 아이템을 클릭했을 때 목록을 펼치고 다시 누르면 닫히는 앱을 만들었다.

---

data class에 상태 값 추가하기

data class SampleData(
    val title: String,
    val date: String,
    val content: String,
    var expandable: Boolean = false
)

View에 노출되는 값은 title, date, content 이지만 펼쳐졌는지 닫혀있는지 상태를 알기 위해 expandable이라는 변수를 넣어줬다.

기본적으로 목록이 닫혀있기 때문에 default 값으로 false를 줬다.

---

아이템을 클릭했을 때 동작 처리

inner class ViewHolder(private val mBinding: ListItemRecyclerviewBinding) : RecyclerView.ViewHolder(mBinding.root) {
    fun bind(mSampleData: SampleData){
        mBinding.tvTitle.text = mSampleData.title
        mBinding.tvDate.text = mSampleData.date
        mBinding.tvContent.text = mSampleData.content

        mBinding.ctParent.setOnClickListener {
            if(mSampleData.expandable){
                mBinding.ctChild.visibility = View.GONE
                mBinding.ivDrop.setImageResource(R.drawable.drop_down_icon)
                mSampleData.expandable = false
            }else{
                mBinding.ctChild.visibility = View.VISIBLE
                mBinding.ivDrop.setImageResource(R.drawable.drop_up_icon)
                mSampleData.expandable = true
            }
        }
    }
}

 

처음부터 보이는 View를 parent, 펼쳐지는 View를 child라고 생각하고 변수명을 작성했다.

parent가 클릭됐을 때 expandable 값을 체크하여 child가 펼쳐지거나 닫히도록 했고, 해당 동작에 따라서 expandable 값을 변경시켰다.

 

해당 코드는 Adapter 내에서 사용했지만 커스텀 리스너를 통해 Activity나 Fragment에서 처리할 수 있다.

---

 

전체 코드