[Android / Recycler View] #1 기본 타입 구현

목표 : Recycler View 기본 타입 구현

 

1. 레이아웃 파일에 RecyclerView 추가

<androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_example_recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

 

2. RecyclerView에서 사용할 Item 레이아웃 파일 생성 

- 여기에서는 이름, 세부내용, 이미지로 구성

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/rv_default_height"
        android:layout_margin="8dp"
        android:background="@color/item_background"
        android:paddingStart="8dp"
        android:paddingEnd="8dp">

        <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: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: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_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

 

3. Data Class 생성

• Item 레이아웃과 맞춤

data class Task(val name: String, val details: String, val image: Uri)

 

4. Adapter Class 생성

• 내부 데이터 구현(list)
• ViewHolder 클래스 구현
• onCreateViewHolder, getItemCount, onBindViewHolder 구현 
• 내부 데이터 처리를 위한 함수 구현 (set, add, remove)

class RvExampleDefaultAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    // 내부 데이터
    private var tasks: ArrayList<Task> = arrayListOf()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_recyclerview_default, parent, false)

        return TaskViewHolder(view)
    }

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

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val item = tasks[position]

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

    // 내부 데이터 전체 값 갱신
    fun setTaskList(list: ArrayList<Task>) {
        tasks.clear()
        tasks.addAll(list)

        notifyDataSetChanged()
    }

    // 내부 데이터 값 추가
    fun addTask(task: Task) {
        tasks.add(task)

        notifyDataSetChanged()
    }
    
    // 내부 데이터 값 제거
    fun removeTask(task: Task) {
        tasks.remove(task)
        
        notifyDataSetChanged()
    }

    // View Holder
    class TaskViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

5. Activity or Fragment 에서 Recyclerview 초기화

- viewModel.taskList는 ArrayList<Task> 타입임

fun initRecyclerView() {
	// Recycler View에 Custom Adapter 설정
	rv_example_recyclerview.adapter = RvExampleDefaultAdapter()
	// Adapter 초기 데이터 설정
	(rv_example_recyclerview.adapter as RvExampleDefaultAdapter).setTaskList(viewModel.taskList)
}

6. 완성되면?

 

 

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