[안드로이드] 리스트 뷰(ListView)에서 리싸이클러 뷰(RecyclerView) 전환기

안녕하세요! 

어느덧 조회수 300을 달성했습니다. 저의 부족한 글을 읽어주셔서 감사합니다. 그럼 시작을 하겠습니다. 

저는 개인 앱을 런칭하고 있습니다. 

play.google.com/store/apps/details?id=com.keelim.nandadiagnosis

난다진단 - Google Play 앱

참고로 광고 입니다. 

여기서 저는 제가 공부하고 개발하는 것들을 매일 적용해보고 있습니다. 이 앱은 사실 상 CRUD 앱으로 적용하고 싶은 거의 모든 것들을 적용할 수 있습니다. 여러 기능들에 대해서는 추후에 또 포스팅을 하겠습니다. 

이번에는 리스트 뷰(List View)에서 리싸이클러 뷰(Recycler View) 로 옮기는 과정을 알려드리려 합니다. 

사실 일반적인 데이터에서는 리스트뷰와 리싸이클러뷰는 차이가 없지만 리싸이클러 뷰가 추후 동적으로 사용할 수 있는점으로 판단을 했고 워낙 기능도 좋아 채택을 했습니다. 

먼저 리스트 뷰를 사용하려면 XML 에서 ListView Componenet 를 정의를 해야 합니다. 그리고 필요한 것이 어댑터 입니다. 사실 상 위 과정은 어댑터를 바꾸는 과정이라 생각을 하면 됩니다. 

먼저 수정하는 순서는 다음과 같습니다. 

1. xml ListView --> RecyclerView 변경

2. xml RecyclerView 에서 layoutmanager 속성을 LinearLayoutmanager 로 정의

3. RecyclerView 어댑터로 변경 입니다. 

보통 RecyclerView 에 경우는 어댑터와 레이아웃 매니저를 동시에 지정을 해주어야 하지만, 저는 xml 에서 레이아웃 매니저를 정의하는 것이 편해서 그렇게 사용을 하고 있습니다. 

1, 2 번은 생각보다 간단하니 3 번 위주로 작성을 하겠습니다. 

     binding.list.adapter = MyDiagnosisViewAdapter(arrayList)
     binding.list.setOnItemClickListener { _, _, i, _ ->
         goWeb(nav + i + 1)
}

/*-------------------------------------------------*/

    binding.list.adapter = DiagnosisRecyclerViewAdapter().apply {
        setDiagnosisItem(arrayList!!.toMutableList())
        listener = object: DiagnosisRecyclerViewAdapter.OnSearchItemClickListener{
            override fun onSearchItemClick(position: Int) {
                goWeb(nav + position + 1)
            }

        }
   }

 

위 처럼 변경을 하였습니다. 위에 있는 리스트 뷰 코드는 생성자에 list 를 부여하였다면 리싸이클러 뷰에서는 set 함수를 통하여 데이터를 정의하였습니다. 

class MyDiagnosisViewAdapter(private val diagnosisItems: ArrayList<DiagnosisItem>?) : BaseAdapter() {

    override fun getCount(): Int {
        return diagnosisItems!!.size
    }

    override fun getItem(position: Int): Any {
        return diagnosisItems!![position]
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getView(position: Int, view: View?, parent: ViewGroup): View {
        val binding: ItemListviewBinding = ItemListviewBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        binding.diagnosisItem.text = diagnosisItems!![position].diagnosis
        binding.diagnosisDes.text = diagnosisItems[position].diagnosis

        return binding.root
    }


}

저는 리스트 뷰 어댑터를 사용을 할때 BaseAdapter 를 상속받아 사용을 했었습니다. RecyclcerView 어댑터는 ViewHolder 를 처리하긴 하지만 상당히 유사합니다. 

package com.keelim.nandadiagnosis.ui.main.category

import android.view.LayoutInflater
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.keelim.nandadiagnosis.databinding.ItemListviewBinding
import com.keelim.nandadiagnosis.model.DiagnosisItem
import java.util.ArrayList


class DiagnosisRecyclerViewAdapter : RecyclerView.Adapter<DiagnosisRecyclerViewAdapter.ViewHolder>() {
    var list: List<DiagnosisItem> = listOf()

    override fun getItemId(position: Int): Long = position.toLong()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(ItemListviewBinding.inflate(LayoutInflater.from(parent.context), parent, false), listener)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = list[position]
        holder.itemTextView.text = item.diagnosis
        holder.desView.text = item.diagnosis_description
    }

    override fun getItemCount(): Int = list.size

    interface OnSearchItemClickListener {
        fun onSearchItemClick(position: Int)
    }

    fun setDiagnosisItem(items: List<DiagnosisItem>) {
        list = items
    }

    var listener: OnSearchItemClickListener? = null

    inner class ViewHolder(binding: ItemListviewBinding, listener: OnSearchItemClickListener?) :
            RecyclerView.ViewHolder(binding.root) {
        val itemTextView: TextView = binding.diagnosisItem
        val desView: TextView = binding.diagnosisDes

        init {
            binding.root.setOnClickListener {
                listener?.onSearchItemClick(absoluteAdapterPosition)
            }
        }

        override fun toString(): String {
            return super.toString() + " '" + desView.text + "'"
        }
    }
}

 

위와 같이 변경하여 저는 테스트를 하였고 동작을 확인하였습니다. Recycler View 는 정말 다양하게 사용할 수 있으니 여러분들은 저보다 더 훌륭한 레이아웃을 짜실 수 있을 것입니다. 

어려운 점이 있다면 댓글을 남겨주시기 바랍니다. 

github.com/keelim/nandaDiagnosis

 

다음 포스팅은 간편한 CI/CD 를 통해서 배포를 자동화 하는 방법을 기술하려고 합니다.