[Android] Expandable RecyclerView 구현하기

2022. 11. 22. 11:00·Android/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에서 처리할 수 있다.


 

전체 코드

 

반응형

'Android > RecyclerView' 카테고리의 다른 글

[Android] RecyclerView에서 페이징+삭제 처리하기 (with Room) #2  (0) 2023.01.09
[Android] RecyclerView에서 페이징 처리하기 #1  (0) 2022.12.16
[Android] RecyclerView Drag and Drop 구현하기  (0) 2022.11.18
[Android] RecyclerView 클릭 이벤트 처리하기  (0) 2022.11.02
'Android/RecyclerView' 카테고리의 다른 글
  • [Android] RecyclerView에서 페이징+삭제 처리하기 (with Room) #2
  • [Android] RecyclerView에서 페이징 처리하기 #1
  • [Android] RecyclerView Drag and Drop 구현하기
  • [Android] RecyclerView 클릭 이벤트 처리하기
O_Gyong
O_Gyong
안드로이드 기술 정리
  • O_Gyong
    O_Gyong's TECH
    O_Gyong
    • 분류 전체보기 (79)
      • Android (56)
        • ADB (4)
        • AddView (1)
        • Architecture (1)
        • Bluetooth (2)
        • BuildConfig (1)
        • Calendar (3)
        • Camera (2)
        • Cipher (1)
        • Compose (1)
        • ConstraintSet (1)
        • DataStore (1)
        • Dialog (1)
        • DrawerLayout (1)
        • Flow (1)
        • Glide (1)
        • MQTT (2)
        • Paging3 (4)
        • Permission (1)
        • SharedPreferences (3)
        • RecyclerView (5)
        • Room (1)
        • Splash (1)
        • TabLayout (2)
        • TextWatcher (1)
        • Update (1)
        • 이슈 처리 (13)
      • Android Studio (5)
      • Firebase (1)
      • Git (3)
      • 작업 일지 (13)
  • 최근 글

  • 인기 글

  • 태그

    BLE
    MQTT
    kizitonwose
    TabLayout
    compose
    Kotlin
    Navigation
    Android Studio
    Android
    issue
    Andoird
    github
    flow
    Pagination
    in-app update
    Room
    GIT
    hilt
    paging
    Paging3
    webview
    ADB
    firebase
    CameraX
    해상도
    SharedPreferences
    CalendarView
    Bluetooth
    recyclerview
    loading
  • 링크

    • GitHub
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • hELLO· Designed By정상우.v4.10.4
O_Gyong
[Android] Expandable RecyclerView 구현하기
상단으로

티스토리툴바