[ Android / RecyclerView ] #4 아이템 확장 / 축소 구현

목표 : RecyclerView의 Item을 선택할 경우 확장 <->축소 동작 구현

 

1. Item layout에 Exapnd View 추가

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:background="@color/item_background_d"
        android:padding="8dp">

        <!-- View for default -->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/cl_item_default"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@id/cl_item_expand"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/tv_item_default_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:includeFontPadding="false"
                android:lineSpacingExtra="0dp"
                android:text="제목"
                android:textAlignment="center"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toTopOf="@id/tv_item_default_details"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/tv_item_default_details"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:includeFontPadding="false"
                android:lineSpacingExtra="0dp"
                android:text="세부내용입니다.\n샬라샬라샬라샬라샬라샬라샬라샬라샬라"
                android:textAlignment="textStart"
                android:textSize="12sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tv_item_default_name" />

            <ImageView
                android:id="@+id/iv_item_default_img"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />


        </androidx.constraintlayout.widget.ConstraintLayout>

        <!-- View for Expand -->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/cl_item_expand"
            android:layout_width="match_parent"
            android:layout_height="@dimen/rv_expand_height"
            android:background="@color/item_background_e"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/cl_item_default">

            <TextView
                android:id="@+id/tv_item_expand_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Expanded View"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

 

2. Custom Adapter에 아이템 선택에 따른 확장 <-> 축소 관련 부분 추가

• SparseBooleanArray를 사용하여 [position, select]에 대한 데이터 처리 

// 선택 데이터 리스트
private var selectedItems: SparseBooleanArray = SparseBooleanArray()

• onBindViewHolder 함수의 TaskViewHolder 부분에 확장 뷰 관련 처리 추가

// 아이템 데이터를 사용하여 각 아이템 값 설정
holder.itemView.apply {
  tv_item_default_name.text = item.name
  tv_item_default_details.text = item.details
  iv_item_default_img.setImageFromUrl(item.image)

  setOnClickListener {
    if (selectedItems.get(position)) {
      // VISIBLE -> INVISIBLE
      selectedItems.delete(position)

      cl_item_expand.visibility = View.GONE
    } else {
      // INVISIBLE -> VISIBLE
      selectedItems.put(position, true)

      cl_item_expand.visibility = View.VISIBLE
    }
  }
}

 

3. 완성되면?

선택시 확장 처리

 

RecyclerView

• #1 기본 타입 구현
• #2 밀어서 아이템 삭제 
• #3 Header / Footer Item 구현
• #4 아이템 확장 / 축소 구현